Custom CSS /JavaScript

How to add custom CSS and JavaScript

Table of Contents

1. Custom CSS

Quick Tip #1

For Navigation style editing, view this article instead.

From the plugin’s main admin page, select “Edit Skin” from any existing Grid.

Next, select “CSS Editor” from the top-right side of the page.

Add new Custom CSS, or edit the existing Custom CSS styles that belong to some of the skins.

Quick Tip

Certain Item Skins include Custom CSS. This CSS can be carried over to your duplicated skins.

2. Custom JavaScript for advanced users

Visit your Grid’s “API/JavaScript” tab to add custom script for your grids.

Listen for when the Grid has loaded:

// wait until Grid has officially loaded
var gridLoaded = setInterval(function() {
    // essapi_1 = current grid's API Name
    if(':visible')) {
        // execute additional script now
}, 500);

Adjust Default Lightbox Settings:

jQuery.extend(jQuery.esgbox.defaults, {
    width       : 1280,
    height      : 720,
    aspectRatio : true
Custom CSS /JavaScript

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author


Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *