Differences

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

--- design:howto [2013/12/24 12:21]
Alia
+++ — (current)
@@ Line 1: / Line 1: @@
-This manual describes basic custom changes applicable to Oxwall themes.
-All changes are done using tools available in Oxwall's admin panel.
-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.
-===== Tools =====
-==== Graphics ====
-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.
-==== CSS ====
-Admin panel > Appearance > Edit Theme > "CSS" tab.
-  * 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:
-<code>.ow_site_panel {
-    background: none repeat scroll 0 0 #F4F4F4;
-    border-bottom: 1px solid #E5E5E5;
-    height: 41px;}</code>
-Available 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>
-====Сhanging background color====
-Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>
-.ow_site_panel {
-    background: none repeat scroll 0 0 #5882FA;}
-</code>
-Where #5882FA ( blue)- is desired color code.
-====Adding background image ====
-To add background image to site panel:
-  * 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 {
-   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}
-</code>
-Where  http:/sitename.com/ow_userfiles/themes/theme_image_29.png – is the URL copied earlier.
-====Removing site name ====
-Some themes, for example "Origin", have site name in top left corner.
-To remove it add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>
-.ow_logo_wrap {display:none;}
-</code>
-==== Changing height ====
-Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>
-.ow_site_panel { height: 300px;}
-</code>
-Where 300px - is desired height.
-=====Console=====
-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====
-To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>.ow_console_body {
-        background: #5882FA;}</code>
-Where #5882FA ( blue)- is desired color code.
-Result:
-{{:design:console.png?300|}}
-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_console_body {
-       background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");}</code>
-Where http:/sitename.com/ow_userfiles/themes/theme_image_29.png - is URL copied earlier.
-===== 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====
-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>
-Where #5882FA - is desired color code.
-====Adding 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>
-Where http:/sitename.com/ow_userfiles/themes/theme_image_29.png - is URL copied earlier.
-==== Changing font size ====
-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>
-Where 18px- is desired font size.
-===== Site-wide backgrounds: =====
-==== Page background color/image ====
-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 {
-    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|}}
-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:
-<code>.ow_page_wrap {
-    background-image: none;
-    background-color: #A9F5F2;
-   }</code>
-Where #A9F5F2 - is desired color code.
-Result (default vs customized):
-{{:design:origin_backrgound_default.png?300|}} {{:design:origin_background.png?300|}}
-==== Canvas background color/image ====
-To change canvas background color add following CSS in Admin panel > Appearance > Edit Theme > "CSS" tab:<code>.ow_bg_color {
-    background-color: #A9F5F2;
-}</code>
-Where #A9F5F2is desired color code.
-Result:
-{{:design:origin_canvas_backgroun.png?300|}}
-To add canvas 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_bg_color{
-   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");} </code>
-Where  http:/sitename.com/ow_userfiles/themes/theme_image_29.png – is the URL copied earlier.
-===== Site wide font family ======
-Available styles:
-<code>
-body, html {
-font-family: "Tahoma","Lucida Grande", "Verdana";
-color: #333; /** OW_Control type:color, section:2. Colors, key:textColor, label: - Text **/
-font-size: 13px;
-line-height: 18px;
-height: 100%;
-min-width: 1000px;} </code>
-To change font family used on your site
-  * Visit http://cssfontstack.com/ or any similar site. Find needed font, and copy font-stack string.Example: font-family: “Andale Mono”, AndaleMono, monospace .
-  * Add following CSS in Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>
-body, html {
-font-family: “Andale Mono”, AndaleMono, monospace;} </code>
-===== 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");
-}</code>
-Where:
-  * ow_ic_warning – is class name of the icon you wish to change ( see the list of icons given bellow to find out the class name).
-  * http:/sitename.com/ow_userfiles/themes/theme_image_29.png – URL you have copied earlier.
-Result ( default icon vs custom one):
-{{:design:widget_default.png?300|}} {{:design:widget_custom.png?300|}}
-List of available icons and their class names:
-<code><option value="ow_ic_add"> Add </option>
-<option value="ow_ic_aloud"> Aloud </option>
-<option value="ow_ic_app"> App </option>
-<option value="ow_ic_attach"> Attach </option>
-<option value="ow_ic_birthday"> Birthday </option>
-<option value="ow_ic_bookmark"> Bookmark </option>
-<option value="ow_ic_calendar"> Calendar </option>
-<option value="ow_ic_cart"> Cart </option>
-<option value="ow_ic_chat"> Chat </option>
-<option value="ow_ic_clock"> Clock </option>
-<option value="ow_ic_comment"> Comment </option>
-<option value="ow_ic_cut"> Cut </option>
-<option value="ow_ic_dashboard"> Dashboard </option>
-<option value="ow_ic_delete"> Delete </option>
-<option value="ow_ic_down_arrow"> Down arrow </option>
-<option value="ow_ic_edit"> Edit </option>
-<option value="ow_ic_female"> Female </option>
-<option value="ow_ic_file"> File </option>
-<option value="ow_ic_files"> Files </option>
-<option value="ow_ic_flag"> Flag </option>
-<option value="ow_ic_folder"> Folder </option>
-<option value="ow_ic_forum"> Forum </option>
-<option value="ow_ic_friends"> Friends </option>
-<option value="ow_ic_gear_wheel"> Gear wheel </option>
-<option value="ow_ic_help"> Help </option>
-<option value="ow_ic_heart"> Heart </option>
-<option value="ow_ic_house"> House </option>
-<option value="ow_ic_info"> Info </option>
-<option value="ow_ic_key"> Key </option>
-<option value="ow_ic_left_arrow"> Left arrow </option>
-<option value="ow_ic_lens"> Lens </option>
-<option value="ow_ic_link"> Link </option>
-<option value="ow_ic_lock"> Lock </option>
-<option value="ow_ic_mail"> Mail </option>
-<option value="ow_ic_male"> Male </option>
-<option value="ow_ic_mobile"> Mobile </option>
-<option value="ow_ic_moderator"> Moderator </option>
-<option value="ow_ic_monitor"> Monitor </option>
-<option value="ow_ic_move"> Move </option>
-<option value="ow_ic_music"> Music </option>
-<option value="ow_ic_new"> New </option>
-<option value="ow_ic_ok"> Ok </option>
-<option value="ow_ic_online"> Online </option>
-<option value="ow_ic_picture"> Picture </option>
-<option value="ow_ic_plugin"> Plugin </option>
-<option value="ow_ic_push_pin"> Push pin </option>
-<option value="ow_ic_reply"> Reply </option>
-<option value="ow_ic_right_arrow"> Right arrow </option>
-<option value="ow_ic_rss"> Rss </option>
-<option value="ow_ic_save"> Save </option>
-<option value="ow_ic_script"> Script </option>
-<option value="ow_ic_server"> Server </option>
-<option value="ow_ic_star"> Star </option>
-<option value="ow_ic_tag"> Tag </option>
-<option value="ow_ic_trash"> Trash </option>
-<option value="ow_ic_unlock"> Unlock </option>
-<option value="ow_ic_up_arrow"> Up arrow </option>
-<option value="ow_ic_update"> Update </option>
-<option value="ow_ic_user"> User </option>
-<option value="ow_ic_video"> Video </option>
-<option selected="selected" value="ow_ic_warning"> Warning </option>
-<option value="ow_ic_write"> Write </option> </code>
-===== Footer ======
-====Changing background color/image====
-To change background color add following CSS in  Admin panel > Appearance > Edit Theme > “CSS” tab:
-<code>.ow_footer {
-    background: none repeat scroll 0 0 #A9F5F2;
-} </code>
-Where **#A9F5F2** is desired color code.Result:
-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_footer {
-   background:url("http:/sitename.com/ow_userfiles/themes/theme_image_29.png");} </code>

Oxwall Software Documentation

User Tools

Site Tools

Differences

Page Tools