User Tools

Site Tools


overview:custom_design

Differences

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

Link to this comparison view

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:
overview/custom_design.1387946202.txt.gz · Last modified: 2015/09/15 09:10 (external edit)