For example: a Google Header (The HTML)


Our sample skin – before applying custom HTML:



Our sample skin – after applying custom HTML:




If you want to create a custom header, then you will add the following code to the Custom HTML box and then save it.The following are 4 elements in the custom code:


  1. “display:none” creates an image element of a Google logo. It is hidden, so it won’t display directly – we will explain further.
  2. "gooFullTop" is positioned behind the menu to give the illusion that the menu is actually the full width of the page.
  3. "gooFullPageBanner" is positioned behind the logo and will be a greyish color. This creates a feeling that the top section of the page is a header, separate from the rest of the page.
  4. A JavaScript section that will run some jQuery (show the Google logo), then he document has finished loading all the elements.


<img id="gooLogo" style="display:none"
src="https://manager.dapresy.com/manager/App_Themes/userTemplates/Google/google_lo
go.png" />

<div id="gooFullTop"></div>

<div id="gooFullPageBanner"></div>
<script type="text/javascript">
        $(document).ready(function() {
             $('#gooLogo').show();
        });
</script>


Image Resources


Now that you have added the necessary HTML, you also need to apply styles to make it look how you want. First, you need to add the new elements we created above (#gooLogo, #gooFullTop and #gooFullPageBanner).


You’ll also want to add some additional options, like moving the new elements below the logo, and moving the "generate"-links above the tabs to the right of the logo. You can do this by simply adding the code below to the existing code you have in the Custom CSS box, and then saving it. 


Make sure to always preview your project to ensure it looks correct. If successful, it should look like the image “Our sample skin – after applying custom HTML”. If it does not, then make sure that you have copied and pasted the exact code into the correct boxes. 


Each code below provides a description (in grey) of what the code will do.


/* CSS Comment: Position the Google Logo at the top-left of the document. */
 #gooLogo {
 display: none;
 margin-left: -480px;
 left: 50%;
 position: absolute;
 top: 8px;
 }

/* CSS Comment: Create an effect that the menu is 100% of the page width. */
 #gooFullPageBanner {
 background-color: #2d2d2d;
 height: 18px;
 left: 0;
 position: absolute;
 top: 78px !important;
 width: 100%;
 z-index: 0;
 }

/* CSS Comment: Color the area above the menu and place behind (z-index:-1) the
logo that is greyish. */
 #gooFullTop {
 background-color: #f6f6f6;
 height: 60px;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
 z-index: -1;
 }

/* CSS Comment: Position the menu to make room for the logo. */
 HTML #reportNav {
 top: 60px;
 width: auto;
 }

/* CSS Comment: Increase the padding on the main menu items for usability. */
 HTML #reportNav UL A {
 padding-left: 10px;
 padding-right: 10px;
 }

/* CSS Comment: Move the "distribute", "update" links close to the top above the
menu. */
 HTML #siteNav {
 top: 10px;
 }

/* CSS Comment: Style the distribute-link, smaller font and remove bold. */
 HTML #siteNav A:link,
 HTML #siteNav A:visited {
 font-size: 10px;
 font-weight: normal;
 }

/* CSS Comment: Align the preview-link to the rest of the top-right links.*/
 HTML #ctl00_pnlPreviewLinks,
 HTML #pnlPreviewLinks {
 float: left;
 }

/* CSS Comment: Change the background color to a less darker color and add equally
dark borders. */
 HTML #navigation {
 background-color: #2d2d2d;
 border-left: 1px solid #2d2d2d;
 border-right: 1px solid #2d2d2d;
 }

/* CSS Comment: Remove any background images, boldness or text transformation
that is applied to the tabs. */
 HTML #nav A {
 background-image: none;
 font-weight: normal;
 text-transform: none;
 }

/* CSS Comment: Optimizing the navigation for the new logo by adding left padding
so it doesn't overlaps with the navigation links */
 #reportNav {
 padding-left: 100px;
 }

/* CSS Comment: Adding background color to white on the navigation and setting
border size to 0 pixels */
 HTML #navigation {
 background-color: #fff;
 border: 0;
 }

/* CSS Comment: Hiding the existing Dapresy logo. */
 img#logo {
 visibility: hidden;
 }

/* CSS Comment: For administrators only, hide the skin picker. */
 #ctl00_ddlTheme,
 #ddlTheme {
 display: none;
 }