Infradox websites can easily adapt to your design with custom CSS to change the look and feel. There are a number of website functions for staff members and contributors (with certain permissions) that may be affected by your changes – as these functions are integrated in the normal client facing web pages.
Besides the staff member / administrator and contributor functions, some client facing tools may be inadvertently affected by your CSS as well – for example the lightbox related functions. Furthermore, you should not create element id’s that already exist in the default CSS/HTML to prevent scripting problems. I.e. element id’s must be unique. There may be dependencies between the embedded Script and CSS elements on the HTML pages.
Don’t make global CSS changes
To prevent problems with the admin and contributor functions, try to add page specific CSS when possible – as opposed to overriding global CSS. You’ll find a body id in every HTML page that you can use for this purpose. For example, add a CSS rule like this:
as opposed to
The first rule in this example changes all checkboxes throughout the website, whereas the second rule affects the contact us page only.
However, changing all inputs throughout the website without having to create separate CSS rules for every page may be exactly what you want to achieve. In that case, make sure to also create custom CSS for admin / contributor functions that will be affected by your changes.
The example above for instance, will cause problems to the metadata edit dialog as the padding of the checkbox elements will cause the layout to change too much. You can fix this by inspecting the metadata edit dialog to find the id of the container (which is #contentDialog) and then you can add custom CSS to fix any layout problems that you have with the aforementioned dialog. For example:
Another example of a global CSS rule that you should avoid, because it affects everything throughout the entire webite:
Again, use the page id(s) to make sure that only certain pages are affected as opposed to all pages and Back office functions.
Which functions may be affected by your CSS changes
These functions are embedded in the client facing pages and may therefore be affected by your custom CSS:
- Batch dialog
- Gallery manager dialog
- Set editor dialog
- Content metadata dialog
- Administrator’s toolbar
- Contributor’s toolbar
- Full screen lightbox dialog
- Lightbox tools dialog
Elements with unique id’s and/or class names
Certain functions may depend on unique element id’s (and class names) that exist in the HTML. If you create custom CSS, then be careful not to reintroduce id’s that already exist or the script may fail. For styling purposes, it is recommended to use classes as opposed to id’s. Use your browser’s code inspector to check for existing elements and always check for script errors after you have made changes.
Test your changes!
Agreed, it’s the least fun part of website customisation. But if you make changes to the CSS, Script or templates, you’ll have to make sure that your changes do not inadvertently cause problems on the client facing pages or the Back office pages. You need to test both. And you’ll need to test your changes with different user roles, e.g. as a guest, as a logged in user, as a staff member and as a contributor (if that function is enabled).
Also, you will have to test your changes using different browsers (e.g. Safari, Chrome, MS Internet Explorer, Firefox) and preferably on both Windows and Mac.
