{"id":35882,"date":"2015-12-09T13:00:00","date_gmt":"2015-12-09T19:00:00","guid":{"rendered":"http:\/\/blog.cpanel.com\/?p=35882"},"modified":"2015-12-09T13:00:00","modified_gmt":"2015-12-09T19:00:00","slug":"update-your-style-for-version-54","status":"publish","type":"post","link":"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/","title":{"rendered":"Update Your Style for Version 54"},"content":{"rendered":"

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.
\n\"1152_siteocity\"<\/a>
\nAs an example, here’s what we did to update the Siteocity style to work in version 54.<\/p>\n

Before updating<\/h1>\n

When we updated our cPanel account to version 54, our Siteocity style looked like this:
\n\"1152_menu\"<\/a>
\nNot 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.<\/p>\n

Simple changes<\/h1>\n

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:<\/p>\n

aside#sidebar {
\ntop:91px;
\n}<\/code><\/p><\/blockquote>\n

In version 54, we now call the section headers on the Home<\/em> interface and the dashboard widget headers the same. This block of CSS will make headers more consistent across all interfaces:<\/p>\n

.widget-header {
\nborder: 0;<\/code><\/p>\n

background-image: -o-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);
\nbackground-image: -moz-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);
\nbackground-image: -webkit-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);
\nbackground-image: -ms-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);
\nbackground-image: linear-gradient(to top, #2C5B8E 0%, #6593BC 73%);
\n}<\/p><\/blockquote>\n

To remove the black line below the header, add this to your CSS file:<\/p>\n

#wrap {
\nborder-top:1px solid black;
\nmargin-top:0;
\n}<\/code><\/p><\/blockquote>\n

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:<\/p>\n

tr {
\nbackground:#FFFFFF;
\n}<\/code><\/p><\/blockquote>\n

We used this CSS block to simplify the background image:<\/p>\n

body {
\nbackground:url(\/styled\/current_style\/footer.png) #FFFFFF bottom left fixed repeat-x;
\n}<\/code><\/p><\/blockquote>\n

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<\/code> and saved in \/var\/cpanel\/brand<\/code> or it wouldn’t have worked.<\/p>\n

After updating<\/h1>\n

With these simple changes, we made our all of the interfaces in our Siteocity style compatible with cPanel & WHM version 54.
\n\"1154_menu\"<\/a>
\nYou can fork the Siteocity style on Github<\/a> to see all of the changes that we made, or read our Guide to cPanel Style Development<\/a> for more examples and detailed instructions.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":77,"featured_media":64437,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"inline_featured_image":false,"footnotes":""},"categories":[49,61],"tags":[],"class_list":["post-35882","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-products","category-tips-and-tricks","post_format-post-format-image"],"acf":[],"yoast_head":"\nUpdate Your Style for Version 54 | cPanel<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Update Your Style for Version 54 | cPanel\" \/>\n<meta property=\"og:description\" content=\"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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/\" \/>\n<meta property=\"og:site_name\" content=\"cPanel\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cpanel\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-09T19:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devel.www.cpanel.net\/wp-content\/uploads\/2015\/11\/siteocity_feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1001\" \/>\n\t<meta property=\"og:image:height\" content=\"515\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cPanel Community\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cPanel\" \/>\n<meta name=\"twitter:site\" content=\"@cPanel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cPanel Community\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/\",\"url\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/\",\"name\":\"Update Your Style for Version 54 | cPanel\",\"isPartOf\":{\"@id\":\"https:\/\/devel.www.cpanel.net\/#website\"},\"datePublished\":\"2015-12-09T19:00:00+00:00\",\"dateModified\":\"2015-12-09T19:00:00+00:00\",\"author\":{\"@id\":\"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8\"},\"breadcrumb\":{\"@id\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devel.www.cpanel.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Update Your Style for Version 54\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devel.www.cpanel.net\/#website\",\"url\":\"https:\/\/devel.www.cpanel.net\/\",\"name\":\"cPanel\",\"description\":\"Hosting Platform of Choices\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devel.www.cpanel.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8\",\"name\":\"cPanel Community\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g\",\"caption\":\"cPanel Community\"},\"description\":\"The web hosting industry's most reliable management solution since 1997. With our first-class support and rich feature set, it's easy to see why our customers and partners make cPanel & WHM their hosting platform of choice. For more information, visit cPanel.net.\",\"sameAs\":[\"https:\/\/cpanel.net\"],\"url\":\"https:\/\/devel.www.cpanel.net\/blog\/author\/cpadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Update Your Style for Version 54 | cPanel","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/","og_locale":"en_US","og_type":"article","og_title":"Update Your Style for Version 54 | cPanel","og_description":"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 […]","og_url":"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/","og_site_name":"cPanel","article_publisher":"https:\/\/www.facebook.com\/cpanel\/","article_published_time":"2015-12-09T19:00:00+00:00","og_image":[{"width":1001,"height":515,"url":"https:\/\/devel.www.cpanel.net\/wp-content\/uploads\/2015\/11\/siteocity_feature.jpg","type":"image\/jpeg"}],"author":"cPanel Community","twitter_card":"summary_large_image","twitter_creator":"@cPanel","twitter_site":"@cPanel","twitter_misc":{"Written by":"cPanel Community","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/","url":"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/","name":"Update Your Style for Version 54 | cPanel","isPartOf":{"@id":"https:\/\/devel.www.cpanel.net\/#website"},"datePublished":"2015-12-09T19:00:00+00:00","dateModified":"2015-12-09T19:00:00+00:00","author":{"@id":"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8"},"breadcrumb":{"@id":"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devel.www.cpanel.net\/blog\/products\/update-your-style-for-version-54\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devel.www.cpanel.net\/"},{"@type":"ListItem","position":2,"name":"Update Your Style for Version 54"}]},{"@type":"WebSite","@id":"https:\/\/devel.www.cpanel.net\/#website","url":"https:\/\/devel.www.cpanel.net\/","name":"cPanel","description":"Hosting Platform of Choices","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devel.www.cpanel.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8","name":"cPanel Community","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g","caption":"cPanel Community"},"description":"The web hosting industry's most reliable management solution since 1997. With our first-class support and rich feature set, it's easy to see why our customers and partners make cPanel & WHM their hosting platform of choice. For more information, visit cPanel.net.","sameAs":["https:\/\/cpanel.net"],"url":"https:\/\/devel.www.cpanel.net\/blog\/author\/cpadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/posts\/35882"}],"collection":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/comments?post=35882"}],"version-history":[{"count":0,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/posts\/35882\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/media\/64437"}],"wp:attachment":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/media?parent=35882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/categories?post=35882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/tags?post=35882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}