Creating a Custom Theme

To create a custom theme, we recommend following these steps:

  1. Download a theme directly from your JEM admin area, under Design > Manage Themes. 
  2. Click on the download icon for the theme you want to save it to your desktop.
  3. Unzip the theme to a folder on your desktop

You can now start building your own theme

 

Anatomy of a JEM theme

JEM Themes are designed to hold the CSS, images, javascript and any template override files in a single folder.  By selecting the theme in JEM, JEM will automatically use all the files related to the theme from that folder.

 

Theme Folder Name

Make sure the folder name that you will store your theme is in has no spaces, and only uses alphanumeric and dash characters.  This is needed so that JEM will be able to read the files correctly when pages are rendered on your site.

 

File Paths

Here are the paths to use for creating and customizing your own theme. We will list down the necessary paths/files for JEM theme creation.  There maybe other files included that are custom to that theme and will not be listed here.

/css - this folder holds all CSS related files for the JEM theme. 

  • /nav - contains the CSS for the menu maker function and its drop down functionality
  • /ie.css - for CSS backwards compatibility for older versions of Internet Explorer
  • /style.css - houses the main theme CSS.  This file is what you need to edit to create a custom theme.
  • /tabs.css - for the tab area of the product details page

/custom_templates - contains any custom template overrides that this theme will use.  any template found in this folder will be used by JEM instead of the default template listed in the /system/application/views folder

/images - images for the theme

/js - any javascript functions to be run for the theme

/theme_info.php - this is a PHP file that lists the theme name and description that will be used when importing the new theme in JEM.

/theme_preview.jpg - the preview image for the theme to be used when viewing them in the Manage Themes area of JEM.

 

The style.css file

JEM uses the style.css file in the /css folder of the theme to generate most of the theme style.  the style.css is heavily commented so that you can read it directly and start editing the code yourself.

Almost all of the elements on the JEM templates use the standard class and ID tags for CSS for styling.  YOu can therefore style each box, link, div, etc. to your own custom specifications.

 

Importing Your New Theme

Once you are done creating your new theme, you must upload it via FTP (or file manager of your choice), back into your JEM site.  Make sure to upload it to the /themes/main folder

Once it is uploaded, go to your JEM area under Design > Manage Themes, and click on Add Theme.  Enter the folder name for your theme to add.

 

LATEST NEWS

Scanned and Verified

Security Verified
Certified Seal
Privacy Verified Seal
Business Verified Seal
LiveZilla Live Chat Software