Creating A gpEasy Theme

One of the main reasons I began using gpEasy CMS was how easy it was to learn to create themes for gpEasy. Previously I used WordPress and it took a little while to learn how to create themes, and while WordPress themes are very hackable they are also very complicated and you need to learn a good bit of PHP while gpEasy themes don't require you to learn any PHP, just a few gpEasy specific output functions.

To start with we are going to create the most basic of themes and then add to it. You will see that a gpEasy theme is nothing more than a typical HTML page, a css file, and a few output functions placed in the right areas of the template.php file.

Create Your Folders & Files

Before we get into coding we need to create the correct theme folder & file structure. You should be familiar with the folder structure from the anatomy of a theme tutorial.

  1. Create a new folder within the "themes" folder in your gpEasy CMS installation.
  2. Name the new folder "My_New_Theme"
  3. Inside the "My_New_Theme" folder create another folder named "Color"
  4. Inside the "My_New_Theme" folder create a new text file and name it "template.php"
  5. Inside the /My_New_Theme/Color/ folder create a new text file and name it "style.css"

That gives us the folder structure and files we need. If you go to the layouts admin page you will now see your new theme as an option. Don't add it to the layouts just yet as we haven't added any code to any of the files. Just see how it presents in the layouts.

Template File

The "template.php" file is the file we will be adding all our HTML & PHP code to. Open the file with your text editor and add the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<?php gpOutput::GetHead(); ?>
	</head>
	<body>
		<?php $page->GetContent(); ?>
		<?php gpOutput::GetAdminLink(); ?>
	</body>
</html>

And save the file.

The above code is the "minimum" code you need in your template.php file. Essentially what we have is the bases of any HTML file with three output functions. The output functions should be familiar to you from the output functions tutorial and the basic HTML should be familiar to you as well. If you are unfamiliar with this level of HTML you need to spend some time learning basic HTML. There are tons of tutorial on the web for that.

Now checkout the following images. We will add the new theme to layouts and checkout how it looks.

We now have a working minimalistic theme but it doesn't look like much at all. Nonetheless you should be aware of what the output functions are doing and where the information is showing up on the page. Should we add some styling to it at this point or add a little more functionality to the template.php file with another output function or two?

Add Additional Output Functions

Let's continue on editing the template.php file and add the output functions for extra content areas and a menu. Let's add tow of the default extra content areas and a full menu, Header, Footer, and the FullMenu output functions.

Here's the full code with the three new output functions added:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<?php gpOutput::GetHead(); ?>
	</head>
	<body>
		<?php gpOutput::Get('Extra','Header'); ?>
		<?php $page->GetContent(); ?>
		<?php gpOutput::Get('FullMenu'); ?>
		<?php gpOutput::Get('Extra','Footer'); ?>
		<?php gpOutput::GetAdminLink(); ?>
	</body>
</html>

Notice how I added them. The header is before the content because on most pages that's where it will be. The full menu is just after the content and the footer is just before the admin links. Go to the home page to see what it now looks like.

The Home page with our new theme

Notice how we now have a header, the content, a full menu, a footer, and then the admin links. . . just the way we added the output functions in the template.php file. If you take a moment to play with the theme as it is in gpEasy CMS you will notice that it doesn't work properly in the edit layouts page. Try to edit the layouts and see how it functions. Things just are't quite right. That's because we haven't styled anything nor have we wrapped any of the output functions in divs to protect them from causing problems with each other. So let's add some divs to our template.php file.

Giving Structure To The Template

Any HTML file needs some structure and in modern web design that structure comes mainly from divs, the days of tables are gone. So, we want to wrap the main sections of our theme with divs that we can define with a unique id or class. I'm just going to go ahead and give you my code for a very basic template.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php gpOutput::GetHead(); ?>
</head>
<body>
<div class="background">
<div class="wrap">
<div class="content">
	<div class="page">			
	<?php gpOutput::Get('Extra','Header'); ?>	
	<?php $page->GetContent(); ?>
	<?php gpOutput::Get('Extra','Footer'); ?>
	<?php gpOutput::GetAdminLink(); ?>
	</div>	
	<div id="sidebar" class="column">
	<?php gpOutput::Get('FullMenu'); ?>	
	</div>
</div>
</div>
</div>
</body>
</html>

