\n<\/span><\/p>\n
Preparation<\/h1>\n
For this process,\u00a0cPanel Reseller accounts<\/strong>\u00a0will be the starting point. Any information related to Root accounts can be found in\u00a0cPanel Style Documentation<\/a>. Here are a few assumptions of what you\u2019ll need to have:<\/p>\n Like any project, you\u2019ll need to come up with a game plan. Start by figuring out the areas you wish to customize. Customization can range from colors and layout to simple behavior interactions. You\u2019re only limited by your imagination!<\/p>\n Once you have an idea of the changes you\u2019d like to make, take the time to draw it out. This will help you achieve your vision without losing sight of your objectives. Think of it as your goal post.<\/p>\n To increase brand awareness, it\u2019s beneficial to provide your customers with a way to identify and associate your brand with the cPanel dashboard. Here is the first course of action necessary to change the cPanel logo to your custom logo.<\/p>\n When you\u2019re finished, switch and log into the cPanel dashboard [ex: http:\/\/yourdomain.com\/cpanel<\/em>] and you\u2019ll notice your logo and favicon have been updated.<\/p>\n The bulk of customization is done through\u00a0CSS<\/abbr>. The diagram below shows the common elements, in IDs and Classes, that allow you to specify and modify the custom style.<\/p>\n Pro Tip:<\/strong> By now your directory path should look similar to the image you see above.<\/p>\n I encourage you to keep tinkering with\u00a0your CSS style until you\u2019re satisfied. For further information on styling elements, you can read through\u00a0cPanel documentation<\/a>\u00a0on setting up your stylesheet or writing your custom CSS.<\/p>\n Sometimes styling the layout isn\u2019t enough. There might be occasions when additional pieces of information should be included in the dashboard. As of now, there is a total of four available areas where you can include your content. The first two areas are GLOBAL header and footer positions which show up on every page. The GLOBAL positions filename is\u201dglobal_header.HTML.tt<\/em>\u201d and \u201cglobal_footer.HTML.tt<\/em>\u201d. Then the other two are PAGE TEMPLATES header and footer positions which only show up in the named app. The PAGE TEMPLATES positions filename is \u201c_page_header.HTML.tt<\/em>\u201d and \u201c_page_header.HTML.tt<\/em>\u201d. With these content additions, you have the option to include plain text, HTML, CSS, and JS to extend your UI enhancement further.<\/p>\n For this example, we\u2019ll add content on both global and page templates using an FTP account.<\/p>\n To view the filenames on different page templates, visit documentation at\u00a0Customize Content in Paper Lantern<\/a><\/li>\n Go to your cPanel dashboard and refresh your browser. You\u2019ll notice all pages have global content and the FTP accounts page only include specific content for that page. The default cPanel icons are there to help users quickly identify the tools they need, however, they may not complement your custom design or style. Before moving forward, ensure that your custom icons are no bigger than 48x48px, alpha-transparent (no background color) and that they are saved in png format.<\/p>\n (replace ssh login credential with your username\/server name and My_Custom_Theme to your theme name)<\/li>\n<\/ol>\n Go to your cPanel dashboard and force-refresh your browser. You should see your new FTP accounts icon. You can continue to design your icons and upload them all at once. When done, simply follow the steps above. It will generate the images and override the existing Paper Lantern icons.<\/p>\n The last step is to set your default style to your custom design. Simply go to There you have it, folks! You now have the skills and knowledge to rebrand the cPanel dashboard your way. The possibilities are endless. Take control of your brand. There\u2019s nothing but pure joy when it comes to creating your own identity and setting yourself apart from others.<\/p>\n Share your design in the comment section or on our forums<\/a>. Below\u00a0are a few examples of what you could do with your new branding skills and cPanel.<\/p>\n \u00a0<\/small><\/p>\n When creating your design style, it inherits all of the functionality and styling of Paper Lantern. This means Paper Lantern is your master template. Because Paper Lantern is constantly evolving and the code is frequently updated, your custom designs could potentially be affected. Visit our release site<\/a>\u00a0or\u00a0subscribe to our mailing list<\/a>\u00a0so you can be notified of any changes that may affect your masterpiece.<\/em><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","manualknowledgebasecat":[457],"manual_kb_tag":[521],"_links":{"self":[{"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/manual_kb\/3315"}],"collection":[{"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/comments?post=3315"}],"version-history":[{"count":2,"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/manual_kb\/3315\/revisions"}],"predecessor-version":[{"id":3332,"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/manual_kb\/3315\/revisions\/3332"}],"wp:attachment":[{"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/media?parent=3315"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/manualknowledgebasecat?post=3315"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/support.aklwebhost.com\/wp-json\/wp\/v2\/manual_kb_tag?post=3315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Game Plan<\/h3>\n
Brand customization<\/h1>\n
![\"WHM](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/brand-whm-66.png\")
<\/a><\/figure>\n\n
cPanel > Customization<\/code><\/li>\n![\"cPanel](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/brand-result.png\")
<\/a><\/figure>\nTheme<\/h3>\n
\nYou can use your mouse and right-click on any area in your Chrome or Firefox browser and select inspect element<\/a> within the cPanel dashboard to identify existing IDs and Classes with the style code. Inspecting elements and the steps below will show how each design can be overridden to your custom style<\/em>.<\/p>\n![\"cPanel's](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/css-elements.png\")
<\/a><\/figure>\n\n
Home > Files<\/code>\u00a0and select\u00a0File Manager<\/em><\/li>\nvar\/cpanel\/reseller\/styled<\/code>\u00a0if it doesn\u2019t exist<\/li>\n.navbar-preferences {background-color: blue;}<\/code><\/pre>\n<\/li>\n![\"File](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/file-manager-directory1.png\")
<\/a><\/figure>\nContent<\/h3>\n
![\"Customize](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/content-elements.png\")
<\/a><\/figure>\n![\"Content](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/content-templates.png\")
<\/a><\/figure>\n\n
var\/cpanel\/reseller\/<\/code><\/li>\n\n
global_header.html.tt<\/code><\/li>\nglobal_footer.html.tt<\/code><\/li>\nftp_page_header.html.tt<\/code><\/li>\nftp_page_footer.html.tt<\/code><\/li>\n<\/ul>\n\n
<div style=\"background-color: #82b74c; color: #fff; font-weight: bold; padding: 15px; text-align: center;\">Global Header Area<\/div> <\/code><\/pre>\n<\/li>\n<div style=\"background-color: #82b74c; color: #fff; font-weight: bold; padding: 15px; text-align: center;\">Global Footer Area<\/div> <\/code><\/pre>\n<\/li>\n<div style=\"background-color: #82b74c; color: #fff; font-weight: bold; padding: 15px; text-align: center;\">FTP Header Area<\/div> <\/code><\/pre>\n<\/li>\n<div style=\"background-color: #82b74c; color: #fff; font-weight: bold; padding: 15px; text-align: center;\">FTP Footer Area<\/div> <\/code><\/pre>\n<\/li>\n<\/ul>\n<\/li>\n
\n![\"cPanel](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/content-results1.png\")
<\/a><\/p>\nIcon<\/h3>\n
![\"Customize](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/change-ftp-icons.png\"){kind=icon}
<\/a><\/figure>\n\n
\n
var\/cpanel\/reseller\/styled\/My_Custom_Theme\/<\/code>\u00a0and create a folder name\u00a0icons<\/em><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n![\"](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/icon-directory1.png\"){kind=icon}
<\/a><\/figure>\n\n
\n
ssh reseller@server.example.net<\/code><\/pre>\n<\/li>\npassword: <enter your password><\/code><\/pre>\n<\/li>\n\/usr\/local\/cpanel\/bin\/sprite_generator \u2013 theme paper_lantern \u2013 style My_Custom_Theme<\/code><\/pre>\n<\/li>\n<\/ul>\n
\n![\"cPanel](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/icon-results.png\"){kind=icon}
<\/a><\/p>\nSet your style to default<\/h3>\n
User Preferences > Change Style > Set as Default<\/code> one of your custom designs. Once enabled, the new and existing hosting account will automatically see your new custom branded dashboard.<\/p>\n![\"Set](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/set-style.png\")
<\/a><\/figure>\nBuild it and be known<\/h1>\n
![\"cPanel](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/cPanel-UI-Screenshots-1.jpg\")
<\/a><\/div>\n![\"cPanel](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/cPanel-UI-Screenshots-2.jpg\")
<\/a><\/div>\n![](\"https:\/\/support.aklwebhost.com\/wp-content\/uploads\/2022\/06\/cPanel-UI-Screenshots-3.jpg\")
<\/a><\/div>\n<\/div>\nPaper Lantern Caveat<\/em><\/h3>\n