Scalar 2 User's Guide

Customizing look and feel with CSS

Scalar allows you to customize the look and feel of your book with the Custom CSS fields available in the Styling tabs of the page editor and the Dashboard. When you customize the CSS for a page, the changes are applied to that page only. If the page is a path, the changes are applied to all pages within the path as well. Custom CSS entered in the Dashboard affects the entire book.

Here are some basic styles you may want to customize (shown with their default Scalar settings):
Heading font.heading_font { font-family: 'Lato', Arial, sans-serif !important; }
Body font.body_font { font-family: Georgia, Times, serif !important; }
Caption font.caption_font { font-family: 'Lato', Arial, sans-serif !important; }
Monospace font.monospace_font { font-family: Courier, monospace; }
Page background { background-color: white; }
Page text colorbody { color: #333; }
Colophon (footer) color#colophon { color: #666; }
Linksa { color: #337ab7; }
a:hover { color: #026697; }
Primary navigation buttonsa.nav_btn.primary { background-color: #026697; color: white; }
Secondary navigation buttonsa.nav_btn { background-color: #ddd; color: #444; }
a.nav_btn:hover { background-color: black; color: white; }

To customize other styles, use your browser's Inspector on specific page elements to identify the CSS rules applied to them, experiment with alternate values, and then paste your alternate definitions of those rules into a Custom CSS field to try them out. It may be helpful to have the both CSS field and a sample page open in separate windows while you hone in on the styles you want.

In some cases you may need to use !important (see above) to force your custom styles to override the defaults.

This page has paths: