This page is referenced by:

• 1 2021-03-18T02:37:44-07:00 Using CSS 16 How to use CSS to customize the appearance of your book plain 2021-03-21T08:14:07-07:00 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.
• 1 2021-03-18T02:38:16-07:00 Using JavaScript 6 How to use JavaScript to customize your book plain 2021-03-20T20:51:26-07:00 JavaScript can be used to add certain features or elements that are usually hidden on a page or not displayed, among other things.

  Page-Specific JavaScript

  1. To add JavaScript customization to a page, click the pencil icon to open the editor, go to the Styling tab in the editor page, and select the JavaScript option. This should refresh the page with a JavaScript code field
  2. Type or paste any JavaScript code into the field.
  3. Click one of the "Save" buttons at the bottom.
     

  JavaScript for the Entire Book

  To add JavaScript that will apply to the entire book, go to the dashboard, click on the Styling tab, and scroll down to the JavaScript code input field. Follow steps 2-3 from the Page-Specific JavaScript tutorial above.
  

  Adding bylines

  If you want to insert an individual byline for a particular page, you can use the code snippet provided by the Scalar 2 User's Guide:
   $(document).ready(function() { var author = $('header span[resource="'+location.protocol+'//'+location.host+location.pathname+'"]').next().find('[property="foaf:name"]').text(); $('h1:first').append(' by '+author+''); });
  Below you can see where the byline should appear. The name displayed will be that of the user who added the page to the book.If the person who created the content of the page is different from the person who added the page, you can use the following code-snippet instead:
  $(document).ready(function() { $('h1:first').append(' by FirstName LastName'); });
  Substitute the person's name where it says "FirstName LastName."
  For more information about using JavaScript, consult the Advanced Topics chapter of the Scalar 2 User's Guide.