CSS Customization Example

Overview

Here are a few tweaks to Zendesk to make formatting articles easier:

• Optimized printing format
• Heading colors
• Image lightbox and border
• Remove "Empty" message 
• Simple callout boxes
• Default format for tables

Optimized printing format

When printing an article, web nagivation and menus are removed and a title page is added to the beginning. Press Ctrl-P to give it a try.

I also added a "Print This Article" link in the navigation area. Even if we remove the link, the print format will remain optimized.

Heading colors

Headings use the brand color (dark blue) to differentiate from body of article.

Image lightbox and border

Adding default 0.5px border to images. This can be overridden by using an HTML tag. 

Added lightbox functionality. Large images will default to maximum width of 500 pixels, but when the pointer hovers it will expand to 110% of its original size. 

Note: There are a few ways we can go about this. We could make this the default or optional by changing the "font color" of the image, kind of like the callout boxes. That way we can still use full-size images when needed.

Example without border:

Remove "Empty" message 

New CSS will remove the "Empty" link in sections with only subsections.

Note: These images were overridden to always display in full size.

Before:

After:

Simple callout boxes

Using font colors to create callout boxes. The achieve the following effects, just change the paragraph's font color to specific shade of pink in the editor.

This is an example of a full-width callout box: 
Cras ut viverra mauris. Donec purus sem, sollicitudin et arcu id, mattis ultrices velit. Pellentesque vel tempor nisl.

Muted	Bright
Pink 1: Info Box Cras ut viverra mauris. Donec purus sem, sollicitudin et arcu id, mattis ultrices velit. Pellentesque vel tempor nisl.	Pink 1: Info Box Cras ut viverra mauris. Donec purus sem, sollicitudin et arcu id, mattis ultrices velit. Pellentesque vel tempor nisl.
Pink 2: Success Box Cras ut viverra mauris. Donec purus sem, sollicitudin et arcu id, mattis ultrices velit. Pellentesque vel tempor nisl. Praesent eleifend sollicitudin viverra. Vivamus at ligula a arcu ornare efficitur sit amet nec nibh.	Pink 2: Success Box Cras ut viverra mauris. Donec purus sem, sollicitudin et arcu id, mattis ultrices velit. Pellentesque vel tempor nisl. Praesent eleifend sollicitudin viverra. Vivamus at ligula a arcu ornare efficitur sit amet nec nibh.
Pink 3: Warning Box Cras ut viverra mauris. Donec purus sem, sollicitudin et arcu id, mattis ultrices velit. Pellentesque vel tempor nisl.	Pink 3: Warning Box Cras ut viverra mauris. Donec purus sem, sollicitudin et arcu id, mattis ultrices velit. Pellentesque vel tempor nisl.
Pink 4: Danger Box Cras ut viverra mauris. Donec purus sem, sollicitudin et arcu id, mattis ultrices velit. Pellentesque vel tempor nisl. Praesent eleifend sollicitudin viverra. Vivamus at ligula a arcu ornare efficitur sit amet nec nibh.	Pink 4: Danger Box Cras ut viverra mauris. Donec purus sem, sollicitudin et arcu id, mattis ultrices velit. Pellentesque vel tempor nisl. Praesent eleifend sollicitudin viverra. Vivamus at ligula a arcu ornare efficitur sit amet nec nibh.

Default format for tables

Jazzed up default table format with headers, banded rows, and active row highlighting.

Heading A1	Heading B1	Heading C1
Detail A2	Detail B2	Detail C3
Detail A3	Detail B3	Detail C3
Detail A4	Detail B4	Detail C4

Heading A1	Heading B1	Heading C1
Detail A2	Detail B2	Detail C3
Detail A3	Detail B3	Detail C3
Detail A4	Detail B4	Detail C4