Add External Stylesheets/Script to Your Website

Add External Stylesheets/Script to Your Website

Our advanced developer tools allow you to place external stylesheets or scripts on your site, either before or after the existing custom file. See steps below for specific direction on adding stylesheets or scripts into the  or  portion of your site structure.


Adding an External Stylesheet

1. Select the Developer Tools icon in your Dashboard navigation bar. You will be taken to the CSS panel by default:

Screen_Shot_2017-12-06_at_10.52.59_AM.png

2. Scroll to the bottom of the page and you will see an area for External stylesheets.

3. Select the green Add URL button and a panel to input your external stylesheet URL will appear. If you would like, you may paste in any link tag, so you could paste this in the first field (as an example):

type="text/css" href="https://yourexternalhosthere.com/style.css" id="stylesheet">

Important: Make sure that "https://" is specified at the beginning of your external URL, or your stylesheet will not save properly.

Screen_Shot_2017-12-06_at_11.04.45_AM.png

Optional: Open the Advanced panel if you need to add customized attributes for your stylesheet.

The fields will automatically parse out the correct attributes for your stylesheet. If you open the Advanced area, you may see "Id" or "Subresource Integrity" has been filled in after the paste action. All of the fields can be filled manually, as well.

4. Once all the fields appear have been filled-out as you need, select the blue Save button.

5. Select the green Publish button to make your change live on the site.


Adding an External Script

1. Select the Developer Tools icon in your Dashboard navigation bar.

2. You will be taken to the CSS panel by default, so select the Head JS or Body JS, depending on where you need to place your external script.

Screen_Shot_2017-12-06_at_11.07.36_AM.png

3. Scroll to the bottom of the page and you will see an area for External scripts.

4. Select the green Add URL button and a panel to input your external script URL will appear. If you would like, you may paste in any script tag, for example, you could paste into the first field:

Important: Make sure that "https://" is specified at the beginning of your external URL, or your script will not save properly.

Screen_Shot_2017-12-06_at_11.04.45_AM.png

Optional: Open the Advanced panel if you need to add customized attributes for your script.

The fields will automatically parse out the correct attributes for your script embed. If you open the Advanced area, you may see "Id" or "Subresource Integrity" has been filled in after the paste action. All of the fields can be filled manually, as well.

An area for Data Attributes is also available to you. Select the green Add Data Attributes button to add custom Data attributes.

5. Once all the fields appear have been filled-out as you need, select the blue Save button.

6. Select the green Publish button to make your change live on the site.

    • Related Articles

    • 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; ...

    • Add a Shopify Button

      You can add a Shopify buy button to your website by using an HTML block. You can set this up by following the instructions below. 1. Login to your Shopify admin area, then select Buy Button. 2. Click Select product. 3. Select a product from your ...

    • Add a Pop-up to Your Website

      You can add a pop-up to your website by using Jotform, a third-party form builder software. When creating a form on Jotform's platform, you are not required to add any form fields; you can simply add text or images in a pop-up window to announce ...

    • Website SEO Best Practices

      Search Engine Optimization (SEO) is the process of optimizing your website content to help maximize its performance in search engines and reach more users. Search engines like Google have developed highly complex algorithms that determine whether ...

    • Can I gain access to a website site using FTP?

      While we allow you to fully manage and design your site, it is not possible to access a liveBooks website site using FTP (File Transfer Protocol). This is due to your website and platform being proprietary to our server, as all content and images are ...