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);

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 
}   

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

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 !