Black Friday Deal - 50% OFF on all plans

Adding your custom CSS or JS to the site


There are a number of alternative ways to add your own custom CSS or JS code to your LiveCanvas / CustomStrap powered website.

Let’s dive into this and see the different solutions.

Method #1: add it directly into the page HTML itself

First of all, if the CSS / JS code you want to add is

  • rather short and
  • is needed only on a specific LiveCanvas – powered page,

you can consider inserting it inside the page itself.

This is kind of obvious – with LiveCanvas you have total control of the page’s HTML code, and, after all,

HTML happily accepts some JS or CSS blocks:

<script>
alert("Js can be executed here");
</script>

or something like

<style>
body {background:teal;}
</style>

So basically you can insert any kind of CSS or JS statement in any part of a LC page.

Quick and dirty. Good when drafting an idea as well.
Ideally you’ll want to place code close to the HTML that’s referring to – just to find it later – in THAT section, or in THAT block – whatever – just don’t forget.

Method #2, CSS – only. Add to the CSS Panel

LiveCanvas includes a live CSS code editing panel,  just go to Options > Edit Global CSS

This can be a simple and efficient way to place general statements: The CSS you add here will be served in every URL of the site, inline.

This feature is using the same WordPress API used by the built-in CSS editor of the WordPress Customizer.
If you shut down the LiveCanvas plugin, this CSS code will continue to be served.

Basically, here the CSS code is saved onto the database and is printed inline globally.

A good way to add CSS on a small site, or a good way to prototype CSS code.

(later on, you could move this code into the next method if you don’t want inlining)

Method #3: Add CSS code to the CustomStrap’s sass/_theme-custom.scss file

If you are using the CustomStrap theme, this file is meant for adding your own CSS statements.

Yes, also if you don’t know ANYTHING about SASS.

Because SCSS is “retro-compatible” with CSS.

Upon reloading any page from the browser, CustomStrap will detect eventual changes to the files in the /sass folder, and trigger the necessary CSS rebuild.

Slower than the next while developing, faster to serve for the users.

This solution brings clearly the best performance. No additional requests added to your site. And you can write sassy code!

Method #4: Enqueue your custom separate CSS or JS  file via CustomStrap’s functions.php file

For all CustomStrap users, (but it works in any theme!) here’s a clean solution to add your own separate stylesheet or javascript file.

First step, create a custom.css and/or a custom.js file inside the CustomStrap folder.

To “really” enqueue these files, you need to add some code to the functions.php file of the Theme – or actually for CustomStrap users,  just to uncomment some rows.

Here’s the code  to uncomment to add the CSS file globally to your site:

// CUSTOM ADDITIONAL CSS 
//add_action( 'wp_enqueue_scripts', 'cs_enqueue_child_theme_styles' );
//function cs_enqueue_child_theme_styles() { wp_enqueue_style( 'custom', get_stylesheet_directory_uri().'/custom.css' ); }

and this is for adding the JS file:

// CUSTOM ADDITIONAL JS 
//add_action( 'wp_enqueue_scripts', 'cs_custom_script_load' );
//function cs_custom_script_load() {wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), null, true); }

As a performance note: This will add a request for any additional file, so it can be considered with moderation. It can have its use cases though. And you might easily hack the code to include your files on some templates only.

Your choice.

Go to Next Chapter