Guide to cPanel Interface Customization - The styles.css File

Introduction

The styles.css file contains the CSS for each cPanel style. After you create the styles.css file, use your preferred text editor to update it. 

Commonly-customized elements

The diagrams below label some of the elements that you can use to style your theme, and where they apply to the cPanel interface. To easily find additional classes for specific parts of the cPanel interface, we recommend that you use your browser to inspect that portion of the interface (for example, in Google Chrome™, use the Inspect Element feature).

 Select a cPanel & WHM version below to view the diagram for that version:

• cPanel & WHM versions 58 and higher
• cPanel & WHM versions 54 and 56
• cPanel & WHM version 11.52 and earlier

 

Element	Description
.navbar-header	The class for the header that appears at the top of the cPanel interface. The header can include the #quickLinks element, an optional list of links in the navigation bar. These links do not display by default. For more information, read our Guide to cPanel Interface Customization - UI Includes documentation.
.navbar-preferences	The class for the User Preferences menu that appears at the top of the cPanel interface.
#main	The ID for the main body of the cPanel interface. This element includes most of the sections of the cPanel interface that are not the sidebar, header, or footer elements.
#sidebar	The ID for the cPanel interface's sidebar.
.panel-widget	The class for individual sections of main interface content. Each of these sections generally includes a .widget-header header and a .panel-body section that contains one or more item elements. For example, in the cPanel Home interface, the Files section is a .panel-widget section, and each icon in that section is within an item element.
footer	The element for the cPanel interface's footer, which appears at the bottom of the cPanel interface.
.navbar	The class for the footer, which appears at the bottom of the cPanel interface.

• The cPanel Home Interface
• The cPanel Statistics, Dashboard, and User Manager Interfaces

 

Element	Description
.navbar-header	The class for the header that appears at the top of the cPanel interface. The header can include the #quickLinks element, an optional list of links in the navigation bar. These links do not display by default. For more information, read our Guide to cPanel Interface Customization - UI Includes documentation.
.navbar-preferences	The class for the User Preferences menu that appears at the top of the cPanel interface.
#main	The ID for the main body of the cPanel interface. This element includes most of the parts of the cPanel interface that are not header or footer elements.
#sidebar	The ID for the cPanel interface's sidebar.
.widget	The class for individual sections of main interface content. Each of these sections generally includes a .widget-header header and a .widget-body section that contains one or more item elements. For example, in the cPanel Home interface, the Files section is a widget section, and each icon in that section within an item element.
footer	The element for the cPanel interface's footer, which appears at the bottom of the cPanel interface.
.navbar	The class for the footer, which appears at the bottom of the cPanel interface.

 cPanel's Statistics ,  Dashboard , and User Manager  interfaces use this template.

Note:

We removed cPanel's Dashboard interface in cPanel & WHM version 58. 

 

Element	Description
.navbar-header	The class for the header that appears at the top of the cPanel interface. By default, this header scrolls with the cPanel interface. The header can include the #quickLinks element, an optional list of links in the navigation bar. These links do not display by default. For more information, read our Guide to cPanel Interface Customization - UI Includes documentation.
.navbar-preferences	The class for the User Preferences menu that appears at the top of the cPanel interface.
#sidebar	The ID for the cPanel interface's sidebar.
.dashboard-list	The class for the main body of the cPanel interface. This element includes most of the parts of the cPanel interface that are not header or footer elements.
.widget	The element where each dashboard-item element resides.
.dashboard-item	The class for individual sections of interface content. Each of these sections generally includes a widget-header header and a widget-body section that contains one or more item elements. They may also include .progress-bar or .form-control elements. In cPanel & WHM version 54 through 58, the #quickLinks widget appears on the Dashboard interface by default. For more information, read our Guide to cPanel Interface Customization - UI Includes documentation.
footer	The element for the cPanel interface's footer that appears at the bottom of the cPanel interface.
.navbar	The class for the footer that appears at the bottom of the cPanel interface.

