How to create/customize themes for beginners

NOTE: This tutorial was created and prepared by our community leader Max. Thank you!

To create a new theme, you need:

1. A base theme
2. A text editor (personally, for example notepad++)
3. A FTP client (like Filezilla) if you want work online
4. A plug-in who help you to know which line to edit (like Web developer for Firefox , I.E., Chrome)

It's recommended to works on a local installation. It’s easier, faster and more safely.

First, download the base theme you want and upload it in ‘ow_themes’

Next, you have to enable DEV_MODE to see your changes. To do it, open 'ow_includes/config.php' :
At line 45, replace :

define('OW_DEV_MODE', false);

by

define('OW_DEV_MODE', true);

And save. If DEV_MODE is false, modify images and CSS in ow_themes/ will don't change anything.

First, go to Admin panel → Appearance → Choose Theme, and choose your theme.
Click on ‘Activate’ and back on your dashboard.

Now, you have the theme which will be edit. You should have installed browser's plugin to edit page's CSS.

Right click on your site, choose Web developer → CSS → See the styles of a particular element.
You must have now red border on each element you are hover like this :

If you click on an element, a window is opening at the bottom of browser like this :


This window contains the choose style element. For example, click on the title’s website.
The begin isn’t interesting for us. DON’T TOUCH ANYTHING ON THIS PART.
The important is :

a (line 107)   a means hypertext links
{ 
     color: #3366cc;   Color of selected element 
}   
 
a:hover (line 112)   a:hover means you are hover hypertext links 
{ 
}
 
   .ow_header .ow_logo a (line 232) 
{
     color: #999999;   Color of header 
}   

There are some parts of the file ‘base.css’
For example, we will change the color of hypertext links :
Open the theme you downloaded earlier, and edit ‘base.css’
Go to line 122. You must have this :

a:hover { }   

You have nothing between embraces. We will apply a color to hypertext links when you are hover them.
Insert this between embraces :

color: #000000; 

To have this :

a:hover 
{
 color: #000000; 
} 

Each command of a CSS file finish by a “;”

Save your file and upload it into : 'ow_themes/yourtheme/base.css'

Why don't we put in ow_static/ folder ? Because it’s the ‘cache’ of your theme. If you upload image or modify CSS in it, it will be displayed immediatly but if DEV_MODE is true, cache is disable and ow_static/ will be overwritten.

Back to your website and refresh the page.
Tadaaaa! If you’re hover a link, its color change to black :)
Now you have to edit your CSS like you want.

In this section, we will learn to edit CSS.
There are two methods to edit the CSS, each with advantages and disadvantages. We will see in detail these methods :

1. By Admin Panel
2. By manually edit base.css

1. By Admin Panel

Oxwall gives to you the possibility to edit the layout content without modify anything. To edit CSS with Admin Panel, go to the Admin Area → Appearance → Edit Theme :

Click on 'CSS' tab :

The page 'Edit CSS' is like this :

In top of page : Full content of base.css theme. You can't edit it in this text area (Read only).
Bottom : The text area where you can add your own CSS code.

Please Note :

• Custom CSS wrote in this page is generated by server, not present in files
• Custom CSS is read AFTER base.css, then each command wrote in custom CSS have priority. For example, if base.css defined size text 11 pixels and you set size text 13 pixels in custom CSS, text will be write in 13 pixels size.

Advantages : Quick Edit - No changed file
Disadvantages : No file output - Code often repeated

This method is recomneded if you want only modify an existing theme and you begin with CSS, but if you want create a theme, this solution is not appropriate.

2. By edit base.css

The second method to edit CSS is to modify the base.css.

Remember : You have to enable DEV_MODE in config.php to see changes.

To do it, open 'ow_themes/mytheme/base.css' with your text editor.
Modify what you want, and upload it in 'ow_themes/mytheme/'

With this solution, you have to find which line to edit and replace it.

Advantages : Clean code - Can export theme
Disadvantages : Longer and harder than admin panel

This method is recomended if you want to create your own theme and for advanced users.

This part in development

Now, we have to understand the functioning of pages. Pages of your website are generated by php and layout by CSS. But the skeleton of pages based on HTML documents.

These HTML documents are in 'yourtheme/master_pages'. You're not forced to modify or create them. If master_pages isn't present in your theme, Oxwall will take master_pages of basic theme : Graphite. That's why you have to keep folder 'graphite' in 'ow_themes' even if you don't use it.

