Differences

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

--- design:howto [2013/12/24 11:07]
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.
-====Custom styles:====
-  - Upload your image in Admin panel > Appearance > Edit Theme > "Graphics" tab > copy the URL of upload image.
-  - Go to Admin panel > Appearance > Edit Theme > "CSS" tab.
-  - Copy/paste default styles (see above)into the "Edit CSS" box
-  - Now it is time for some fun! Edit and save pasted styles to include your image, custom color and etc.:  <code>
-.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;}
-</code>
-Where:
-  * **background: url**('http:link_to_your_upload_image_here.png') ({{:design:origin_site_panel_custom_image.jpg?20|}})- shows your uploaded image.
-  * **no-repeat**- tells that your background image should not be repeated.
-  * **#340404** ({{:design:color-code-340404.png?20|}}) -sets the color for the rest of the site panel not occupied by uploaded image.
-  * **border-bottom: 20px solid #E7AA37;** ({{:design:color-code-e7aa37.png?20|}})  sets the height, type and color of the bottom border.
-  * **height** - sets the height for your site panel.Make sure it is not smaller then height of your image.
-  * **ow_logo_wrap** {display:none;}- removes your site name from top left corner of site panel.
-Result on front end:
-{{:design:screenshot-23.png?300|}}
-===== 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: <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>
-Result (default vs customized):
-{{:design:origin_backrgound_default.png?300|}} {{:design:origin_background.png?300|}}
-==== Canvas background color ====
-Add following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab:<code>.ow_bg_color {
-    background-color: **#A9F5F2**;
-}</code>
-Where **#A9F5F2** is desired color code.
-Result:
-{{:design:origin_canvas_backgroun.png?300|}}
-==== 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