User Tools
design:howto
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
design:howto [2013/11/18 13:08] Alia |
— (current) | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Site Panel ===== | ||
| - | |||
| - | Site panel is a narrow gray line at the top of your site. | ||
| - | This example describes how to add your custom image to the site panel, change it's height,background color and some other small tweaks. | ||
| - | |||
| - | {{:design:origin_defailt_site_panel.png?300|}} | ||
| - | |||
| - | Default styles:<code>.ow_site_panel { | ||
| - | background: none repeat scroll 0 0 #F4F4F4; | ||
| - | border-bottom: 1px solid #E5E5E5; | ||
| - | height: 41px; | ||
| - | }</code> | ||
| - | |||
| - | |||
| - | Adding custom image: | ||
| - | - 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 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; | ||
| - | }</code> | ||
| - | |||
| - | Where: | ||
| - | **no-repeat** tells that your background image should not be repeated. | ||
| - | |||
| - | **#340404** sets the color for the rest of the site panel which is not occupied by your image. | ||
| - | |||
| - | **border-bottom: 20px solid #E7AA37;** sets the height, type and color of the bottom border. | ||
| - | |||
| - | |||
| - | {{:design:screenshot-23.png?300|}} | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== Changing Background: ===== | ||
| - | |||
| - | ==== Page background color ==== | ||
| - | |||
| - | - 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|}} | ||
| - | |||
| - | 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|}} | ||
design/howto.1384780094.txt.gz · Last modified: 2015/09/15 09:10 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 3.0 Unported
