How can I add custom CSS?

Follow

This tutorial will take you through the steps of adding custom styles to your login screen to match your branding.

 

Step 1: Create Your Custom CSS File

Open a blank file in your text editor and save it as a .css file. You can now add rules and properties to customize your page. In order to do this you’ll need to override any existing styles from the default template.

 

Step 2: Override Existing Styles

In this example, we will add a border and background to the login form.

 

 

With Chrome Developer Tools, we can see that the form and heading are located in the content div within content-area. The default style is:

#content-area #content { display: table-cell; width: 60%; position: relative; padding-right: 24px; vertical-align: top; }

 

If we want to add a light gray background color to the content, we can add this line of code to our custom stylesheet:

#content-area #content { background-color: #ccc; }

 

If we want to add a dotted navy border with a rounded edge, we can add:

#content-area #content { background-color: #ccc; border: 2px dotted #243e6e; border-radius: 10px; }

 

To add extra padding to the content and decrease the width, we can add:

#content-area #content { background-color: #ccc; border: 2px dotted #243e6e; border-radius: 10px; padding: 30px; width: 50% !important; }

Adding "!important" ensures that the current style (in this case "width: 60%") will be overridden.   

Save these changes in your .css file.

 

Step 3: Upload Your Stylesheet

Open your admin panel and click Settings > Basic Settings. Next to Custom CSS, click Choose File. Select your .css file and click Save Changes. Your custom CSS will now override the existing #content styles.

 

 BEFORE                                                                      AFTER

 

Tip: Use the Chrome Developer Console to test out your changes and achieve the desired look. There are many other styles you can apply to the login screen with your custom stylesheet, from fonts and colors to borders and background images.

 

See below for a few examples of what kind of customization is possible with a custom CSS file.

 

 

 

 

 

Have more questions? Submit a request

Comments

  • Avatar
    Robert Boardman

    Is it possible to customize the CSS for the dashboard and User settings pages in the system? We have customized the css for our login page, but have noticed that other pages displayed through the system (like the dashboard, acceptable use page, user settings, etc...) are not showing the style updates we made in our customized css file we updated for the login page.

Powered by Zendesk