The Anatomy of a gpEasy Theme

In this tutorial I'm going to demonstrate the basic structure of a gpEasy theme. In other words, we are going to discuss the folder structure and required files needed for a gpEasy CMS theme. This is a very simple tutorial.

gpEasy CMS themes are unique in that you can have multiple styling for one theme/template. Let me demonstrate with one of the default gpEasy themes.

This is an image of the "Bordered Three" theme that currently is packaged with gpEasy CMS as one of the default themes. Notice how within the "Bordered Three" folder there are three folders for colors, Blue, Green, and Red. Each one of those folders contains a styling sheet to style the color of that particular theme differently thus, you have one theme with three color options.

Folder Structure

  1. We have the "main theme folder" within the "themes" folder. This folder will contain all the contentments of your gpEasy theme. In this case it's the "Bordered Three" folder.
  2. The "main theme folder" MUST contain a "template.php" file. This is the PHP file that contains all the necessary PHP output functions and HTML to structure your theme.
  3. Within the "main theme folder" ("Bordered Three" in this example) you will have sub-folders for styling. In this example they are named after colors but they can be named anything.
  4. Within the sub-folder of the "main theme folder" there MUST be a "style.css" file. This file contains the styling for that theme. In this example we have three different stylings for the "Bordered Three" theme.

Additional & Optional Files & Folders

Images Folder
The folder named ".images" in the "Bordered Three" theme is optional. Generally you will want to house all your images in one folder, however you may also desire to keep them within their styling folder. This is the preference of the theme developer however, it generally is easiest to keep them all in one folder. By doing so you can style all css files the same and then just change the specifics for each look. Why does this folder have a dot/period at the beginning? That is a developer choice. By convention in unix systems (most servers) files beginning with a dot are hidden. It's not something you need to worry about.

style-full.css File
In this example we see there are two style sheets in the sub-folder of the main theme folder. gpEasy CMS only cares about the style.css file. Any other css files will be ignored by gpEasy.

This is a developer preference again. The style-full.css you see in this example is the same file as the style.css file except that the style.css is a "compressed" css file and the style-full.css is a structured css. Some developers choose to do this simply to decrease the size of the css file but then allow the user to easily read the css in the style-full.css file. Just take a look at the two files. The code is the same.

Addon.ini File
This file is not necessary to create a working gpEasy theme. It is a file used primarily for developers who choose to upload their theme to gpeasy.com. You need not worry about this folder until you decide to upload your theme to gpeasy.com.

Example Theme 2

This is another default theme packaged with gpEasy CMS. It's the "One Point 5" theme. As you can see in the image there is no ".images" folder. Instead the images required have been put within the styling folders and the main folder.

Once again this theme is utilizing several stylings for the one theme/template.php file and again they are by color. Please realize that the styling folders can contain any type of styling for your theme. For example, my theme for this site doesn't have color styling in the sub-folders. It has layout stylings which give me options to have the navigation sidebar on the left or right, a fixed width theme or a fluid theme, etc. In other words, the sub-folders contain any type of styling for your theme/template.php file that you want not just color schemes.

Themes & Layouts

If you remember the layouts tutorials you should remember seeing the color options for the different themes. At this point I'm sure that's second nature to you.

This is how gpEasy loads the themes, by the sub-folder name. Therefore, whatever you name the sub-folders that contain a style.css file that name will be displayed in the layouts as the selectable theme styling.

The CSS File

Previously I stated that you MUST have a file named "style.css" within the sub-folder of your theme. This isn't exactly true. gpEasy CMS will load any css file that is located within a sub-folder of a theme's main folder. Therefore, you could name it whatever you want however, gpEasy will load only one style sheet within the styling folder. Therefore, it's best to use the style.css naming convention as it will be selected over any other css files. In other words, gpEasy CMS has a preference to load the style.css file before any other css files found in the styling folders of themes.

 

gpEasy B2sq Theme by CS @True Acupuncture