GotoMy.Com's Styling Tutorial: Step 2 Backgrounds
Step 2:
Backgrounds
Page
Body / Main
Top Toolbar
Main Navbar
My Navbar
Widgets
Widgets Title bar
Step 3:
Widgets
Background
Additional Styling
Title
Bar
Placement
Optional Styling
Step 4:
My navbar
Background setting
Moving Inner menu
Menu Classes Info
Step 5:
Advanced option
Hiding title bar
Adding site images to title bar
Hiding widgets
Moving widgets
Page
Body / Main
Top Toolbar
Main Navbar
My Navbar
Body / Main:
All page
backgrounds is broken up into 2 section. The main background which
is normal for all pages, and our main section. This is the area
where your widgets go, navbar, and our navbar, and info at the top and
bottom. To edit the page background you need to edit the body tag (
body ), to
edit the main section you need to edit the
(.RadDock_main) class. If
you edit these classes in the site style sheet only the whole site will
look the same. If add them to each page style you can set each
page with a different background color. If you do this make sure
you remove these tags in the site style sheet.
Q: I want to have a color in my main
section, but I want it semi transparent.
A: You need to add filtering to the .RadDock_main
class.
.RadDock_main {
background:white !important; filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;
} . Change the # to set the % you want it to be transparent.
Q:
how do I set my background so it doesn't scroll?
A: add this
tag to you body class section. background-attachment: fixed
!important;
If you have any additional question click on the help icon in the upper
right of our normal pages, and send me your question. Thanks
Top Toolbar:
You can edit the top toolbar (
) on
your site to match your theme. To do this you must edit the
following classes.
/* main toobar start */
.toptoolbar_radtoolbar_main{ background: #006600 url('/users/goeagles/images/titbg.gif');
border-collapse: collapse; vertical-align: top; height:25px; }
.toptoolbar_radtoolbar_main a { font: normal 10px Arial,
Sans-serif; color:white; }
.toptoolbar_radtoolbar_main a:hover { font: normal 10px
Arial, Sans-serif; color:gray; }
/* main toobar end */
You can change the background color or image, fonts height, and
many other things. If there is something you wish to do and can't
figure it out send us a message.
Main Navbar:
The following classes are for the
main navbar container.
(.RadDock_SYSMENU, and
.RadDock_SYSMENU .rdContent)
Here is an example from the vettrule profile found at http://www.gotomy.com/users/vettsrule/
.RadDock_SYSMENU{background: transparent url('/users/vettsrule/images/tm.gif')!important;
height:48px; margin:0 0 0 0; color:#000; font-family:'ms sans
serif',sans-serif; text-align:left;}
/* inner content start */
.RadDock_SYSMENU .rdContent{ overflow:visible; top:0px; /*brd*/
padding-bottom:0px; /*brd*/ font:11px/1.2 verdana, sans-serif;}
/* inner content end */
As you can see you can put in a background image. height, and several other things. Inside this main class you can edit the locaion of the nabar, width, font, and so on. These classes are (.top_app_nav_main, .top_app_nav_inner, )
again example from the vettrule profile.
If there is something you wish to do and can't figure it out send us a message.
My Navbar:
The main classes for your nav bar are
the following:
(
.RadDock_menu , .RadDock_menu
.rdContent)
Here is an example from the vettrule profile found at http://www.gotomy.com/users/vettsrule/
/* menu dock start */
.RadDock_menu {background: red url('/users/vettsrule/images/try.gif')!important;
height:149px; margin:0 0 0 0; color:#000; font-family:'ms sans
serif',sans-serif; text-align:left;}
/* inner content start */
.RadDock_menu .rdContent{ overflow:visible; top:0px; /*brd*/
padding-bottom:0px; /*brd*/ font:11px/1.2 verdana, sans-serif;}
/* inner content end */