In cPanel and WHM version 54, the cPanel interface is changing in a lot of ways, which means the way you customize cPanel styles will also change. With a few more elements and classes, you can easily update your 11.52 style to 54. Before we updated to version 54, we applied a custom style to the Siteocity cPanel interface.
As an example, here’s what we did to update the Siteocity style to work in version 54.
When we updated our cPanel account to version 54, our Siteocity style looked like this:
Not too shabby, but a few things broke. The sidebar overlapped the header, the transparent progress bars weren’t working with the new background image, and the form fields needed to account for the new header.
The most obvious broken element was the sidebar. To force it further down the page and avoid things overlapping, we added a few simple lines to the style.css file in our style’s directory:
aside#sidebar {
top:91px;
}
In version 54, we now call the section headers on the Home interface and the dashboard widget headers the same. This block of CSS will make headers more consistent across all interfaces:
.widget-header {
border: 0;background-image: -o-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);
background-image: -moz-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);
background-image: -webkit-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);
background-image: -ms-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);
background-image: linear-gradient(to top, #2C5B8E 0%, #6593BC 73%);
}
To remove the black line below the header, add this to your CSS file:
#wrap {
border-top:1px solid black;
margin-top:0;
}
Another small fix for this style was making sure that the tables on the inner pages were clearly legible. Since there’s a background image, we made these more opaque:
tr {
background:#FFFFFF;
}
We used this CSS block to simplify the background image:
body {
background:url(/styled/current_style/footer.png) #FFFFFF bottom left fixed repeat-x;
}
To finish it all off, we added a Webmail logo for those customers that use the Webmail interface. We made sure that the logo was named webmail.png and saved in /var/cpanel/brand or it wouldn’t have worked.
With these simple changes, we made our all of the interfaces in our Siteocity style compatible with cPanel & WHM version 54.
You can fork the Siteocity style on Github to see all of the changes that we made, or read our Guide to cPanel Style Development for more examples and detailed instructions.