Element	Description
navbar-header	The class for the header that appears at the top of the cPanel interface. By default, this header does not scroll with the cPanel interface. The header can include the #quickLinks element, an optional list of links in the navigation bar. These links do not display by default. For more information, read our Guide to cPanel Interface Customization - UI Includes documentation.
content	The ID for the main body of the cPanel interface. This element includes most of the parts of the cPanel interface that are not header or footer elements.
aside	The element for the cPanel interface's sidebar.
cellbox	The class for individual sections of main interface content. Each of these sections generally includes a cellbox-header header and a cellbox-body body section that contains one or more item elements. For example, in the cPanel Home interface, the Files section is a cellbox section, and each icon in that section is within an item element.
footer	The class for the footer that appears at the bottom of the cPanel interface.

Common styles.css items

Change button styles

By default, the cPanel interface customizes the appearance of buttons. To return your custom style's buttons to the default Bootstrap buttons, add the following code to your styles.css file:

.btn {
    border-bottom:0;
    box-shadow: none;
}

.btn-primary {
    position: relative;
    vertical-align: top;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

You can also customize this code in your styles.css file to add your own customizations.

Target a specific screen size for certain CSS rules

Use @media queries to target your style's content for a specific screen size. These statements create conditional CSS rules that the system only applies when the screen that you use to view the cPanel interface matches certain criteria. The @media statement defines the conditions under which the system applies the nested rules.

For example, you can use the following rule to hide the quick links navigation bar when the width of the screen is less than 768 pixels:

@media (max-width: 767px) {
    .navbar-subnav {
        display: none;
    }
    body {
        background:pink;
    }
}

For more information about @media queries, read the Bootstrap documentation.

Refer to another asset in the styles.css file

After you apply a style, the system generates the current_style symlink in the style directory. The current_style symlink always points to the active style that the user selected in cPanel's  Change Style  interface (Home >> Preferences >> Change Style). If you use the /styled/current_style path to link external styles in your styles.css file, the cpsrvd daemon queries the current style for those assets.

For example, to add a background image to your cPanel dashboard that links to your current style, include the following CSS statement in the styles.css file:

body {
   background-image:url("/styled/current_style/image.png");
}

Target specific cPanel or Webmail interfaces

You can use appkey values to target specific cPanel or Webmail interfaces in your custom CSS files.

• To target an existing interface, find the appropriate appkey in our Guide to cPanel Interface Customization - Appkeys documentation.
• To target a custom interface in a cPanel plugin, use the application's file value in the dynamicui.conf file (the icon value in the plugin's install.json file).

For example, to change the color of the headers in cPanel's  Site Publisher  interface (Home >> Domains >> Site Publisher) only, without affecting any other headers, add the following lines to the styles.css file:

#site_publisher h1,
#site_publisher h2
{ color: red; }

Target a specific application

You can use classes to target a specific application in your custom CSS files.

• To target cPanel interfaces, use the cpanel class.
• To target Webmail interfaces, use the webmail class.

For example, to change the color of the headers in Webmail interfaces   only , without affecting any other headers, add the following lines to the  styles.css  file:

.webmail { 
    background-color: red;
}

Load multiple stylesheets

Use the @import CSS rule to load multiple stylesheets into your styled directory:

@import url("/styled/current_style/another_style.css");

RTL languages

For languages that read right-to-left, use the following code as an example of how to switch text alignment within a custom style:

html[dir="rtl"] h1, html[dir="rtl"] .h1 {
    text-align:right;
}

Change floating navigation bar

By default, the cPanel interface's navigation bar uses a fixed header that does not scroll with the cPanel interface. To allow the navigation bar to scroll with the cPanel interface, add the following code to your styles.css file:

header .navbar-fixed-top {
/* no fixed header */
    position:relative;
    top:inherit;
    width:inherit;
}
 
body {
    padding-top:0;
}
 
.navbar {
    margin-bottom:0;
}

Modify the .item element

The .item element determines how the .cellbox-body sections of the interface display each individual icon and name.

For example, to move a feature's title to the right of its icon, add the following code to your styles.css file:

.item {
    width:200px;
}

.itemImageWrapper {
    width:58px;
    float:left;
}

.itemTextWrapper {
    text-align:left;
}