Design Customization

2013-12-25T05:24:26+00:00

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:

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

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.

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:

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.

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:

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.

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:

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.

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

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

Widgets

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.

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:

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:

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:

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:

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:

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

The list of browsers supported by Oxwall

2016-03-23T08:40:35+00:00

The list of browsers supported by Oxwall

IE 10+
Google Chrome latest version
Mozilla Firefox latest version
Safari 7+

Oxwall Software Documentation overview

Admin Area Manual

Admin Area Manual

Design Customization

Design Customization

Tools

Graphics

CSS

Site Panel

Background color

Background image

Removing site name

Changing height

Console

Background color/image

Main Menu

Background color

Background image

Changing font size

Site-wide backgrounds:

Page background color/image

Canvas background color/image

Site wide font family

Widgets

Adding custom widget icons

Form Background color/image

Page Background color/image

Footer

Background color/image

The list of browsers supported by Oxwall

The list of browsers supported by Oxwall

overview:user_manual

Oxwall Software Documentation overview

Admin Area Manual

Admin Area Manual

Design Customization

Design Customization

Tools

Graphics

CSS

Site Panel

Background color

Background image

Removing site name

Changing height

Console

Background color/image

Main Menu

Background color

Background image

Changing font size

Site-wide backgrounds:

Page background color/image

Canvas background color/image

Site wide font family

Widgets

Adding custom widget icons

Sign In

Form Background color/image

Page Background color/image

Footer

Background color/image

The list of browsers supported by Oxwall

The list of browsers supported by Oxwall

overview:user_manual