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.

Default styles:

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

Adding custom styles:

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

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 which is not occupied by your image.

border-bottom: 20px solid #E7AA37; () sets the height, type and color of the bottom border.

height - sets the height for your 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;
}