Appearance Settings

How to Customize PDFs

The "Appearance" settings are found under 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. Under Configuration > Appearance, you have the option to customize the background and text color of your Dozuki site header.

Click on the selected color to open a color picker. Set a color for your header text or background, and click Save to finalize.

For reference, here are a few "themes" to serve as examples.

Leaf Green

Tangerine Orange

Maya Blue

Carbon Black

Platinum White

Branding is important. A logo in your site's header lets visitors know your company.

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.

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.

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 prefer to have the bullet points in each step display on the left rather than the right, you put CSS for this in the "Custom CSS" field.

For common CSS customizations, review our Custom CSS Code 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 can still keep the site theme that you chose for your site. However, there are important differences in page appearance.

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 that you enter here will be inserted at the top of div#container. If you assign an ID or class, add a custom prefix, so it does not 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. Like editing the header HTML, this opens up a text box. If you want to stick with the default footer, 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 it does not conflict with preexisting elements. Click "Save" when you have finished your edits. The HTML you enter will appear above the standard footer.