{"id":57949,"date":"2020-10-27T14:26:07","date_gmt":"2020-10-27T19:26:07","guid":{"rendered":"https:\/\/blog.cpanel.com\/?p=57949"},"modified":"2020-10-27T14:26:07","modified_gmt":"2020-10-27T19:26:07","slug":"branding-cpanel-reseller-hosting-a-guide-for-reseller-hosts","status":"publish","type":"post","link":"https:\/\/devel.www.cpanel.net\/blog\/tips-and-tricks\/branding-cpanel-reseller-hosting-a-guide-for-reseller-hosts\/","title":{"rendered":"Branding cPanel Reseller Hosting: A Guide for Reseller Hosts"},"content":{"rendered":"\n
Does your reseller hosting business have a brand identity that sets it apart from the competition? In a ferociously competitive hosting industry, a custom brand can help your hosting services to stand out from the crowd, which is why cPanel & WHM\u00ae<\/sup> makes it straightforward to customize the cPanel\u00ae<\/sup> interface and establish a unique visual identity.<\/p>\n\n\n\n cPanel & WHM provides features for administering web hosting servers (WHM) and managing web hosting accounts (cPanel), but we also support a third type of account: reseller hosting. Unlike standard cPanel accounts, resellers can access some WHM features, and they can create and manage cPanel accounts for other users.<\/p>\n\n\n\n Reseller accounts are great for people who want to provide web hosting services but don\u2019t want or need a full server\u2019s resources. With cPanel reseller hosting, the reseller rents server space from a hosting provider, then parcels it out to clients, each of whom has a cPanel account which can be customized by the reseller.<\/p>\n\n\n\n cPanel & WHM provides two user interface customization options to resellers :<\/p>\n\n\n\n In this article, we\u2019ll use both to build a unique brand for cPanel reseller hosting with custom colors, content, and icons.<\/p>\n\n\n\n Before we get started, you\u2019ll need the following:<\/p>\n\n\n\n With that in place, let\u2019s begin!<\/p>\n\n\n\n WHM\u2019s Customization<\/em> feature allows resellers to modify key aspects of the interface. This is where you choose a company name, logo, and other branded interface elements.<\/p>\n\n\n\n Log in to WHM with your reseller account and navigate to Customization,<\/em> which you will find under cPanel<\/em> in the sidebar menu.<\/p>\n\n\n\n On this page, you can:<\/p>\n\n\n\n You can also set links to your company\u2019s help and documentation pages, which, by default, appear in the footer of cPanel pages.<\/p>\n\n\n\n Under each field in the form is information about the type of asset you should provide. For example, your logo should be approximately 250 px wide and 50 px high to fit cPanel\u2019s layout. Ignoring this guidance can have an undesirable impact on the interface.<\/p>\n\n\n\n Once you have added your brand\u2019s assets, open cPanel to see your newly-branded web hosting interface.<\/p>\n\n\n\n As you can see, we\u2019ve added a new logo and a matching favicon. Customization<\/em> is often all resellers need to brand client cPanel accounts, but it\u2019s possible to change almost every design element. In the next section, we\u2019ll show you how to create a theme and make it the default.<\/p>\n\n\n\n cPanel includes a default theme called Paper Lantern. We\u2019re going to create a theme that overrides aspects of Paper Lantern with reseller branding. You could make a new theme from scratch, but overriding an existing one is more accessible to people who aren\u2019t developers.<\/p>\n\n\n\n We\u2019ll be working in the File Manager<\/em>, so log in to cPanel with your reseller account and open File Manager<\/em>.<\/p>\n\n\n\n First, we need to create a directory to contain our theme. Custom themes are stored in the var\/cpanel\/reseller\/styled<\/em> directory. If the styled<\/em> subdirectory doesn\u2019t exist, create it with the +Folder<\/em> button.<\/p>\n\n\n\n Inside the styled<\/em> directory, make a new directory and give it an appropriate name for your theme. Don\u2019t use spaces in the filename. Use underscores instead, and cPanel will convert them to spaces in the interface.<\/p>\n\n\n\n Use the +File<\/em> button to create a file inside your theme directory called styles.css<\/em>. Be sure to use that filename, or your theme won\u2019t work.<\/p>\n\n\n\n Open styles.css<\/em> with the Edit<\/em> button in the toolbar. We\u2019re going to add CSS directives to override the defaults. Add the following CSS to your styles.css<\/em> file and click Save<\/em> in the toolbar.<\/p>\n\n\n\n This code:<\/p>\n\n\n\n We don\u2019t have the space to go into too many details about CSS here, but you can find lots of information at the Mozilla Developer Network<\/a>.<\/p>\n\n\n\n In the cPanel User<\/em> dropdown menu, select Change Style,<\/em> and click Apply<\/em> on the theme you have just created.<\/p>\n\n\n\n Now that you are running your new theme, the navigation bar will change to the color you selected in CSS, in our case, a light blue.<\/p>\n\n\n\n You can change the color of most interface elements in this way, but there\u2019s one problem. How do you know which CSS selector to use? We\u2019ll explain how to find out with another example.<\/p>\n\n\n\n We had a light blue navigation bar in the last image, but the menu section headers were a different color. Ideally, we want them to match, so we have to apply the same CSS transformation.<\/p>\n\n\n\n Fortunately, web browsers make it quite easy to find the right CSS selector. We\u2019ll show you how it\u2019s done in Google\u00ae Chrome™ , but other browsers support a similar method.<\/p>\n\n\n\n Open cPanel and right-click on the element you would like to modify. Select Inspect<\/em> from the menu.<\/p>\n\n\n\n The browser opens its web inspector with the code for the element you selected highlighted. To the right is a list of the CSS directives that influence that element. Find the one that controls the property you would like to change.<\/p>\n\n\n\n In this case, the selector is .widget-heading, so we can add the following CSS to our styles.css<\/em> file.<\/p>\n\n\n\n Save the file and refresh cPanel. The navigation bar and menu items now match.<\/p>\n\n\n\n Finding the right CSS selector isn\u2019t always so straightforward, but once you are familiar with the web inspector, you will quickly identify theme elements and write CSS to change them.<\/p>\n\n\n\n In addition to modifying a reseller hosting accounts\u2019 appearance, you can also insert or change text on cPanel pages. The page content is controlled by templates, and there are several that influence the content in the main page area.<\/p>\n\n\n\n Header templates control content at the top of pages and footer templates at the bottom. Other cPanel features and interface elements have similar templates, which are described in Guide to cPanel Interface Customization – UI Includes<\/a>.<\/p>\n\n\n\n To add content to cPanel pages, we create the template files in the \u200cvar\/cpanel\/reseller\/includes\/<\/em> directory inside the reseller\u2019s hosting account. The includes<\/em> directory does not exist by default, so you may need to create it.<\/p>\n\n\n\n Let\u2019s add a welcome note to the top of cPanel pages. Follow the same File Manager<\/em> process outlined in the previous section to create a file called global_header.html.tt<\/em> in \u200cvar\/cpanel\/reseller\/includes\/<\/em>.<\/p>\n\n\n\n Open \u200cglobal_header.html.tt<\/em> in the File Manager<\/em> text editor, enter the following and click save.<\/p>\n\n\n\n Refresh cPanel, and the new header message will be displayed at the top of every page.<\/p>\n\n\n\n In this way, you can add HTML, CSS, and JavaScript to any of cPanel\u2019s reseller templates.<\/p>\n\n\n\n Our icons are designed to help users understand what cPanel\u2019s tools do, but you can change them if they don\u2019t work with your custom theme. We\u2019ll replace the File Manager<\/em> icon with a flat design that matches our custom logo.<\/p>\n\n\n\n You will need an image file that:<\/p>\n\n\n\n Icons must be named for the feature they are associated with. In cPanel, features have an app_key,<\/em> which is used in templates, icons, and other associated assets. You can find the app_key<\/em> for icons in Guide to cPanel Interface Customization – Appkeys<\/a>.<\/p>\n\n\n\n The app_key for File Manager<\/em> is file_manager<\/em>, so we\u2019ll name our icon file_manager.png<\/em>. Icons are stored in an icons<\/em> directory within a custom theme. Navigate to your custom theme in File Manager<\/em> and create a folder called icons<\/em>.<\/p>\n\n\n\n Move into the new directory and use the File Manager\u2019s<\/em> Upload<\/em> button to upload your icon image.<\/p>\n\n\n\n Finally, we need to generate the image sprite that cPanel uses to serve icons efficiently. Log in to the reseller account with SSH<\/a> or open cPanel\u2019s Terminal<\/em> interface.<\/p>\n\n\n\n Run the following command, replacing \u201cReseller_Hosting_Theme\u201d with the name you chose for your theme.<\/p>\n\n\n\n Refresh cPanel, and your new icon will be displayed on the main page.<\/p>\n\n\n\n The final step is to make the custom theme the default so that when resellers create a cPanel account, it has custom branding. However, before we do that, let\u2019s create a preview image for the Change Style<\/em> interface.<\/p>\n\n\n\n Take a 500×500 pixel screenshot of your new-look cPanel. Save the file as preview.png<\/em> and use File Manager<\/em> to upload it to the theme\u2019s folder.<\/p>\n\n\n\n Select Change Style<\/em> from the navigation bar\u2019s user menu, and you will see the custom theme displayed with its new preview. While you\u2019re here, click the Set as Default<\/em> button to make it the default for new cPanel accounts.<\/p>\n\n\n\n In this article, we\u2019ve shown you how to transform your web hosting interface into a custom branded UI with unique colors, content, and icons. cPanel & WHM\u2019s flexible theming system gives hosts the tools they need to build a vibrant and impactful branded reseller hosting experience with a coherent and memorable visual identity.<\/p>\n\n\n\n As always, if you have any feedback or comments, please let us know. We are here to help in the best ways we can. You\u2019ll find us on Discord<\/a>, the cPanel forums<\/a>, and Reddit<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Does your reseller hosting business have a brand identity that sets it apart from the competition? In a ferociously competitive hosting industry, a custom brand can help your hosting services to stand out from the crowd, which is why cPanel & WHM\u00ae makes it straightforward to customize the cPanel\u00ae interface and establish a unique visual […]<\/p>\n","protected":false},"author":77,"featured_media":65557,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[61],"tags":[],"class_list":["post-57949","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks"],"acf":[],"yoast_head":"\nWhat is Reseller Branding in cPanel?<\/strong><\/h2>\n\n\n\n
What You Need to Brand Your cPanel Reseller Hosting Interface<\/strong><\/h2>\n\n\n\n
Reseller Brand Customization in WHM<\/strong><\/h2>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
cPanel Reseller Hosting with a Custom Branded Theme<\/strong><\/h2>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
.navbar-header {background-color: #3f7cac;}<\/code><\/pre>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
Finding CSS Selectors for cPanel Reseller Themes<\/strong><\/h3>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
.widget-heading { background-color: #3f7cac;}<\/code><\/pre>\n\n\n\n
<\/figure>\n\n\n\n
Customizing Reseller Theme Content in cPanel<\/strong><\/h2>\n\n\n\n
<div style=\"background-color: #553555; color: #fff; font-weight: bold; padding: 15px; text-align: center;\">Welcome to your cPanel account.<\/div><\/code><\/pre>\n\n\n\n
<\/figure>\n\n\n\n
Customizing cPanel Reseller Icons<\/strong><\/h2>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
\/usr\/local\/cpanel\/bin\/sprite_generator --theme paper_lantern --style Reseller_Hosting_Theme<\/code><\/pre>\n\n\n\n
<\/figure>\n\n\n\n
Make Your Reseller Hosting Theme the Default<\/strong><\/h2>\n\n\n\n
<\/figure>\n\n\n\n