Oxwall Software Documentation

Site panel is a narrow gray line at the top of your site. This example describes how to add your custom image to the site panel, change it's height,background color and some other small tweaks.

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

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

1. Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy the URL of upload image.
2. Go to Admin panel > Appearance > Edit Theme > “CSS” tab.
3. Copy/paste default styles (see above)into the “Edit CSS” box
4. Now it is time for some fun! Edit pasted styles to include your image, custom color and etc.:

    
   .ow_site_panel {
       background: url('http:link_to_your_upload_image_here.png') no-repeat scroll 0 0 #340404;
       border-bottom: 20px solid #E7AA37;
       height: 300px;}   
   .ow_logo_wrap {
    display:none;}

Result:

Where:

• background: url('http:link_to_your_upload_image_here.png') ()- shows your uploaded image.
• no-repeat- tells that your background image should not be repeated.
• #340404 () -sets the color for the rest of the site panel not occupied by uploaded image.
• border-bottom: 20px solid #E7AA37; () sets the height, type and color of the bottom border.
• height - sets the height for your site panel.
• ow_logo_wrap {display:none;}- removes your site name from top left corner of site panel.

1. Disable default background image by adding following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:

   .ow_page_wrap {
       background-image: none;
      }

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

Result (default vs customized):

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

.ow_bg_color {
    background-color: **#A9F5F2**;
}

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

.ow_menu_wrap {
        background: none;
        background-color:#A9F5F2;
}