You can find this section under Interface & Design > Mobile CSS StyleSheet in the IRP Admin left navigation menu.
You use this section to modify the entire stylesheet for the mobile version of your website, as held on the file system. Any changes that you make here will be reflected immediately on the mobile site.
As with the non-mobile Website CSS Stylesheet, this section must be enabled by your IRP Agency after they are confident that your design team have the necessary skills and understanding of CSS stylesheets. The CSS section is predominately a resource there for both your Agency's graphic designers and your own.
The CssStylesMobile.aspx page appears as follows:
Use the Stylesheet To Edit setting to select the stylesheet that you want to make changes to:
- The Mobile Style Sheet contains all style information used on the mobile version of your site.
- The Mobile Tools Style Sheet contains all styles used by third-party plug-ins such as jQuery UI, lightbox, jCarousel and miniColours, etc.
At the very top of the Mobile stylesheet you can see some recommendations for editing the CSS:
- Use lower-case lettering throughout the stylesheet.
- Use names that are as short as possible, but as long as necessary.
- Break up multiple-word elements with hyphens, for example, .overall-body.
- Don't use ids (styles prefixed with a #) unless there is no other way. Instead, use classes to uniquely identify the element or elements that you are trying to style. IDs may change with future releases of the IRP.
- Add comments to the sections in your code to explain what each section is for.
- In a subsequent / nested style, change only the properties that you need to as this reduces the impact of a change at a higher level. For example, if you need a link to be a different colour, only change the "color" property.
After you make any changes to the stylesheet, you can see how the website will appear on a mobile device by clicking the Preview Mobile Site button.
If you are satisfied with the look of the website, click the Update Mobile Stylesheet button.
You can also set styles for specific countries in your system by expanding the Country Specific Styles section at the bottom of the page. Simply select a country from the drop-down list and enter your CSS so that customers viewing your mobile site from this country will see a uniquely-styled version of your mobile site. Note that this CSS is output everywhere that the mobile website stylesheet is output, therefore it is site-wide. When adding your CSS, do NOT include surrounding 'style' tags.
Note that you must enable several Mobile Application Settings in order for the mobile version of your website to function. There are also some settings in the 'Mobile Site' section of the Application Settings page that you must enable. You can click the cog icon at the top of the screen to view these latter settings.
