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.

Tip #1: add CSS / JS code directly into the page HTML itself, on a specific page

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, "inline".

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 this CSS/JS statements close to the HTML that's referring to - just to find it later - in THAT section, or in THAT block.

Tip #2: Add CSS via the LiveCanvas CSS Panel, globally.

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)

Tip #3: [RECOMMENDED, global] For picostrap + base child theme users: Add CSS code to the child theme via the  sass/_custom.scss file

If you are using the picostrap (or 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, picostrap 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!

Tip #4: For picostrap + base child theme users: Enqueue your custom separate  JS  file via functions.php file

Here's a clean solution to add your own separate stylesheet or javascript file.

Edit the functions.php file in you picostrap child theme folder.

Some clear comments in the code will guide you in what to do

You might want to uncomment a row to add a JS  file globally to your site:

// OPTIONAL ADDITIONAL JS FILE - just uncomment the row below to enqueue the file /js/custom.js
//add_action( 'wp_enqueue_scripts', function() { wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', array(/* 'jquery' */), null, true); });

What will happen is that a small dummy javascript file, containing just a demo console.log statement,

will be loaded in the frontend on all templates.

The file path is  your_child_theme_folder/js/custom.js


You can customize this dummy javascript file as much as you want.

Vanilla javascript invited here.

You are free here, and have no junk in your backpack: so let's get rid of jQuery and other bloated libraries.

Build your own masterpiece!


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.
You might consider hacking the code above to add your JS file on some templates only.

Your choice.