Oxwall Software Documentation

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

Site panel is a narrow gray line at the top of your site.

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

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:

• 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. To remove it 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 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, 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 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 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.Result:

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