GotoMy.Com's Styling Tutorial:  Step 2 Backgrounds

Step 1: 
Knowing were to find the style sheets.
    Site style Sheet
    Page style sheet

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

    In this section we will show you how you can edit your page backgrounds.
See step 1 if you do not know where to find your style sheets.
Here is a good page to help you with background option (http://www.w3schools.com/css/css_background.asp)

    Page
        Body / Main
        Top Toolbar
        Main Navbar
        My Navbar

    Widgets
    Widgets Titlebar

    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.
.top_app_nav_main { margin-top:20px; font-size:11px; font-family:Times New Roman; width:100%; color:white; background-color: transparent !Important; }
.top_app_nav_inner { margin-left:15px; float:left; }
.top_app_nav_inner a { color:white; text-decoration: none }

 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 */