Twenty files are included with the sample code:

• Sixteen images -- .gif, .png, .map, .jpg
• Three HTML files -- header, footer, index
• One CSS sheet -- local.css

While twenty files seems like a lot to edit, we're really only editing 4 files, the HTML and CSS. The other files are simply uploaded or create (.map) based on what images are uploaded. First, let's take a look at how easy it is to upload some new images to use. We'll look at editing the header and footer images of the interface. To do this in cPanel, log in with a Reseller account and go to Branding Editor Then select a style to edit and go to Edit Header/Footer.

In the ROOT theme, for example, you'll see this for the Billboard Image:

Simply clicking Browse, adding a file to replace the billboard (top-billboard.png), and clicking Upload Images will replace the Billboard Image with our custom one:

However, that's not going to be enough since the Billboard Image we are using isn't the same size as the stock one and is in a custom location. To ensure it's in the right place, we use the following HTML (in stdmheader.html) to move it out of the top part of the header.

									<div id="bottomheader"> 
										<div id="heading-top-billboard" class="spriteheading_compleximg"></div>
									</div>
								

We also modify the CSS (in local.css) to actually position the image on the page:

									#heading-top-billboard{
										margin-left: 250px;
									}
									#bottomheader{
										width:100%;
										background-color:#030E06;
										height:130px;
										margin-top:4px;
										padding-top:2px;
									}
								

You should note that just that code alone won't make all the changes we need. Comparing stdmheader.html from the brandpackage.zip file along with stdmheader.html in a package you download or from /usr/local/cpanel/base/frontend/x3/branding/ will give you the true idea of what's changed.

There's a lot more CSS and HTML in the branding package zip and we're not going to go over every change in this documentation. However, every change was made through the Branding Editor by either uploading an Image or editing CSS or editing HTML pages. The only thing done outside of cPanel was editing the images to get them to the sizes that I wanted as they aren't the exact same images used on the site.