This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
overview:custom_design [2013/12/25 04:36] Alia |
overview:custom_design [2013/12/25 05:24] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Design Customization ====== | + | ====== Design Customization ====== |
This manual describes basic custom changes applicable to Oxwall themes. | This manual describes basic custom changes applicable to Oxwall themes. | ||
Line 17: | Line 17: | ||
* Existing CSS styles - shows you default styles. | * 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". | * 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 ===== | ||
Line 94: | Line 92: | ||
Result: | Result: | ||
- | {{:design:console.png?300|}} | + | |
+ | {{:overview:console_final.png?300|}} | ||
To add image as a background: | To add image as a background: | ||
Line 279: | Line 278: | ||
<option value="ow_ic_write"> Write </option> </code> | <option value="ow_ic_write"> Write </option> </code> | ||
- | ===== Sign In Page===== | + | ===== Sign In ===== |
- | Available styles for sign in page 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. |
- | ====Background color/image==== | + | ====Form Background color/image==== |
To change background color add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab: | To change background color add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab: | ||
Line 291: | Line 290: | ||
| | ||
Where #A9F5F2- is desired color code. | Where #A9F5F2- is desired color code. | ||
- | |||
- | Result: | ||
- | {{:design:sign-in-custom-color.png?300|}} | ||
To add background image: | To add background image: | ||
Line 307: | Line 303: | ||
Result: | Result: | ||
+ | |||
{{:design:sign-in-custom-image.png?300| | {{: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 ====== | ===== Footer ====== | ||
====Background color/image==== | ====Background color/image==== | ||
Line 318: | Line 342: | ||
} </code> | } </code> | ||
- | Where **#A9F5F2** is desired color code.Result: | + | Where **#A9F5F2** is desired color code. |
To add footer background image: | To add footer background image: |