====== Design Customization ====== 

This manual describes basic custom changes applicable to Oxwall themes. 
All changes are done using tools available in Oxwall's admin panel and will not be erased by software and/or theme updates. 

Before making any changes described in this document check your  theme's settings in Admin Panel > Appearence > Edit Theme > "Theme Settings" tab. Each theme contains its own set of tools ( ex: changing background, font-color) which you can easily use without adding any CSS changes manually.

===== Tools ===== 
==== Graphics ====
Admin panel > Appearance > Edit Theme > "Graphics" tab.

This feature allows you to upload custom images from admin panel and use URL/path to them within your custom design. Images uploaded via this form are stored in **/ow_userfiles/themes/** folder on your server. Therefore make sure that both folders have 777 permissions. Alternatively you can upload your images directly via FTP or control panel. 

==== CSS ====
Admin panel > Appearance > Edit Theme > "CSS" tab.
  * Existing CSS styles - shows you default styles.
  * Edit CSS - allows you to add your custom styles or edit default ones. To edit/add styles just add them into the box under "Edit CSS" section and click "Save".

===== Site Panel =====

Available styles:
<code>.ow_site_panel {
    background: none repeat scroll 0 0 #F4F4F4;
    border-bottom: 1px solid #E5E5E5;
    height: 41px;}</code>
    
Available styles for site name within site panel:
<code>.ow_logo_wrap {
        width: 1000px;
        margin: 0px auto;
        padding: 12px 0px 0px 10px;}
.ow_logo_wrap a {
        font-family: 'UbuntuBold', "Trebuchet MS", "Helvetica CY", sans-serif;
        font-size: 13px;
        text-transform: uppercase;
        color: #626060;}
.ow_logo_wrap a:hover {
        text-decoration: none;}</code>

====Background color====

To change background color of site panel add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:

<code>
.ow_site_panel {
    background: none repeat scroll 0 0 #5882FA;}
</code>

Where #5882FA ( blue)- is desired color code.

====Background image ====

To add background image to site panel instead of using background color:

  * Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy URL of uploaded image. 
  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab: 
<code>
.ow_site_panel {
   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}
</code>

Where  http:/sitename.com/ow_userfiles/themes/theme_image_29.png – is the URL copied earlier.

====Removing site name ====

Some themes, for example "Origin", have site name in top left corner of site panel. 
To remove site name add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab: 
<code>
.ow_logo_wrap {display:none;}
</code>

==== Changing height ====
Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab: 
<code>
.ow_site_panel { height: 300px;}   
</code>

Where 300px - is desired height.

=====Console=====

Available styles for console are located under /* ---- Console styles ---- */ section of the “Existing CSS Styles” form in Admin panel > Appearance > Edit Theme > “CSS” tab. 

====Background color/image====

