Oxwall Software Documentation

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
======How to create/customize themes for beginners======

**NOTE:** This tutorial was created and prepared by our community leader [[http://www.oxwall.org/user/maxk|Max]]. Thank you!
 
==== Requirements ====

To create a new theme, you need: 
  - A base theme 
  - A text editor (personally, for example [[http://notepad-plus-plus.org/|notepad++]]) 
  - A FTP client (like [[http://filezilla-project.org/|Filezilla]]) if you want work online 
  - A plug-in who help you to know which line to edit (like [[https://addons.mozilla.org/en-US/firefox/addon/web-developer/|Web developer for Firefox]] , I.E., [[http://getfirebug.com/releases/lite/chrome/|Chrome]]) 

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

==== Files preparation  ====
 
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 :\\
<code php>
define('OW_DEV_MODE', false);
</code>
by
<code>
define('OW_DEV_MODE', true);
</code>

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

==== Work with CSS ====

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 :\\
{{:dev:theme:455-sans-titre-1.jpg|}} 
\\
 If you click on an element, a window is opening at the bottom of browser like this :\\
{{:dev:theme:456-sans-titre-2.jpg|}}
\\
\\
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 :\\
<code css>
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 
}   
</code>
\\
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 :\\

<code css>
a:hover { }   
</code>

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

<code css>
color: #000000; 
</code>

To have this : \\

<code css>
a:hover 
{
 color: #000000; 
} 
</code>

**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. 


==== Edit CSS ====

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 :\\
  - By Admin Panel
  - 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** :\\

{{:dev:theme:485-ce.jpg|}}

Click on 'CSS' tab :\\

{{:dev:theme:486-ce2.jpg|}}

The page 'Edit CSS' is like this :\\

{{:dev:theme:487-ce3.jpg|}}

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.

==== Learn CSS ====

// This part in development//


==== Export theme ====

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 !
Oxwall Software Documentation

User Tools

Site Tools

Page Tools
