GotoMy

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

    Widgets
    Widgets Titlebar

Widgets:
If you do not know what we mean by our widgets please see this page to understand what they are. What is a widget For now we are only going to cover editing the background of the widgets. Widget styling is taken care with 2 classes (.RadDock_WIDGETNAME, .RadDock_WIDGETNAME .rdContent) Where WIDGETNAME is the name of the widget example .RadDock_Profile is the class for the profile widget, .RadDock_aboutme is for the about me widget, and so on. The main class wraps the whole widget. this includes it's title bar as well and the inner content. So if you want to put a border around the whole widget including the title bar you would add the border tags to this area. If you wanted to put the border on just the inner content then you would place it in the .radDock_WIDGETNAME .rdContent sub class. For basic styling all you need to edit is the inner content (.radDock_WIDGETNAME .rdContent ). As you will see later you can use the outer class to do things like hide the widget, and move it.

Here is a sample from the goeagles profile. As you will see I added the filter tags to give it some transparency. I also added the (.RadDock_idliketomeet a { color:White; }) to make the hyperlinks white. http://www.gotomy.com/users/goeagles/

/* IDLIKETOMEET START */
.RadDock_idliketomeet a { color:White; }
.RadDock_idliketomeet { margin:0 0 0 0; color:#000; font-family:'ms sans serif',sans-serif; text-align:left; filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70; }
/* inner content */
.RadDock_idliketomeet .rdContent{ color:white; background:transparent url('/users/goeagles/images/1.gif') repeat-y; overflow:visible; top:0px; /*brd*/ padding-bottom:0px; /*brd*/ font:11px/1.2 verdana, sans-serif;}
/* IDLIKETOMEET END */

If you have any questions please let me know.

Widget TitleBar:
The widget title bars can be edited from the site style page, or the individual style pages. If you do not know where to find these please see step 1. If you edit them from the site style page, all your titles will inherit these edits. The classes are ( .rdTitlebar, .rdTitlebar .rdTitle). the main class .rdTitlebar is the whole bar. you can edit the font, color, background, and so on. The sub class .rdTitle is the class the styles the properties of a div in the main title bar. You can edit this separately to make the width smaller, and even move to create a side image like I did on the vettsrule profile. http://www.gotomy.com/users/vettsrule/

Here is the main page styling I used to do this.

/* DEFAULT TITLE START */
.rdTitlebar{ height:auto; font-size:1.1em; line-height:2em; background:black url('/users/vettsrule/images/chevy_logo.gif') !important; border-style:none; }
.rdTitlebar .rdTitle{ margin-left:53px; padding-left:10px; height:auto; font-size:1.1em; line-height:2em; background: #d3d9e9 url('/users/vettsrule/images/tb.gif') repeat-x !important; font:bold 11px/24px 'ms sans serif',sans-serif; color:white;}
/* DEFAULT TITLE END */

As you can see from the page and from the code I put in an image for the main background of the Chevy logo. Then I moved the rdTitle section over 53px using the margin-left: tag. This is the width of the logo. So now you can see it as an Icon on the section. If you noticed I also moved the text over in the .rdTitle using the padding-left tag to make it look a little nicer. Now if you have gone to the page you will notice I made the about me title bar black. I did this to demonstrate how you can edit each widget separately. If you remember earlier the title bars are apart of the main widgets. So to edit them individually all you have to do is open the page style sheet that contains the widget you want to edit, and add the title bar class ( rdTitlebar ), and sub class ( .rdTitlebar .rdTitle ) sub classes of the widget you want to edit. For example to change the about me title bar you add these lines to the page style sheet.

.RadDock_aboutme .rdTitlebar{ height:auto; font-size:1.1em; line-height:2em; background:black url('/users/vettsrule/images/chevy_logo.gif') !important; border-style:none; }
.RadDock_aboutme .rdTitlebar .rdTitle{ padding-left:10px; margin-left:55px; height:auto; font-size:1.1em; line-height:2em; background:black !important; font:bold 11px/24px 'ms sans serif',sans-serif; color:white;}

This will override the setting in the site style sheet. Also for orginazation purposes and to work with our style editor coming soon you should add them under the /* About Me */ tag. and so on with all the widgets classes. So my end result will look like this.

UPDATE:
Adding image to the right add this tag to the widget you wish, and if you want all of the title bar to look the same just add it to the site style sheet.
.rdCommands { height:30px !important; padding-right:8px; height:auto; background:url(/users/titleimages/images/TitlebarHRight.gif) 100% 0 no-repeat infobackground; right:-2px; }

Sample at http://www.gotomy.com/users/titleimages/

before:
/* ABOUTME START */
.RadDock_aboutme { height:125px; margin:0 0 0 0; color:#000; font-family:'ms sans serif',sans-serif; text-align:left;}
/* inner content */
.RadDock_aboutme .rdContent{ background:transparent; border:solid 1px gray; overflow:visible; top:0px; height:125px; /*brd*/ padding-bottom:0px; /*brd*/ font:11px/1.2 verdana, sans-serif; }
/* ABOUTME END */

after:
/* ABOUTME START */
.RadDock_aboutme .rdTitlebar{ height:auto; font-size:1.1em; line-height:2em; background:black url('/users/vettsrule/images/chevy_logo.gif') !important; border-style:none; }
.RadDock_aboutme .rdTitlebar .rdTitle{ padding-left:10px; margin-left:55px; height:auto; font-size:1.1em; line-height:2em; background:black !important; font:bold 11px/24px 'ms sans serif',sans-serif; color:white;}
.RadDock_aboutme { height:125px; margin:0 0 0 0; color:#000; font-family:'ms sans serif',sans-serif; text-align:left;}
/* inner content */
.RadDock_aboutme .rdContent{ background:transparent; border:solid 1px gray; overflow:visible; top:0px; height:125px; /*brd*/ padding-bottom:0px; /*brd*/ font:11px/1.2 verdana, sans-serif; }
/* ABOUTME END */

1 last thing. You can hide the title bars with 1 tag like I did on the goeagles sample. All you have to do is add the visibility:hidden; tag to the .rdTitlebar class. You can follow the same rules above and either add that to all the widgets or selected ones.

If you have any questions please send me a message in our help section found by clicking on the help icon at the top right of the main pages.