Table of Contents

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.

Site Panel

Available styles: 

.ow_site_panel {
    background: none repeat scroll 0 0 #F4F4F4;
    border-bottom: 1px solid #E5E5E5;
    height: 41px;}

Available styles for site name within site panel: 

.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;}

Background color

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

.ow_site_panel {
    background: none repeat scroll 0 0 #5882FA;}

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

Background image

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

.ow_site_panel {
   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}

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: 

.ow_logo_wrap {display:none;}

Changing height

Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab: 

.ow_site_panel { height: 300px;}

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: 

.ow_console_body {
        background: #5882FA;}

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

Result:

To add image as a background: 

.ow_console_body {
       background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}

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

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: 

.ow_menu_wrap {
        background: none repeat-x #5882FA;}

Where #5882FA - is desired color code.

Background image

To add image as a background: 

.ow_menu_wrap {
       background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}

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: 

.ow_main_menu li a {
    font-size: 18px;}

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: 

.ow_page_wrap {
    background-image: none;
   }

Choose your own background color in Admin panel > Appearance >Edit Theme > “Theme Settings” tab :

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: 

.ow_page_wrap {
    background-image: none;
    background-color: #A9F5F2;
   }

Where #A9F5F2 - is desired color code.

Result (default vs customized):

Canvas background color/image

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

.ow_bg_color {
    background-color: #A9F5F2;
}

Where #A9F5F2is desired color code.

Result:

To add canvas background image: 

.ow_bg_color{
   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}

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

Site wide font family

Available styles: 

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

To change font family used on your site 

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

Widgets

Adding custom widget icons

To replace default widget icon by custom one: 

html body div .ow_ic_warning {background-image: url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");
}

Where:

Result ( default icon vs custom one):

List of available icons and their class names: 

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

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: 

.ow_sign_in_wrap form {
    background: none no-repeat scroll 0 0 transparent #A9F5F2;}

Where #A9F5F2- is desired color code.

To add background image: 

.ow_sign_in_wrap form {
background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png") no-repeat scroll 0 0;
}

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

Result:

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: 

.ow_sign_in_cont {
    background: none repeat scroll 0 0 #FFFFFF;
}

Where #FFFFFF (white) - is desired color code

To add background image: 

.ow_sign_in_cont {
background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png") repeat;
}

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

Result:

Background color/image

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

.ow_footer {
    background: none repeat scroll 0 0 #A9F5F2;
    
}

Where #A9F5F2 is desired color code.

To add footer background image: 

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