Themes

Building a 7thWeb CMS Theme

This document is an attempt at consolidating all the information I have gathered about building 7thWeb themes. I undoubtedly missed something, so please feel free to pass the information I missed onto me, or make your own guide.

This is what a basic theme folder could look like.

 

 

Don’t let the default.php trick you into thinking you are going to need to know a lot of PHP to build a 7thWeb theme. Just design your HTML page just like you would for a static site, and we will add in the tags to make it into a theme. Now, themes require at least the default.php for your site. You can create as many “templates” as you would like, ie: news.php, fullwidth.php, etc. You can later define these in the dashboard along with thumbnails of the layouts of these templates so when you are adding pages to your site, you can choose from multiple layouts or templates..

The description.txt file is just what it implies, a simple description of your theme that will show up in the 7thWeb dashboard when you are selecting your theme to use on your site. Your .txt file will look something like this.

 

 

The thumnail.png image is the thumbnail that 7thWeb will display of your theme. This needs to be about 120px wide X 90px tall.

 

Step 1

Add in the 7thWeb header bar, so while you are logged into the site, you can access your dashboard, edit your pages, etc.

Remove the title tag from a template, and replace it with this:

<?php

Loader::element(‘header_required’);

?>

Step 2

Now we need to add a way for the theme to access your CSS stylesheets. Where you would normally have this:

<link href=”style.css” rel=”stylesheet” type=”text/css” />

We are now going to replace the href with:

<?=$this->getStyleSheet(‘style.css’)?>

Your code will now look like this:

<link href=”<?=$this->getStyleSheet(‘style.css’)?>” rel=”stylesheet” type=”text/css” />

You probably notice that other tutorials say to do this differently. I am telling you to do it this way because this is they way to reference a stylesheet if you want your theme customizable by your client in one way or another. I will touch on making your theme customizable later on in this document. Notice that if you use this method of accessing stylesheets, the stylesheet needs to be in the root of your theme folder,

If you choose to use this method of linking your stylesheet, notice you need to provide a path to your stylesheet (I have highlighted the path in blue), therefore you can have your styleheet in a styles folder if you want:

<link href=”<?=$this->getThemePath()?>/style.css” rel=”stylesheet” type=”text/css” />

Step 3

Add an editable area to your page. In the <div> where you would normally start typing your content, add this little code snippet:

<?php

$a = new Area(‘area name here’); $a->display($c);

?>

Add this little snippet to limit how many blocks can go in an editable area (for example, you probably
don’t want your client to add 2 blocks into their navigation bar, so now you can limit how many blocks go somewhere):

$a->setBlockLimit(1);

Finished area code could look like this:

<?php
$a = new Area(‘area name here’); $a->setBlockLimit(1);
$a->display($c);
?>

 

 

Step 4

Adding a login link so you or your client doesn’t have to memorize a url to login to their dashboard.
If you want your login link to be in the footer somewhere or where ever else you want it on your site, isn’t really important, but here is the code you will need to give yourself a login link:

<a href=”<?=$this->url(‘login’)?>”><?=t(‘Login’)?></a>

This is pretty much all you need to really get started building a theme in 7thWeb.

Enabling Customization In Your Theme

You can enable customization in your themes by commenting your CSS in the ways that 7thWeb has specified.

You create your stylesheet just like you would any other stylesheet, except you add comments strategically throughout your stylesheet to enable customization.

This might be your regular CSS:

body {

background:#FFFFFF;

font-family:Arial, Helvetica, sans-serif; color:#000;

margin:0px;

padding:0px;

}

Now lets say you want to be able to customize the background color and the font color from time to time. Let enable that customization now (I’ll highlight the changes in blue so it is easier to see).

body {

/* customize_background */ background:#FFFFFF; /* customize_background */ font-family:Arial, Helvetica, sans-serif;

/* customize_body */ color:#000;/* customize_body */ margin:0px;
padding:0px;

}

Here are a few example of some customizations you could enable:

 

customize_background

customize_body
customize_link_hover customize_link
customize_header_logo

If you are going to enable font customization, the syntax you need to follow is a little more strict. The specific syntax is‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’ and ‘font-family’. Size and line height are separated by a /.

body {

/* customize_body */ font: normal normal 13px Arial; /* customize_body */

/* customize_body */ color: #777777; /* customize_body */

}

a:hover {
/* customize_link_hover */ color: #66CC00; /* customize_link_hover */
}