Introduction

The Elite Custom JS and CSS allows admin to add multiple custom JS and CSS in admin area, client area and both with beautiful editor.

Features

Here you will find the main features of Plugin.

• Easy to setup and use.
• Used to add Google analytics, Google tag manager, Facebook Pixel etc...
• Add multiple custom JavaScript into clients area, admin area and both
• Add multiple custom CSS into clients area, admin area and both
• Provides powerful editor
• Beautify code option
• Fullscreen mode with shortcode key f11. Close fullscreen mode using Esc key
• Active / Deactive JavaScript code anytime using Active / Deactive option
• Active / Deactive CSS code anytime using Active / Deactive option
• Developer friendly

Install & activate the module

The installation of the module is just like any other module installation for Perfex. Login to your Perfex site and go to Setup > Modules.

At the modules page, click on choose file in upload module field. Select "upload.zip" file as showin in below screenshot. After that click on Install button.

If module successfully installed, you will see on modules page. Click on Activate link to activate the module.

Custom JavaScript

JavaScript codes Listing Page

Listing page will display all added JavaScript codes. Admin can search by name or description. Admin can also active/deactive particular snippet directly from listing page

Name
Display the JavaScript snippet name

Description
Display the JavaScript snippet description

Tags
Dispaly the snippet enabled on which area. Admin area or clients area or both

Status
Display the JavaScript snippet status. Admin can active/deactive from here

Create Custom JavaScript

Admin can create a new snippet by clicking on create button from the listing page.

View Area
Choose the option where you want to add JavaScript snippet. Support 3 areas - Backend, frontend and both.

Name
Define your snippet name

Script Tag
With <script> Tag - You can add JS with <script> Tag
Witout <script> Tag - If you want to add any external JS file, then use this options

Code
Wrinte your JavaScript code in this field. Editor also provides beautify and fullscreen option.

Description
Enter a description about your JavaScript snippet. It's optional.

Status
Active/deactive snippet. If it's activated then your snippet code will be rendered based on selected area type.

Custom CSS

CSS codes Listing Page

Listing page will display all added CSS codes. Admin can search by name or description. Admin can also active/deactive particular snippet directly from listing page

Name
Display the CSS snippet name

Description
Display the CSS snippet description

Tags
Dispaly the snippet enabled on which area. Admin area or clients area or both

Status
Display the CSS snippet status. Admin can active/deactive from here

Create Custom CSS

Admin can create a new snippet by clicking on create button from the listing page.

View Area
Choose the option where you want to add CSS snippet. Support 3 areas - Backend, frontend and both.

Name
Define your snippet name

Style Tag
With <style> Tag - You can add css with <style> Tag
Witout <style> Tag - If you want to add any external css file, then use this options

Code
Write your CSS code in this field. Editor also provides beautify and fullscreen option.

Description
Enter a description about your CSS snippet. It's optional.

Status
Active/deactive snippet. If it's activated then your snippet code will be rendered based on selected area type.

Have a look at video