- Created by Documentation, last modified on Apr 09, 2018
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.
Important:
- You must use
styles.css
as the name of your custom CSS file.- In cPanel & WHM version 60 and later, you can also supply the
styles.min.css
file. - We strongly recommend that you include both the
styles.css
andstyles.min.css
files. - If you use another name for your CSS file, the system will not apply the CSS to the cPanel interface.
- In cPanel & WHM version 60 and later, you can also supply the
- The cPanel interface uses Twitter Bootstrap as its base framework, with a base stylesheet to override some Twitter Bootstrap rules. For more information about Twitter Bootstrap, read the Twitter Bootstrap documentation .
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 |
.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. |
| 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 For example, in the cPanel Home interface, the Files section is a |
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. |
Element | Description |
---|---|
.navbar-header | The class for the header that appears at the top of the cPanel interface. The header can include the |
.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. |
| 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 For example, in the cPanel Home interface, the Files section is a |
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.
|
.navbar-preferences | The class for the User Preferences menu that appears at the top of the cPanel interface. |
| 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 In cPanel & WHM version 54 through 58, the |
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.
|
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. |
| The element for the cPanel interface's sidebar. |
| The class for individual sections of main interface content. Each of these sections generally includes a For example, in the cPanel Home interface, the Files section is a |
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 For example, to add a background image to your cPanel dashboard that links to your current style, include the following CSS statement in 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.styles.css
file:body {
background-image:url("/styled/current_style/image.png");
}
Target specific cPanel or Webmail interfaces
Note:
This section only applies to cPanel & WHM version 60 and later.
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 thedynamicui.conf
file (theicon
value in the plugin'sinstall.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
Note:
This section only applies to cPanel & WHM version 60 and later.
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
Notes:
- This section only applies to cPanel & WHM version 54 and later.
- You may experience increased load times if you 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
Note:
This section only applies to cPanel & WHM version 11.52 and earlier.
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
Note:
This section only applies to cPanel & WHM version 11.52 and earlier.
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; }
cPanel Interface Customization
Compatible with:
- cPanel 11.46+
- Paper Lantern (the default cPanel theme) only.
Warning:
Do not use this documentation to attempt to apply customizations to cPanel's deprecated x3 theme.
Related Documentation
-
Page:Tutorial - Customize the WHM User Interface with CSS — This tutorial customizes the appearance of a WHM interface theme.
-
Page:cPanel API 1 Functions - Branding::file — This function searches for a file within a theme and returns its URL.
-
Page:cPanel API 1 Functions - Branding::setupdirs — This function creates an account's
/cpanelbranding
directory and subdirectories, and sets its permissions. -
Page:cPanel API 1 Functions - Branding::image — This function displays a branding image's URL.
-
Page:cPanel API 1 Functions - Branding::killimg — This function removes an image from a branding package.