Customizing the page using CSS

You can customize a page using the CloudIO Global CSS setup.

1. In the top-right corner of the menu bar, click . The Navigation menu is displayed.

2. Under the Administration role group, click Setup. The Setup page is displayed.

3. From the left pane of the page, navigate to the Global CSS tab.

4. To customize your page, you can edit the existing styles or add new ones.

5. On the top-right corner, click Save.

The property of any component can be over-ridden by mentioning that components' property as important in the Global CSS tab.

Examples to customize the page using CSS:

Custom CSS for background:

Syntax:

Start with dot(.) and append the class in setup -> Global CSS
.bg-anyclass
{
 anyCssAttributes : valueForCssAttribute;
}

Example:

.bg-customcolor
{
color : red;
Font-size : xx-large;
}

Declare global CSS for pre-defined class:

Syntax:

.anyPredefineClass
{
 anyCssAttribute : valueForCssAttribute
}

Example:

.io-header .io-header-icons .fa-bars → io.header is class in that we have io-header-icons class in that class we have fa-bars class which is menu class
{
 color : aqua; → Color is Css Attribute and aqua is a value for Css Attribute
 }

Define custom class:

Syntax:

.defineClass htmlTag
{
anyCssAttribute : valueForCssAttribute
}

Example:

.io-col.customclass.col label → Custom class define for label
{
 color : blue ; → Color is Css Attribute and blue is a value for Css Attribute
}

A class may consist of white space which needs to be replaced with dot(.) operator.

HTML tags like label, span, ul and li and many more, sometimes will not have a class defined for them. You can define your own custom class for those tags and customize the page as per your requirements.