Using custom CSS

The standard CSS is customised with built-in tools such as the Color scheme editor and a number of other functions. If you are looking to work on more advanced changes, then you can create your own CSS.

The custom CSS (Cascading Style Sheet) file is loaded last, so anything in there will take precedence over other rules that are defined in the standard Infradox CSS.

• 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’ll need a CSS and HTML skills. To be eligible for support, use proper indentation and syntax. You will need a browser with developer extensions 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.

It is recommended that you read the article Infradox XS Customisation about the XS coding language and the article Using the code editor. Also, read the article about Preventing problems caused by CSS changes.

Creating your own CSS

Load the code editor from 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 now load and show your CSS. Use tabs for proper indentation and make sure to check for errors before saving your code.

Including CSS from a different location

While developing, it can be convenient to include CSS that you are editing on another server. To do this, select “Includes” in the template drop down box. Then insert a link to your own CSS file. For example:

<link rel="stylesheet" href="http://myownerserver.com/mycss/develop.css" type="text/css" />

You can now change the CSS on your own server without having to use the code editor, as it will be included on all the client facing pages. You should paste all of your CSS into the code editor once you’re done and before switching from Develop to Production mode.

Browser capabilities

For version 31.2 or later.
The HTML element of every client facing page has a number of classes that you can use to determine certain browser capabilities. E.g. to find out if the browser supports CSS grid, you can check for the class mzr_no-cssgrid. If this class exists then the browser doesn’t support CSS grid, if this capability is available then the class mzr_cssgrid will exist. This way you can add specific CSS for older browsers. Infradox includes a Modernizr script file for this in the head of the HTML pages.
You can also use Javascript to read the settings object property cssgrid (this object exists at the bottom of every HTML page).

Example:

.mzr_no-cssgrid #pagelayoutmenu .vstyle4.flowoption4,
.mzr_no-cssgrid #pagelayoutmenu .vstyle4.flowoption5 { 
	display:none !important;
}

The above example is actually in core.css and it hides the flow option from the thumbnail layout menu if a browser doesn’t support CSS grid (note that you can configure a flow layout in Back office that uses Javascript instead of CSS).

A simple 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;
}

If you are working on custom HTML templates, every page also has a XST id. A list of id’s and an explanation can be found in the article about Infradox XS customisation.

Media queries

You can add your media queries for your responsive design to the CSS template in the code editor, but it is recommended to keep your media queries separate and to add those to the “Device CSS” template.
For example:

@media screen and (max-width: 1416px) {
    #group .gbox span.artistname {
        width:90%;
        font-size: 1.40em;
    }
}

Fonts

You can select the fonts to use in Site configuration > Website Style. In addition to a number of standard fonts, you can specify up to three Google fonts as well. It is recommended to set up your fonts using this settings section of the website as opposed to overwriting fonts in your CSS. It is however also possible to include Google (or other) external fonts in the code editor if that’s what you prefer. The template “includes” (code 51) is intended for this.
Here’s an example of how you can use a Google font in the includes template:

<link href="//fonts.googleapis.com/css?family=Inconsolata|Open+Sans|Pacifico" rel="stylesheet" type="text/css">

Note that it is not recommended to add such font links in the CSS template, always use the Includes template as described in this paragraph.

Using @font-face

If you want to use your own licenced fonts, then those files must be in the fonts folder of your website.
Below is an example of how you can embed your font using @font-face:

@font-face{
    font-family:"Futura Medium";
    src:url("/fonts/1475810/2341510f-e527-4001-89c5-d66d2c9ed34b.eot?#iefix") format("eot"),
        url("/fonts/1475810/f37c7943-2db2-4470-9e2a-74a8d01f6776.woff2") format("woff2"),
        url("/fonts/1475810/d372b0cb-29a1-4da9-8574-9244967bd9d6.woff") format("woff"),
        url("/fonts/1475810/aa79c75a-30c9-4d70-a5a7-bdde1d5449fd.ttf") format("truetype");
}

Fontawesome

Fontawesome (www.fontawesome) lets you use vector icons and social logos on your website with CSS. The Infradox platform includes a copy of the required files. To include the CSS in your pages, go to Site configuration > Website Style and in the Fontawesome section, select the radio button Include fontawesome.min.css.
If you want to use fontawesome icons instead of the Infradox icons then it’s best to choose the No button images setting in the Button images setting. You will then have to add your own CSS of course because all default images (e.g. icons underneath thumbnails, pagination arrows, dialog close buttons and so on) are removed from the default CSS.
You can load a CSS example as a starting point in the code editor (the name of the example file is no-buttons-fontawesome.txt.

Compiled CSS file

For 31.2 or later.
If you save a CSS file in the code editor, the software will generate a new CSS file that has the name of the website followed by an automatically incremented version number. For example:

<link rel="stylesheet" href="/siteowner/css/developxs10.css?build=1000578" type="text/css" />

This single CSS file has the CSS that is generated for the settings that are stored via Site configuration > Website style, the Custom CSS and the Device CSS that you have added. Comments, tabs and white space are automatically removed.
For example, the lines below in your CSS:

#home .dcategories, 
#home .dshowcase1 {
    margin-right:2%
}

will look like this in the generated CSS file:

#home .dcategories,#home .dshowcase1 {margin-right:2%}

Infradox clients can create a ticket if they need help.