Nothing special here that I did. I just added some divs with some classes and ids. Notice that I rearranged a couple of the output functions. I just want you to realize that the order doesn't matter as long they are where you want them.

The HTML here should be very familiar to anyone who has worked with modern web pages even a little.

This is about as basic a design as you can get, and I hope you can see that a gpEasy theme is just that, very basic and easy. The only thing you need to worry about when creating a gpEasy CMS theme is placing the output functions in the areas you want that particular "content" output.

Styling Your Theme

Now we need to add some styles to our theme. Open the style.css file within your new theme. Remember that style.css file we created in the "Color" folder? That's the one.

Basic CSS Considerations
The gpEasy developers tell us that we should apply the following styles to all themes: body{padding:0; margin:0;}

So, that's the very first thing we add to our style.css file anytime we are creating a theme for gpEasy. We can checkout how our theme looks at this point but honestly, nothing will change. We need to style the divs we added, .background, .wrap, .page, #sidebar, .column, and the divs that are created from the output functions. Yep, I'm doing it this way for a reason. I want to make sure that you have gone through the styling tutorials so you know what elements are output by different functions. It will help get you familiar with how gpEasy themes and output functions work.

Since I'm assuming that you understand basic HTML & CSS I'm just going to give you my style.css file for this theme:

body { padding:0; margin:0; min-width:768px; background-color:#000000; }

.background { background-color:#5C3317; padding:0; height:100%; margin: 1% 4%; padding:1px; }

.wrap { width:92%; margin:20px auto; }

.gpArea_Extra_Header { padding-bottom:20px; border-bottom: solid 1px #000; }
.gpArea_Extra_Header a, .gpArea_Extra_Header p { text-decoration:none; color:#5C3317; }
.content { width:100%; background-color:#5C3317; overflow:hidden; }

.page { float:left; clear:both; width:70%; background-color:#FFFFFF; overflow:hidden; padding: 1% 2%; }
.page p { font-size:1.2em;  overflow:hidden; }

#sidebar { float:right; width:24%; overflow:hidden; color:#000000; margin-top:100px; }
#sidebar a { color:#000000; text-decoration:none; transition: }
#sidebar a:hover, #sidebar .menu_top a.selected { color:#ffffff; text-decoration:none;}
#sidebar ul {margin:0; padding:0; }
#sidebar ul li { display:block; padding-bottom:3px; }
#sidebar ul li ul li{padding-left:20px;}

.gpArea_Extra_Footer { margin-top:30px; border-top: solid 1px #000; font-size:smaller; }
.sitemap_link a, .login_link a { text-decoration:none; padding-right:20px; font-size:smaller; }
.powered_by_link a { text-decoration:none; }
.powered_by_link { text-decoration:none; padding-right:20px; font-size:smaller; color:#5C3317; }
 
 
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#5C3317; text-decoration:none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color:#c9bbb2; text-decoration:none; } 

a { color:#5C3317; }
a:hover { color:#c9bbb2; }

That's not so much styling. Now checkout your theme in gpEasy. What does it look like? Hopefully it looks something like this:

 Your new theme 

This theme might look familiar. It's my gpEasy paper theme, at least the basis of it. Yes, it's a very simple theme. The whole idea of this tutorial was to show you just how simple a gpEasy theme can be. Notice that even though you only have a full menu for the sidebar you can change that to any menu type or add extra content areas. All that is done via the layouts in gpEasy CMS.

The uniqueness of this theme is that most of the styling is done on elements that are output from gpEasy's output functions. Many themes just wrap the output functions with a class or id and style only that element. I wanted you to learn that styling the output function is just as easy. It's only a matter of knowing was classes they output.

From this point you can add more styling, change the styling, wrap the output functions with other classes or ids and style those. Just play with the basic theme to get familiar with it's parts. Once you make a couple themes or convert web pages into a gpEasy theme you will quickly learn that a gpEasy them isn't anything difficult at all. It's just a matter of knowing your HTML & CSS.

Update for gpEasy 2.x - True WYSIWYG

gpEasy 2 introduced inline true WYSIWYG editing. To make your theme take full advantage of this new feature you need to add a couple lines of code to the template.php file. You can learn how to do that by reading the True WYSIWYG gpEasy documents page.

 

gpEasy B2sq Theme by CS @True Acupuncture