Using custom CSS

Availability

XS Version 24 or later

Article last updated

23 October 2015

Related articles

Problems with backoffice pages caused by custom CSS 

Using aliases

Building a custom home page

Building a custom footer

Adding Javascript to your pages

Introduction

Infradox XS websites use external CSS files to style the look and feel of your pages. The standard CSS is customised with the Color scheme editor and in addition to that you can create your own CSS or modify (overwrite) existing classes. The custom CSS is loaded last, so anything in there will take precedence over other rules that are defined in the standard CSS files or the color scheme CSS file.

  • If you want full control over the CSS, then disable the color CSS to prevent that file from being included when it's not necessary.
  • Note that for manipulating page elements, you should use CSS whenever possible - as opposed to using script. 
  • Make sure that there isn't a backoffice setting to achieve what you want, before you create CSS or script. When in doubt, contact support by creating a ticket.

Prerequisites

If you want to use the Custom CSS option you need a solid understanding of CSS. If you want to be eligible for support, you must use proper indentation and syntax. You will need a browser with developer extenstions installed so that you can inspect the elements on a page. We suggest that you use Chrome. The developer extensions of Chrome allow you to make life changes so that you can try things before actually adding the CSS to the Custom CSS editor.

Please read the article about Building your custom home page for more information first.

Creating your own CSS

Go to Site configuration and click Code editor (in 26.4 or later, the Code editor is in the main menu). Next select Custom CSS in the dropdown at the top of the page. If there are earlier versions then this will show on the top right. Click revision to view who made changes when and/or to restore previous versions of your custom CSS.

The editor will show your CSS. Note that the editor supports syntax highlighting and syntax checking. Use tabs for proper indentation and make sure to check for errors before saving your code.

An example to change the boxes that are used on the forms pages

Go to the My account page (normally in the My account submenu). As you'll see, there's a box in which the form and its input fields appear. This example will show you how to change this for all the forms.

The class that is responsible for drawing this box is

.inputtablecontainer td fieldset 

The below example adds rounded corners, changes the border color to green:

.inputtablecontainer td fieldset {
    border: 1px solid green;
    border-radius:5px;
}

The rest of the class (as defined in the standard CSS files) is unaffected. 

The next example hides the box (or actually its border), it changes the padding and it hides the legends:

.inputtablecontainer td fieldset {
    padding: 0px;
    border: 0px;
}

.inputtablecontainer td legend {
    display:none;
}

Unique page ids

All HTML pages have unique body ids. You can use this to change the CSS for a specific page only. E.g. if you want to the changes in the previous example to take effect on the registration page only, then prefix the classes with the unique body id. For example:

#register .inputtablecontainer td fieldset {
    padding: 0px;
    border: 0px;
}

#register .inputtablecontainer td legend {
    display:none;
}

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk