Header and Footer Styling

Headers appear at the top of your site's pages. They contain the site's name/logo, search bar, and User Menu. Footers are the set of links that are way down at the bottom of each site page.

While our standard headers and footers are great, some Dozuki plans allow you to customize them. Customization gives you control over the appearance and content of your headers and footers.

If you decide to customize your headers and footers, you'll still be able to keep the theme you chose for your site. There are some key differences in page appearance, however. A standard header contains a search bar, links to Guides, Answers, and Contribute (if your site has public editing enabled), as well as your User Menu. When a customized header takes their place, those links automatically migrate into the body of the page.

At this time, you cannot upload a logo into a customized header.

Customization is technically advanced stuff. To do it right, you'll have to be knowledgable about both CSS and HTML. We suggest that you let an expert, like your web designer, customize the header and footer. Remember: you can always use the standard headers and footers if there's no expert at hand.

To customize your site, click on the "Appearance" tab of your Management Console. From there, you can customize the Header CSS, Header HTML, and the Footer HTML one at a time.

Control the look and feel of the header and footer of your site with your CSS. To edit your CSS, click "Edit" at the right of the "Custom Header / Footer CSS" field under the "Appearance" tab of your Management Console.

You can design your own CSS or follow the format of the sample CSS below. Just insert your own data into the relevant fields:

#testHeader {
    background: #f5f5f5 url('http://i.imgur.com/bT2gl.png') left top;
    height: 115px;
    font-family: Arial, Helvetica, sans-serif;
    width: 981px;
    margin: 0 auto 18px;
    overflow: hidden;
}

#testHeader a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
}

#testFooter {
    font-family: Arial, Helvetica, sans-serif;
    width: 981px;
    margin: 0 auto 8px;
    text-shadow: 0 1px 0px #fff;
}

.testLogo {
    width: 318px;
    height: 41px;
    float: left;
    background: url('http://i.imgur.com/JvcIa.png') no-repeat left top;
    text-indent: -8888px;
    position: relative;
    top: 34px;
    left: 30px;
}

ul.testNavigation {
    overflow: auto;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul.testNavigation li {
    margin: 0px 15px;
    display: inline;
}

#testHeader ul.testNavigation {
    float: right;
    line-height: 115px;
    margin-right: 24px;
}

#testFooter ul.testNavigation {
    text-align: center;
    font-weight: bold;            
}​

You won't be able to see your customizations from the Management Console as you edit, but they will show up immediately elsewhere on your site. Remember to hit "Save" to commit your changes.

Here are a couple of things to keep in mind:

• Minimize the scope of your changes by only using class and id selectors for elements you add (e.g. #mySiteHeader img, p.mySite, and so on).
• Add a custom prefix to elements you create so that they don't conflict with preexisting elements.
• Do not copy your entire site's CSS; only copy and paste the part that is relative to your header and footer.
• Your CSS may conflict with our existing class names. We do not support overriding existing styles, and we reserve the right to change our CSS class names and element IDs without prior notice.

Click "Edit" at the right of "Custom Header HTML" field under the "Appearance" tab of your [link:/manage|Management Console] to customize your header. This will open up a text box. The HTML you enter here will be inserted at the top of div#container. If you assign an id or class, add a custom prefix so that it doesn't conflict with preexisting elements. Click "Save" when you are finished.

Customize your footer by clicking on "Edit" to the right of "Custom Footer HTML" under the "Appearance" tab of your Management Console. As before, this opens up a text box. If you'd like to stick with the default footer, just leave the text box blank. To change the footer, enter your HTML into the text box. If you assign an id or class, add a custom prefix so that it doesn't conflict with preexisting elements. "Save" when you have finished your edits. The HTML you enter will appear just above the standard footer. Here's an example:

Go back to the Help Index