The PRL site is hosted by the MSU College of Natural Sciences on Mura CMS. Custom content and styles are allowed between the header and footer areas only. Modifying PRL's code requires: 1) some knowledge of HTML, CSS, and Javascript, 2) familiary with Mura CMS back-end and front-end, and 3) a code editor, such as Visual Studio Code. Below are instructions on how to modify and publish the code.
This section applies only to the following files: prlCustomCSS-2020.scss/.css/.min.css, prlComponents.scss, and prlCNSOverrides.scss. Ignore all files related to the jQuery timeline.
- Custom styles are written in the prlCustomCSS-2020.scss file. This is the core styles file, written in SCSS, which allows for consistent design of components. This file imports two other .scss files, which also can be modified:
- prlComponents.scss: for custom components (colors, cards, buttons, etc.)
- prlCNSOverrides.scss
- Compile and minimize the base prlCustomCSS-2020.scss file into prlCustomCSS-2020.min.css.
- Copy and paste the code from the minimized file into Mura's dedicated custom CSS file, called prlCustomCSS.css. This file is found in Mura's File Manager, under prl_User_Assets/File/websiteTheme/prlCustomCSS.css. Right click on it, choose 'Edit', paste the code, and save your changes.
- Do not change the name of the prlCustomCSS.css file in Mura. Otherwise, CSS will not load.
- CSS files in this repository are also found on the PRL server.
The History Timeline on the About page is a jQuery timeline plugin called ZoomTimeline (knowledge base/developer's site), which allows for multiple presentation styles. The PRL version adopts the 3d slider presentation mode. The PRL-about-page-timeline-jQuery-compiled.scss file includes all the package's core CSS files. This file - and the timeline's associated JS scripts - are dynamically added to the document head when the About Page is visited (see prlCustomJS file for insertion method).
Do not make any changes to the PRL-about-page-timeline-jQuery-compiled.scss file. For additional timeline styling, instead use the prlCustomCSS-2020.scss file, under the 'About' section. As the timeline is constantly updated by the developer, its core files are overwritten after each update.
Warning: due to the way Mura's inline editor works, make sure to edit the .html files in an external code editor. Front-end editing might break certain features.
- PRL-about-page.html: About page
- PRL-contact-us.html: Contact Us page
- PRL-CAAPP-overview-page.html: CAAPP Overview page
- PRL-graduate-program-overview-page.html: Graduate Program Overview page
- PRL-card-markup.html: Markup for all the PRL card styles, also found on the PRL Web Components Demo page under the Cards section.
- PRL-research-projects-page.html: Research Projects page
- PRL-community-brand-toolkit.html: PRL Community Brand Toolkit page
- PRL-web-components-demo.html: Web Components Demo page. Note that the accordion component will break if the markup is edited on the front-end.
- PRL-homepage-brands-2018.html: PRL homepage right below the hero section.
- To update, paste the code in the Homepage - Brands Section component in Mura's File Manager.
- To update the Featured Research content (right side of this section, as seen on a desktop), modify the Homepage - Brands Section - Featured Research component in Mura. This component does not have a HTML file.
- PRL-homepage-news-events-2018.html: PRL homepage below the Brands section.
- To update, paste the code in the Homepage - News & Events component in Mura's File Manager.
- PRL-Code-of-Ethics.html: Code of Ethics page
- 404 Page: 404 page
- Components in Mura: this folder includes markup files for custom components stored in Mura.
- Custom JS is written in the prlCustomJS.js file. This file is found in this repository and the PRL server.
- Copy and paste the code into Mura's dedicated custom JS file, also called prlCustomJS.js. This file is found in Mura's File Manager, under prl_User_Assets/File/websiteTheme/prlCustomJS.js. Right click on it, choose 'Edit', paste the code, and save your changes.
- Do not change the name of the prlCustomJS.js file in Mura. Otherwise, the JS will not load.