To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
<code>.ow_console_body {
        background: #5882FA;}</code>

Where #5882FA ( blue)- is desired color code.

Result:

{{:overview:console_final.png?300|}}

To add image as a background: 

  * Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy URL of uploaded image. 
  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab: 
<code>.ow_console_body {
       background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}</code>

Where http:/sitename.com/ow_userfiles/themes/theme_image_29.png - is URL copied earlier.

===== Main Menu =====
Available styles for main menu are located under /* ---- Main Menu styles ---- */ section of the “Existing CSS Styles” box in Admin panel > Appearance > Edit Theme > “CSS” tab. 

==== Background color====
To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
<code>.ow_menu_wrap {
        background: none repeat-x #5882FA;} </code>
        
Where #5882FA - is desired color code.

====Background image====
To add image as a background: 
  * Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy URL of uploaded image. 
  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab: 
<code>.ow_menu_wrap {
       background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}</code>

Where http:/sitename.com/ow_userfiles/themes/theme_image_29.png - is URL copied earlier.

==== Changing font size ==== 
To change font size used for main menu add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
<code>.ow_main_menu li a {
    font-size: 18px;}</code>
    
Where 18px- is desired font size. 

===== Site-wide backgrounds: =====

==== Page background color/image ====
If your theme has an image as a background, you can disable default background image by adding following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab: 
<code>.ow_page_wrap {
    background-image: none;
   }</code>

Choose your own background color in Admin panel > Appearance >Edit Theme > "Theme Settings" tab :{{:design:origin_page_background_change.png?300|}}

If your theme doesn't allow to set background in admin panel set your own background color using following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab:
<code>.ow_page_wrap {
    background-image: none;
    background-color: #A9F5F2;
   }</code>
   
Where #A9F5F2 - is desired color code.

Result (default vs customized):

{{:design:origin_backrgound_default.png?300|}} {{:design:origin_background.png?300|}}

==== Canvas background color/image ====

To change canvas background color add following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab:<code>.ow_bg_color {
    background-color: #A9F5F2;
}</code>

Where #A9F5F2is desired color code.

Result:

{{:design:origin_canvas_backgroun.png?300|}}

To add canvas background image:

  * Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy URL of uploaded image. 
  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab: 
<code>
.ow_bg_color{
   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");} </code>

Where  http:/sitename.com/ow_userfiles/themes/theme_image_29.png – is the URL copied earlier.

===== Site wide font family ======
Available styles:

<code>
body, html {
font-family: "Tahoma","Lucida Grande", "Verdana";
color: #333; /** OW_Control type:color, section:2. Colors, key:textColor, label: - Text **/
font-size: 13px;
line-height: 18px;
height: 100%;
min-width: 1000px;} </code>

To change font family used on your site 

  * Visit http://cssfontstack.com/ or any similar site. Find needed font, and copy font-stack string.Example: font-family: “Andale Mono”, AndaleMono, monospace .
  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:

<code>
body, html {
font-family: “Andale Mono”, AndaleMono, monospace;} </code>

===== Widgets ======
==== Adding custom widget icons====
To replace default widget icon by custom one:

  * Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy the URL of  upload image.
  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
<code>
html body div .ow_ic_warning {background-image: url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");
}</code>

Where: 
  * ow_ic_warning – is class name of the icon you wish to change ( see the list of icons given bellow to find out the class name).
  * http:/sitename.com/ow_userfiles/themes/theme_image_29.png – URL you have copied earlier.

Result ( default icon vs custom one):

{{:design:widget_default.png?300|}} {{:design:widget_custom.png?300|}}

List of available icons and their class names: 

<code><option value="ow_ic_add"> Add </option>
<option value="ow_ic_aloud"> Aloud </option>
<option value="ow_ic_app"> App </option>
<option value="ow_ic_attach"> Attach </option>
<option value="ow_ic_birthday"> Birthday </option>
<option value="ow_ic_bookmark"> Bookmark </option>
<option value="ow_ic_calendar"> Calendar </option>
<option value="ow_ic_cart"> Cart </option>
<option value="ow_ic_chat"> Chat </option>
<option value="ow_ic_clock"> Clock </option>
<option value="ow_ic_comment"> Comment </option>
<option value="ow_ic_cut"> Cut </option>
<option value="ow_ic_dashboard"> Dashboard </option>
<option value="ow_ic_delete"> Delete </option>
<option value="ow_ic_down_arrow"> Down arrow </option>
<option value="ow_ic_edit"> Edit </option>
<option value="ow_ic_female"> Female </option>
<option value="ow_ic_file"> File </option>
<option value="ow_ic_files"> Files </option>
<option value="ow_ic_flag"> Flag </option>
<option value="ow_ic_folder"> Folder </option>
<option value="ow_ic_forum"> Forum </option>
<option value="ow_ic_friends"> Friends </option>
<option value="ow_ic_gear_wheel"> Gear wheel </option>
<option value="ow_ic_help"> Help </option>
<option value="ow_ic_heart"> Heart </option>
<option value="ow_ic_house"> House </option>
<option value="ow_ic_info"> Info </option>
<option value="ow_ic_key"> Key </option>
<option value="ow_ic_left_arrow"> Left arrow </option>
<option value="ow_ic_lens"> Lens </option>
<option value="ow_ic_link"> Link </option>
<option value="ow_ic_lock"> Lock </option>
<option value="ow_ic_mail"> Mail </option>
<option value="ow_ic_male"> Male </option>
<option value="ow_ic_mobile"> Mobile </option>
<option value="ow_ic_moderator"> Moderator </option>
<option value="ow_ic_monitor"> Monitor </option>
<option value="ow_ic_move"> Move </option>
<option value="ow_ic_music"> Music </option>
<option value="ow_ic_new"> New </option>
<option value="ow_ic_ok"> Ok </option>
<option value="ow_ic_online"> Online </option>
<option value="ow_ic_picture"> Picture </option>
<option value="ow_ic_plugin"> Plugin </option>
<option value="ow_ic_push_pin"> Push pin </option>
<option value="ow_ic_reply"> Reply </option>
<option value="ow_ic_right_arrow"> Right arrow </option>
<option value="ow_ic_rss"> Rss </option>
<option value="ow_ic_save"> Save </option>
<option value="ow_ic_script"> Script </option>
<option value="ow_ic_server"> Server </option>
<option value="ow_ic_star"> Star </option>
<option value="ow_ic_tag"> Tag </option>
<option value="ow_ic_trash"> Trash </option>
<option value="ow_ic_unlock"> Unlock </option>
<option value="ow_ic_up_arrow"> Up arrow </option>
<option value="ow_ic_update"> Update </option>
<option value="ow_ic_user"> User </option>
<option value="ow_ic_video"> Video </option>
<option selected="selected" value="ow_ic_warning"> Warning </option>
<option value="ow_ic_write"> Write </option> </code>

===== Sign In =====
Available styles for sign in form are located under /* ---- SignIn Form styles ---- */ section of the “Existing CSS Styles” form in Admin panel > Appearance > Edit Theme > “CSS” tab. 

====Form Background color/image====

To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:

<code>
.ow_sign_in_wrap form {
    background: none no-repeat scroll 0 0 transparent #A9F5F2;} </code>
    
Where #A9F5F2- is desired color code. 

To add background image:

  * Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy URL of uploaded image. 
  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
<code>
.ow_sign_in_wrap form {
background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png") no-repeat scroll 0 0;
} </code>

Where http:/sitename.com/ow_userfiles/themes/theme_image_29.png - is URL copied earlier.

Result:

{{:design:sign-in-custom-image.png?300|
}}

====Page Background color/image====

To change background color of the whole sign in page add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
<code>
.ow_sign_in_cont {
    background: none repeat scroll 0 0 #FFFFFF;
} </code>

Where #FFFFFF (white) - is desired color code

To add background image:

  * Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy URL of uploaded image. 
  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
<code>
.ow_sign_in_cont {
background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png") repeat;
}
</code>

Where http:/sitename.com/ow_userfiles/themes/theme_image_29.png - is URL copied earlier.

Result:

{{:overview:sign-in-page-background.png?300|}}

===== Footer ======
====Background color/image====

To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
<code>.ow_footer {
    background: none repeat scroll 0 0 #A9F5F2;
    
} </code>

Where **#A9F5F2** is desired color code.

To add footer background image:

  * Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy URL of uploaded image. 
  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:

<code>
.ow_footer {
   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");} </code>