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/19 05:14] 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> | ||
| - | |||
| - | Default 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> | ||
| - | |||
| - | ====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 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> | ||
| - | |||
| - | Result: | ||
| - | |||
| - | {{:design:screenshot-23.png?300|}} | ||
| - | |||
| - | 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. | ||
| - | * **ow_logo_wrap** {display:none;}- removes your site name from top left corner of site panel. | ||
| - | |||
| - | ====More Examples:==== | ||
| - | |||
| - | Site Panel with your own text-logo | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ===== 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.1384838052.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
