How to Add Custom CSS
All How-To Guides ¶
Appearance Settings ¶
The "Appearance" settings are found under site Configuration in the Management Console. This page contains options for customizing the appearance of your site.
Tailor the look and feel of your site to best match your content. You have five different standard "themes" to choose from. Each theme changes background color, text color, button color, and more.
Change the theme of your site by clicking "Edit", selecting a theme from the drop-down menu, and clicking "Save".
Branding is important. A logo in your site's header lets visitors know who you are.
To upload your logo, click "Edit" under the "Logo" field. Upload your photo using the Media Manager, then click on the image to add it to your site. Your logo will be automatically resized to fit into the header.
Here's a few tips for better logo integration:
- Logos are resized to fit in a 300x36 pixel box. This means that wide, rectangular images fit best into the header. If your logo image is too tall, it may not look accurate once it is resized to fit in the header.
- For help resizing your logo, try using a an online image resizing software like this one.
- A logo should have a transparent background. If your logo has a colored background it will appear in the header and may not match your chosen theme color.
- The best file format for a logo is PNG because it supports alpha-blending and ensures a quality image. The JPG format does not support transparency, and GIF transparency is too jagged and pixelated.
- Certain logos look better with certain themes. If your logo is light, use a brightly-colored theme to make it stand out. If your logo has dark colors, use Platinum White for better contrast.
The following settings allow you to further customize your site the extent you see fit, beyond the out-of-the-box options Dozuki provides for you.
Custom Guide PDF CSS ¶
Customize the appearance of the PDF exports for your guides with "Custom Guide PDF CSS" field.
For common PDF CSS customizations, review our Custom CSS for PDF Guides Page.
Custom Site CSS ¶
Further customize your site by using the "Custom CSS" field. In this field you can add CSS code to change any number of display and appearance elements of your Dozuki site. For example, if you would rather have the bullet points in each step display on the left rather than the right, you would put CSS for this in the "Custom CSS" field.
For common CSS customizations, review our Custom CSS Code Page:
Custom Header & Footer ¶
Headers appear at the top of your site's pages. They contain the site's name/logo, search bar, and User Menu. Footers are at the bottom of the page and contain links.
If you decide to customize your headers, you'll still be able to keep the site 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 the corresponding features enabled), as well as your User Menu. When a customized header takes their place, those links automatically migrate into the body of the page.
|Customization of your site's header is technically advanced. To do it right, you should have experience with and be knowledgable about both CSS and HTML code. 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.|
Header HTML ¶
Click "Edit" at the right of "Custom Header HTML" field under the "Appearance" section of your 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.
Footer HTML ¶
Customize your footer by clicking on "Edit" to the right of "Custom Footer HTML" under the "Appearance" section of your Management Console. Just like editing the header HTML, 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. Click "Save" when you have finished your edits. The HTML you enter will appear just above the standard footer.