Customization and Appearance

How to Customize PDFs

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.

Leaf Green

Tangerine Orange

Maya Blue

Carbon Black

Platinum White

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.

Customize the appearance of the PDF exports for your guides with "Custom Guide PDF CSS" field.

How to Customize PDFs

For common PDF CSS customizations, review our Custom CSS for PDF Guides Page.

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.

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.

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.