You can find this section under Interface & Design > Website CSS StyleSheet in the IRP Admin left navigation menu.
The CSS style section allows you to set or change styles associated with all areas of your site. This section requires strong design skills and understanding of CSS stylesheets. The CSS section is predominately a resource for your interface designers to change all aspects of the look of your site.
The main CssStyles.aspx screen appears as follows:
Use the Stylesheet To Edit setting to select the stylesheet that you want to make changes to:
- The Main Style Sheet contains all style information used on the web site.
- The Tools Style Sheet contains all styles used by third-party plug-ins such as jQuery UI, lightbox, jCarousel and miniColours.
You can see all the CSS styles in the Main Stylesheet Content box. This is where you make your changes and where you can preview your changes by clicking the Preview Website button (depending on your browser settings you may have to allow the browser to open the Preview window when you click the button). When you are happy with the changes you have made, click the Update Stylesheet button.
Important: Make sure that you create a copy of the original stylesheet before you make any changes. This ensures that you can easily restore the styles if your changes do not work out as desired.
It’s a good idea to use the ‘Inspect Element’ feature of modern web browsers when you are making these changes to the style of your web site. To access this menu, first open the front end of your web site in your normal web browser and decide which element on the page you want to change the style of. Then place your cursor on the element, right-click the mouse button and select ‘Inspect Element’. You can then see the HTML (normally on the left of the screen) and the associated CSS (normally to the right). You can modify the styles using the CSS section and see how the website changes accordingly. These changes are only temporary until you close the window but it enables you to see how your changes will change the look of your website. For more information about how these tools work, look up the ‘Inspect Element’ function for your web browser in a search engine — it is easy to find help for all commonly-used browsers.
For example, you might right-click on the top navigation tabs on your site, select ‘Inspect Element’ and find that the HTML has a class called, for example, ‘tab-link’. When you look at the CSS you may see that this class has the font colour set to white (color: #fff). If you wanted to see how this would look in a black font, you could change this to color: #000. If you liked the change, you could then go onto the back end CssStyles.aspx page, find the entry for tab-link in the main stylesheet (you can simply use the Find function on your browser, or press Ctrl+F on your keyboard, and type in the name of the element) and then update the style using the value you liked on the front end. Use the Preview Website feature to double check that things are the way you intend them to be, then click Update Stylesheet.
In the lower part of the screen you can see the Country Specific Styles section. Here you can select a country from the drop-down list and then change the styles specifically for customers viewing the site from that country. For example, you may want to override the default body tag to have a localised background. Note that this CSS is output everywhere that the main website stylesheet is output, therefore it is site wide. Make sure that you do NOT include surrounding 'style' tags.
You can also use the following buttons at the top of the screen:
- Email Stylesheet: Click this button to go directly to the CssStylesEmail.aspx page. From here you can edit the stylesheet for Emails that you create.
- Mobile Stylesheet: Click this button to go directly to the CssStylesMobile.aspx page. From here you can edit the stylesheet for the Mobile website.
- Tools Stylesheet: Click this button to go directly to the CssStyles.aspx?VisibleStyleSheet=2 page. From here you can edit the stylesheet used by third-party plug-ins such as jQuery UI, lightbox, jCarousel, miniColours, etc.
- Interventions Stylesheet: Click this button to go directly to the CssStylesInterventions.aspx page. From here you can edit the stylesheet for the IRP Interventions.
