Differences

This shows you the differences between two versions of the page.

--- design:howto [2013/12/24 11:57]
Alia
+++ — (current)
@@ Line 1: / Line 1: @@
-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".
-{{:design:admin-appearance-edit-theme-css.png?300|}}
-===== Site Panel =====
-Site panel is a narrow gray line at the top of your site.
-{{:design:origin_defailt_site_panel.png?300|}}
-Available styles:
-<code>.ow_site_panel {
-    background: none repeat scroll 0 0 #F4F4F4;
-    border-bottom: 1px solid #E5E5E5;
-    height: 41px;}</code>
-Available styles for site name within site panel :
-<code>.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;}</code>
-====Сhanging background color====
-Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>
-.ow_site_panel {
-    background: none repeat scroll 0 0 #5882FA;}
-</code>
-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:
-<code>
-.ow_site_panel {
-   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}
-</code>
-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.
-To remove it add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>
-.ow_logo_wrap {display:none;}
-</code>
-==== Changing height ====
-Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>
-.ow_site_panel { height: 300px;}
-</code>
-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.
-====Changing background color/image====
-To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>.ow_console_body {
-        background: #5882FA;}</code>
-Where #5882FA ( blue)- is desired color code.
-Result:
-{{:design:console.png?300|}}
-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:
-<code>.ow_console_body {
-       background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}</code>
-Where http:/sitename.com/ow_userfiles/themes/theme_image_29.png - is URL copied earlier.
-===== Main Menu =====
-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.
-==== Changing background color====
-To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>.ow_menu_wrap {
-        background: none repeat-x #5882FA;} </code>
-Where #5882FA - is desired color code.
-==== Changing font size ====
-To change font size add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>.ow_main_menu li a {
-    font-size: 18px;}</code>
-Where 18px- is desired font size.
-===== Site-wide backgrounds: =====
-==== Page background color/image ====
-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: <code>.ow_page_wrap {
-    background-image: none;
-   }</code>
-Choose your own background color in Admin panel > Appearance >Edit Theme > "Theme Settings" tab :{{:design:origin_page_background_change.png?300|}}
-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:
-<code>.ow_page_wrap {
-    background-image: none;
-    background-color: #A9F5F2;
-   }</code>
-Where #A9F5F2 - is desired color code.
-Result (default vs customized):
-{{:design:origin_backrgound_default.png?300|}} {{:design:origin_background.png?300|}}
-==== Canvas background color/image ====
-To change canvas background color add following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab:<code>.ow_bg_color {
-    background-color: #A9F5F2;
-}</code>
-Where #A9F5F2is desired color code.
-Result:
-{{:design:origin_canvas_backgroun.png?300|}}
-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:
-<code>
-.ow_bg_color{
-   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");} </code>
-Where  http:/sitename.com/ow_userfiles/themes/theme_image_29.png – is the URL copied earlier.
-==== Menu background color ====
-Add following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab:<code>
-.ow_menu_wrap {
-        background: none;
-        background-color:#A9F5F2;
-}</code>
-Where **#A9F5F2** is desired color code.
-Result:
-{{:design:origin_menu_background.png?300|}}
-==== Footer background color ====
-Add following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab:
-<code>.ow_footer {
-    background: none repeat scroll 0 0 #A9F5F2;
-} </code>
-Where **#A9F5F2** is desired color code.Result:
-{{:design:background_footer.png?300|}}

Oxwall Software Documentation

User Tools

Site Tools

Differences

Page Tools