Example : You delete graphite theme cause you are using 'club'. When you activate Dev_mode, cache is remove. So Oxwall will search html documents in 'club' theme to generate page. But club haven't all master_pages, only 'dndindex' and 'general' so it will search in 'graphite', but the folder doesn't exist.

• He can't generate other pages like admin.
• Try to go in admin panel, you have a 'OW_DEBUG EXCEPTION', and your site doesn't work :/

Remember you have to keep 'graphite' theme even if you don't use it.
Understand ? Ok, we continue :)

In 'graphite' theme, you have 5 html documents. You can copy,modify but don't remove them.

I advise you not to change the pages of the 'graphite'theme . If you want to change this theme, it is better to work locally cause an error on your part and the site may no longer be displayed.

That's what these files :

1. admin.html : skeleton of admin panel
2. blank.html : don't touch it ;)
3. dndindex.html : skeleton of the 'Main'/'Membershome'/'Profile View' page
4. general.html : is using for body of every pages
5. html_document.html : is base of master_pages.

We will learn how to modify a master page.
For example, we will take dndindex.html, the 'Main' page and add a block for what you want (Announce, advertisement, …)
It will be displayed below the menu, at top of page like this :

First, open dndindex.html with a text editor
Search this line :

<div class="ow_page_container">

ow_page_container contains the entire content of your page, then we will position our block at the top of it.
Below the line, add a new line and write this :

<div class="ow_announce">

You can replace 'ow_announce' by which name you want.
A 'div' is a container inwhich you can put anything you want as text, paragraphs, images, …
Our div 'ow_announce' will contains our announce or what you want.

On the next line, add :

<h1>Announce :</h1>

You can replace 'Announce :' by the text you want. It will be the title of our content.
'h1' mean the text 'Announce :' will be displayed like a title (bigger than normal text)

Next, add on a new line :

</br>

'</br>' is using to pass a line in html. With it, our title will be separeted of our content

After, write what you want on a new line. For example, you can add text only :

This is my text </br>\\
This text will be displayed below my title ^^

or you can add a picture :

<IMG SRC="/images/mypicture.jpg" ALT="Alt text" TITLE="Picture Title">

Finally, add this on a new line :

</div>

'/div' will close our container 'ow_annoucement'

You must have this :

<div class="ow_announce">
        <h1>Announce :</h1>
        </br>
This is my text </br>
This text will be displayed below my title ^^
    </div>

Save your file into the folder 'master_pages' of your theme. This file has to have the same name (for example : dndindex.html)
Upload it to your host (in ow_themes/mytheme/master_pages/'

Go to your website, 'Main' page and refresh :

Our container and our text are displayed !
But they are ugly and on the left !

We have to layout them. How ?
CSS of course :D

Do you want a background-image ?
Do you want center it ?

Let's go !
\\Open your 'base.css' and search this :

[3] Masterpage & Page Layout

This part of CSS contains all items for layout.
Find an empty line and add this :

.ow_announce {

It means that we will layout our div 'ow_announce'
'{' means the code is beginning.

Don't forget to replace 'ow_announce' by name you gave earlier

On the next line, add :

    margin:auto;
    text-align: center;
    width:960px;

'margin:auto' is using to center your 'div' in page
'text-align: center' will center your text in your 'div'
'width:960px' to fix width of your div to 960 pixels.

Next, add :

    background: url('images/backannounce.png');
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

background: url('images/backannounce.png') to set the background of our container

And the 'border-radius' to make rounded corners on our picture

Finally, add :

}

You must have this :

.ow_announce {
    margin:auto;
    text-align: center;
    width:960px;
    background: url('images/backannounce.png');
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Save your CSS and upload it in your theme.
If you want, you can refresh the 'Main' page :

Text and 'div' are now center in page, but we forgot to upload our background image
We have to find a picture for this

You can take it.

Rename the picture you want to 'backannounce.png' and upload it in 'ow_themes/mytheme/images/'
Refresh the 'Main' page on your website and :

Our announce container is beautiful ! No ?

Okay, you have now what you want. But the theme’s name is always the same and you can’t export it.
How to do it? First, create a folder with the name you want. This name will be the name of your own theme.
Put in this folder :

• Your base.css
• The folder ‘images’ with your own pictures
• The folder ‘master_pages’
• theme.xml. Open ‘theme.xml’ with notepad and edit lines how you want like name, author etc.

You can now upload the folder you created in ‘ow_themes’ and activate it in admin panel !