Problems with backoffice pages caused by custom CSS

Availability

XS all versions

Related articles

Infradox XS tags, functions and conditions

Building a custom header and menu

Building a custom footer

Adding Custom CSS

Adding Javascript to your pages

Introduction

As described in the articles that are listed above, you can add your own CSS to change the look of your website. There are a number of website functions for administrators 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 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. elemen id's must be unique. There may be dependencies between the embedded script and CSS elements on the HTML pages.

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:

#contactus input[type="checkbox"] {
    padding:30px
}

as opposed to 

input[type="checkbox"] {
    padding:30px
}

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:

#contentDialog  input[type="checkbox"] {
    padding:0px !important;
}

Another example of a global CSS rule that you should avoid, because it affects everything throughout the entire webite:

th, td {
   text-align: left;
   vertical-align: middle;
}

Again, use the page id(s) to make sure that only certain pages are affected as opposed to all pages and backoffice 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.

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk