Add JavaScript & CSS To gpEasy Pages

This simple tips is to show you how to add JavaScript and styles directly into your gpEasy pages. For many users this is obvious but for users unfamiliar with JavaScript and cascading style sheets it may not be obvious.

Both JavaScript and styles can be directly added within gpEasy pages when in "source view" in CKEditor, the HTML editor. They are added just as they would be in any HTML file however, I'm sure a few people may need a little help with that.

Adding JavaScript

Any JavaScript added needs to be wrapped with the script open and closing tags. <script></script>. Typically the JavaScript opening tag is <script type="text/javascript"> and the closing tag is </script>.

Here's an example of a simple redirect script and how it would look directly inserted into a gpEasy page:

<script type="text/javascript">

The other way to add JavaScript within your gpEasy pages is by linking it. Here's an example of what a linked JavaScript would look like:

<script src="/themes/common/File_Name.js" type="text/javascript"></script>

The above JavaScript links to the file named "File_Name.js" that's in the /themes/common/ folder.

That's all there is to it. Nothing difficult. Just like in any other HTML file.

Adding Styles

Adding styles is the same as adding styles to any other HTML file. When editing your gpEasy page select "source view" and add your styles anywhere you like. Just make sure to wrap them with the opening and closing tags.

The opening tag for styles is <style type="text/css">
And the closing tag is </style>

Here's an example of adding a style directly within a gpEasy page:

<style type="text/css">#cboxTitle{text-align:left; color:#000000;}</style>

The above style is for Colorbox's caption.

A linked *.css file would look like:

<link rel="stylesheet" type="text/css" href="/themes/common/style.css"  />

The above links the "style.css" file in the /themes/common/ folder.

Just like with JavaScript styles are added within gpEasy pages in the exact same way via the "source view" when editing a page. Just make sure you have the proper tags.

You can add JavaScript and styles in any area that you can edit, thus you can add them to extra content areas, pages, and of course your theme. That's all I got for this one. . . head on back to the gpEasy tutorials & tips page for more.


gpEasy B2sq Theme by CS @True Acupuncture