How to Use Scalar: Digital Publishing for Libraries, Archives, and Museums Main Menu About This Project About the creators and purpose of this project What Is Scalar? A brief introduction to what Scalar can do as a platform. Scalar in Libraries, Archives, and Museums Why Scalar is a relevant tool for librarians and other information professionals to learn. How to Use Scalar Step-by-step instructions for creating your first Scalar book. More Resources Annotated list of resources with more information on using Sclar

Using CSS

38779
If you want to change the appearance of your book from the default settings, you can use the custom CSS functionality to override the defaults.
The CSS can be customized so that the changes are reflected across the entire book, or you can customize the appearance of a particular page.

Customizing the Book

  1. To customize the CSS for the entire book, go to the dashboard by clicking the wrench icon.
  2. When the dashboard loads there should be a tab labeled Styling. Click on that tab.
  3. Under the Styling tab there should be a section labeled custom CSS. You can type any CSS code directly into the input field without enclosing it in HTML <style> tags.
  4. You can also insert predefined CSS provided by Scalar by using the dropdown menu below the main CSS code field. Select the desired option and click the “Insert” button.
  5. The code should appear in the Custom CSS code field. Make sure to save your CSS using the “Save” buttons at the bottom of the page.
The screenshot below shows the effects of applying the “Show path contents in side bar” predefined CSS whose code is shown in the previous step.

Customizing a Page or Element

  1. To customize the CSS for a particular page or element, open the editor for the page and click on the Styling tab underneath the text editor field. Locate CSS on the dropdown menu and click on it.
  2. The area under the tabs should refresh to show a CSS input field. As with the CSS input field for the entire book, the CS input field here can also be used without making use of the HTML <style> tags.
  3. You can also insert predefined CSS using the dropdown menu. Select the desired option and click “Insert.”
  4. The code should appear in the Custom CSS code field. Make sure to save your CSS using the “Save” buttons at the bottom of the page.
The carousel below shows screenshots of the index page before and after the custom CSS is applied.

For more tips, check out the Scalar 2 user guide for how to alter the CSS. For those who are familiar with HTML and CSS, further experimenting is encouraged. CSS changes applied to pages that are paths will also apply to the other pages on the same path. Be sure to use the correct selectors for page-specific elements to avoid unwanted aesthetic changes in other parts of the book.

This page has paths:

  1. Using HTML/CSS/JavaScript Shenwei Chang

This page references: