Differences

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

--- overview:custom_design [2013/12/25 04:27]
Alia created
+++ overview:custom_design [2013/12/25 05:24] (current)
@@ Line 1: / Line 1: @@
+====== Design Customization ======
 This manual describes basic custom changes applicable to Oxwall themes.
-All changes are done using tools available in Oxwall's admin panel.
+All changes are done using tools available in Oxwall's admin panel and will not be erased by software and/or theme updates.
 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.
@@ Line 8: / Line 11: @@
 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.
+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 ====
@@ Line 14: / Line 17: @@
   * 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:
@@ Line 29: / Line 26: @@
     height: 41px;}</code>
-Available styles for site name within site panel :
+Available styles for site name within site panel:
 <code>.ow_logo_wrap {
         width: 1000px;
@@ Line 43: / Line 39: @@
         text-decoration: none;}</code>
-====Сhanging background color====
+====Background color====
-Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
+To change background color of site panel add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
 <code>
@@ Line 54: / Line 50: @@
 Where #5882FA ( blue)- is desired color code.
-====Adding background image ====
+====Background image ====
-To add background image to site panel:
+To add background image to site panel instead of using background color:
   * 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 {
@@ Line 70: / Line 65: @@
 ====Removing site name ====
-Some themes, for example "Origin", have site name in top left corner.
+Some themes, for example "Origin", have site name in top left corner of site panel.
-To remove it add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
+To remove site name add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
 <code>
 .ow_logo_wrap {display:none;}
@@ Line 77: / Line 72: @@
 ==== Changing height ====
 Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
 <code>
 .ow_site_panel { height: 300px;}
@@ Line 90: / Line 83: @@
 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====
+====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>
@@ Line 101: / Line 93: @@
 Result:
-{{:design:console.png?300|}}
+{{:overview:console_final.png?300|}}
 To add image as a background:
@@ Line 113: / Line 105: @@
 ===== 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====
+==== 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>
@@ Line 124: / Line 114: @@
 Where #5882FA - is desired color code.
-====Adding background image====
+====Background image====
 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_menu_wrap {
        background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}</code>
@@ Line 135: / Line 124: @@
 ==== Changing font size ====
+To change font size used for main menu add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
-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>
@@ Line 145: / Line 133: @@
 ==== Page background color/image ====
+If your theme has an image as a background, you can disable default background image by adding following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab:
-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 {
+<code>.ow_page_wrap {
     background-image: none;
    }</code>
@@ Line 152: / Line 140: @@
 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:
+If your theme doesn't allow to set background in admin panel set your own background color using following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab:
 <code>.ow_page_wrap {
     background-image: none;
@@ Line 210: / Line 197: @@
 ===== Widgets ======
 ==== Adding custom widget icons====
 To replace default widget icon by custom one:
   * Upload your image in Admin panel > Appearance > Edit Theme > “Graphics” tab > copy the URL of  upload image.
   * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
 <code>
 html body div .ow_ic_warning {background-image: url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");
@@ Line 293: / Line 278: @@
 <option value="ow_ic_write"> Write </option> </code>
-===== Sign In Page=====
+===== Sign In =====
-Available styles for console are located under /* ---- SignIn Form styles ---- */ section of the “Existing CSS Styles” form in Admin panel > Appearance > Edit Theme > “CSS” tab.
+Available styles for sign in form are located under /* ---- SignIn Form styles ---- */ section of the “Existing CSS Styles” form in Admin panel > Appearance > Edit Theme > “CSS” tab.
-To change
+====Form Background color/image====
-====Changing background color/image====
 To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
@@ Line 307: / Line 291: @@
 Where #A9F5F2- is desired color code.
-Result:
+To add background image:
-{{:design:sign-in-custom-color.png?300|}}
-To add footer 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_sign_in_wrap form {
@@ Line 327: / Line 306: @@
 {{:design:sign-in-custom-image.png?300|
 }}
+====Page Background color/image====
+To change background color of the whole sign in page add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
+<code>
+.ow_sign_in_cont {
+    background: none repeat scroll 0 0 #FFFFFF;
+} </code>
+Where #FFFFFF (white) - is desired color code
+To add 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_sign_in_cont {
+background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png") repeat;
+}
+</code>
+Where http:/sitename.com/ow_userfiles/themes/theme_image_29.png - is URL copied earlier.
+Result:
+{{:overview:sign-in-page-background.png?300|}}
 ===== Footer ======
-====Changing background color/image====
+====Background color/image====
 To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
@@ Line 336: / Line 342: @@
 } </code>
-Where **#A9F5F2** is desired color code.Result:
+Where **#A9F5F2** is desired color code.
 To add footer background image:

Oxwall Software Documentation

User Tools

Site Tools

Differences

Page Tools