User Tools
Approvals: 0/1
This is an old revision of the document!
Table of Contents
This manual describes basic custom changes applicable to Oxwall themes. All changes are done using tools available in Oxwall's admin panel.
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
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;}
Сhanging background color
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.
Adding background image
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.
Removing 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.
Changing Background:
Page background color
- 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**;
}
Result (default vs customized):
Canvas background color
Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
.ow_bg_color {
background-color: **#A9F5F2**;
}
Where #A9F5F2 is desired color code.
Result:
Menu background color
Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
.ow_menu_wrap {
background: none;
background-color:#A9F5F2;
}
Where #A9F5F2 is desired color code.
Result:
Footer 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:
Page Tools
