{"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":"<p>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.<br \/>\n<a href=_-2470.html><img decoding=\"async\" class=\"alignnone\" src=_-2471.html alt=\"1152_siteocity\" \/><\/a><br \/>\nAs an example, here&#8217;s what we did to update the Siteocity style to work in version 54.<\/p>\n<h1>Before updating<\/h1>\n<p>When we updated our cPanel account to version 54, our Siteocity style looked like this:<br \/>\n<a href=_-2472.html><img decoding=\"async\" class=\"alignnone\" src=_-2473.html alt=\"1152_menu\" \/><\/a><br \/>\nNot too shabby, but a few things broke. The sidebar overlapped the header, the transparent progress bars weren&#8217;t working with the new background image, and the form fields needed to account for the new header.<\/p>\n<h1>Simple changes<\/h1>\n<p>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&#8217;s directory:<\/p>\n<blockquote><p><code>aside#sidebar {<br \/>\ntop:91px;<br \/>\n}<\/code><\/p><\/blockquote>\n<p>In version 54, we now call the section headers on the <em>Home<\/em> interface and the dashboard widget headers the same. This block of CSS will make headers more consistent across all interfaces:<\/p>\n<blockquote><p><code>.widget-header {<br \/>\nborder: 0;<\/code><\/p>\n<p>background-image: -o-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);<br \/>\nbackground-image: -moz-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);<br \/>\nbackground-image: -webkit-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);<br \/>\nbackground-image: -ms-linear-gradient(top, #2C5B8E 0%, #6593BC 73%);<br \/>\nbackground-image: linear-gradient(to top, #2C5B8E 0%, #6593BC 73%);<br \/>\n}<\/p><\/blockquote>\n<p>To remove the black line below the header, add this to your CSS file:<\/p>\n<blockquote><p><code>#wrap {<br \/>\nborder-top:1px solid black;<br \/>\nmargin-top:0;<br \/>\n}<\/code><\/p><\/blockquote>\n<p>Another small fix for this style was making sure that the tables on the inner pages were clearly legible. Since there&#8217;s a background image, we made these more opaque:<\/p>\n<blockquote><p><code>tr {<br \/>\nbackground:#FFFFFF;<br \/>\n}<\/code><\/p><\/blockquote>\n<p>We used this CSS block to simplify the background image:<\/p>\n<blockquote><p><code>body {<br \/>\nbackground:url(\/styled\/current_style\/footer.png) #FFFFFF bottom left fixed repeat-x;<br \/>\n}<\/code><\/p><\/blockquote>\n<p>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 <code>webmail.png<\/code> and saved in <code>\/var\/cpanel\/brand<\/code> or it wouldn&#8217;t have worked.<\/p>\n<h1>After updating<\/h1>\n<p>With these simple changes, we made our all of the interfaces in our Siteocity style compatible with cPanel &amp; WHM version 54.<br \/>\n<a href=_-2474.html><img decoding=\"async\" class=\"alignnone\" src=_-2475.html alt=\"1154_menu\" \/><\/a><br \/>\nYou can fork the <a href=_-2476.html target=\"_blank\" rel=\"noopener\">Siteocity style on Github<\/a> to see all of the changes that we made, or read our <a href=_-2477.html target=\"_blank\" rel=\"noopener\">Guide to cPanel Style Development<\/a> for more examples and detailed instructions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/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":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Update Your Style for Version 54 | cPanel<\/title>\n
<!-- Mirrored from cpanel.net/wp-json/wp/v2/posts/35882/ by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 06 Sep 2024 10:03:04 GMT -->
<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-2478.html \/>\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 [&hellip;]\" \/>\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 &amp; 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 [&hellip;]","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 &amp; 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}]}}