Access to Developer Tools - CSS, Head & Body JS
Note: The Developer Tools dashboard is only available to the Professional plan or higher. Learn more about liveBooks' subscription plans.
Developer tools allow you to add custom CSS and JS code to your site. The tools are not available by default; you can follow the steps below to gain access. To access the Developer tools, click the [<>] icon at the top of your liveBooks dashboard.
Only Owner and Admin roles can access the Settings panel. If your user account is under the Contributor role, you will need to ask the site Admin to grant you Developer permissions.
In this guide:
- How to get Developer access
- Add CSS
- Access the Header
- Access the Body
- Manage Fonts
- Editor Preferences
How to get Developer access
- Select the Settings icon (the "gear" icon) at the top of your liveBooks dashboard.
- Click on Users & Roles sub-header under Settings.
- Select the Edit button next to the user email you want to grant access to.
- Check the Developer box and click Save.
- Refresh your browser. You should now see an additional Developer icon in your Dashboard navigation bar (the box with arrows next to the gear icon).
Add CSS
The CSS dashboard lets you add custom code to alter the design of your site, beyond what is available in the Design panel. Any custom code added here will override the settings in the Design panel.
Paste the code on the first empty line in the text area, then click Save when finished.
Access the Header
The Head JS dashboard is where you can add third-party scripts. Placing code or scripts here will place it in the Header, or <head> section of your site. Note: If a script or application does not work after placing its code in the Head JS, try placing it in an HTML Block in your website's Footer instead.
Paste the code on the first empty line in the text area, then click Save when finished.
Access the Body
The Body JS dashboard is where you can add third-party scripts. Placing code or scripts here will place it in the Body, or <body> section of your site. Note: If a script or application does not work after placing its code in the Head JS, try placing it in an HTML Block in your website's Footer instead.
Paste the code on the first empty line in the text area, then click Save when finished.
Fonts
Navigate to the Fonts dashboard to include additional Adobe Fonts fonts not specified in the design panel. When using the font in CSS, you must use the specified font family. Use the "star" icon next to each font preview to select fonts that you may want to use later.
Editor Preferences
Navigate to the Preferences dashboard to set the editor preferences. This will change how the editor looks. Changes made here are reflected in the other sections of the Developer tool and custom HTML blocks.