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.

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.

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

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

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.

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:

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

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

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

.ow_site_panel { height: 300px;}   

Where 300px - is desired height.

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

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:

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

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

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.

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:

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

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.

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

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:

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

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

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

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

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

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:

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

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

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> 

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.

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:

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

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

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:

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

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

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:

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

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