Appearance Tab

Appearance ¶ 

The "Appearance" tab is the second tab you encounter in Management Console. This tab contains options for customizing the appearance of your site.

Block Image

Theme ¶ 

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.

Block Image

Change the theme of your site by clicking "Edit", selecting a theme from the drop-down menu, and clicking "Save".

What is a Theme? ¶ 

Themes change the look and feel of your site. You can find the theme setting under the "Appearance" tab of your Management Console.

Click "Edit" to test out our five standard themes: Leaf Green, Tangerine Orange, Maya Blue, Carbon Black, and Platinum White. Every theme changes the background color, the color of the header, the text color, the button colors, and more. Once you've found a theme you like, click "Save".

Here are some examples of each theme in action:

Leaf Green ¶ 
Block Image
Tangerine Orange ¶ 
Block Image
Maya Blue ¶ 
Block Image
Carbon Black ¶ 
Block Image
Platinum White ¶ 
Block Image

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 of your Management Console. Upload your photo using the Media Manager, and then drag the uploaded image to the "Logo" field. 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 won't look good once it is resized to fit in the header.
  • Logo should have a transparent background. If your logo has a colored background it will show up in the header, which usually doesn't look good.
  • The file you upload must be in PNG format. JPG doesn't support transparency, and GIF transparency is too jagged and pixelated. PNG works because it supports alpha-blending; that's what makes logos pretty.
  • 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.
Block Image

Custom Guide PDF CSS ¶ 

Customize the appearance of your PDFs with "Custom Guide PDF CSS" field. To add custom CSS, press "Edit", add the desired CSS, and press "Save".

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

Custom CSS ¶ 

Further customize your site by using the "Custom CSS" field. In this field you can add CSS to change any number of 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.

To add CSS to the "Custom CSS" field, click "Edit", add the desired CSS, and click "Save".

For common CSS customizations, review our Custom CSS Code Page.

Custom Header HTML ¶ 

Your site's header is constantly being viewed by your users, so customize it to best fit your needs. Use the "Custom Header HTML" field to change the appearance of your site's header.

To add custom HTML, click "Edit", add the desired HTML, and click "Save".

To learn more about custom Header HTML, see our page about Header and Footer Styling

Change the appearance of your Dozuki site's footer using the "Custom Footer HTML" field.

To add custom HTML, click "Edit", add the desired HTML, and click "Save".

To learn more about custom Footer HTML, see our page about Header and Footer Styling.


Go back to the Help Index

Was this article helpful to you?

Yes
No

Didn't find the answer you were looking for?

Ask a Question