GotoMy

Widgets: If you would like to know what a widget is click here. This basically explains what they are, and give a simple preview of what is to come. This section will cover Editing the background, colors, the title bar, placement, and additional options each one has that is different.

    Background
    Additional Styling
    Title Bar
    Placement (moving their location, and hiding widgets)
    Optional Styling
        Profile
        My Interests
        My Comments
        My NavBar

Background:
This is cover in under Step 2: Widgets (click here)

    Additional Styling:
        To edit additional styling properties must be done from the widgets class and edit the .rdcontent sub class. You can edit all aspects of the font from here.
        Examples of different tags.
        Text: .RadDock_NAMEOFWIDGET .rdContent{ color:white; font-size:11px; font-family:verdana, sans-serif;text-align:left;}

            Border Colors: This adds borders to your widgets, you can set color, width, type (solid, dashed, ect..), and location
Example: .RadDock_NAMEOFWIDGET .rdContent{ color:white; font-size:11px; font-family:verdana, sans-serif;text-align:left; border:solid 1px gray;} ( this example sets all the borders the same. ) To set the different sides diffrently add the side you want to the tag. (border-left:solid 1px black; border-right:solid 1px gray; border-top:solid 1px gray; border-bottom:solid 1px red; )

        Padding: The adds padding inside the content area and pushed the text away from the site you are padding. Add this to the .rdcontent sub class. padding-left:3px; padding-right:3px; padding-top:3px; padding-bottom:3px; to do all the same you can just add padding:3px;

    hyper links: This is a little different because you have to use the hyperlinks own styling class. To do this you add (a) at the end of the sub class you want to edit. So if you wanted to change the color of the hyper links in that profile widget you add this tag to your style sheet.

        .RadDock_profile .rdContent a { color:white; } (this will change the links to white.)
To set the hyper link hover properties you would add this.
    .RadDock_profile .rdContent a:hover{ color:gray; } (this will change the visited links to gray.)
Here is a list of the other attributes you can add.
    a:active, a:link, a:visited
You can also change background color of the text using these tags.

    Title Bar:
        These classes, and background styling was covered in the background section. For a recap there are 2 classes. They are also sub classes of the individual widget classes.
        Classes: (.rdtitlebar, rdtitlebar .rdtitle)
        To add them to the individual widgets just add them to the widgets you want to edit as sub classes of that widget like so:
        .RadDock_WIDGETNAME .rdtitlebar { your styling tags go here }
        .RadDock_WIDGETNAME .rdtitlebar .rdTitle { your styling tags go here } You should add you additional styling here. except when you want to hide the title bar. Follow the same rules above for editing the fonts, border and so on.

To hide the title bar add the visible:hidden; tag to the main class .rdtitle like this
.RadDock_WIDGETNAME .rdtitlebar { visible:hidden; }

Again if you have any question send me a message from the help section found by click on the help icon.

Placement:
Ok.. This will show you how to move the widget around from where they are at using just the css formatting and it will work fine, but note: anyone that does this will not be able to drag and drop show at (widget function coming) them right with out removing these edits.

        1st you must edit these options in the main widget class of each widget ( .RadDock_WIDGETNAME )
        To hide the entire widget add the visible:hidden; tag like so (.RadDock_WIDGETNAME {visible:hidden;}) This will hide the whole widget including the title bar. So there is no need to put that tag in the title class. In fact to speed up your page and make the style sheets smaller you can remove everything else in the class and delete the .rdcontent sub class.
        To move the widget up and down you use the (top) tag. This moves in pixels on the screen up and down. So if you wanted to move the about me Widget down you would edit it like this.

.RadDock_aboutme { top:-30px; margin:0 0 0 0; font-family:'ms sans serif',sans-serif; text-align:left; }
This moves the widget down 30pxs on the screen.
to move it up you would put in top:30px; and so on. repeat the process for each widget till you get the look you want.

To move it from side to side you use the (left) tag. Same principle as the top tag. - #s moves it closer to the left, and +#s moves it farther from the left.

Here is a sample profile I have modified the widget using the class info we discussed here.
http://www.gotomy.com/users/movingwidgets/

P.S. You can move you navbar the same way as other widgets since it is wrapped in a widget.

    Optional Styling: (coming soon)
        Some of the widgets have additional classes for styling the content in them.
        These are:
                    Profile
                    My Interests
                    My Comments
                    My NavBar
                    System Navbar

        Profile:
            .main_profile { background:transparent;}
                .main_profile .screenname { background:transparent;}
                .main_profile .information { background:transparent;}
                .main_profile .head_line { background:transparent;}
                .main_profile .gender { background:transparent;}
                .main_profile .age { background:transparent;}
                .main_profile .location { background:transparent;}
                .main_profile .status { background:transparent;}
                .main_profile .information_title { background:transparent;}
                .main_profile .image_space { cursor:pointer;}
                .main_profile .bottom {float:left; width:100%; background:transparent;} /* this is the row that the pics and video is on */
                .main_profile .view_pics { float:left; width:50px; cursor:pointer; }
                .main_profile .view_pics_title { float:left; width:60px; margin-top:5px; }
                .main_profile .view_video { float:left; width:50px; }
                .main_profile .video_title { float:left; width:60px; margin-top:5px; }

        My Interest:
            .my_interest .title {font-size:11px; font-family:Arial; width:120px;}
            .my_interest .general_row { vertical-align:top; }
            .my_interest .music_row { vertical-align:top; }
            .my_interest .movies_row { vertical-align:top; }
            .my_interest .television_row { vertical-align:top; }
            .my_interest .books_row { vertical-align:top; }
            .my_interest .heroes_row { vertical-align:top; }

My Comments:
div.comments { background: #dddddd; border: solid 0px #e5e5e5; font: normal 11px Arial, Verdana, Sans-serif; text-align: left; }
.GridRow_comments td,
.GridAltRow_comments td { padding: 0px; border-top: solid 1px black; }
.comments_top { background-color:#dddddd; height:25px; }
.comments_top a { color:black; }
.comments_bottom { background-color:#dddddd; height:25px; border-top: solid 1px black;}
.comments_bottom a { color:black; }
.comment_text { color:black; }
.comment_text a { color:black; }
.comment_profile { background-color:#dddddd; color:black; border-right:solid 1px white; }

My Navbar:
.RadMenu_menu { background:gray; filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80; }
.RadMenu_menu_Context { background:none; }
.RadMenu_menu .link { text-decoration:none; color: white; line-height: 20px; }
.RadMenu_menu .link .text { padding-right: 20px; cursor:pointer; }
.RadMenu_menu .link:hover,
.RadMenu_menu .focused,
.RadMenu_menu .expanded
{ background:black; border-bottom:none; border-top:none; color: white; }
.RadMenu_menu .link:hover .text,
.RadMenu_menu .focused .text,
.RadMenu_menu .expanded .text
{ border-top: 1px solid #1B2B84; }
.RadMenu_menu .rootGroup .disabled:hover { border-bottom:none; border-top:none; }
.RadMenu_menu .rootGroup .disabled:hover .text { border-top: 1px solid #a7cfe8; }
.RadMenu_menu .text { padding: 0px 15px; font-size: 11px; }
.RadMenu_menu .group { background: #15572A; border: 0px; }
.RadMenu_menu .group .link { background: #15572A; border: solid 1px #bfcde3; border-top-color: #15572A; text-align: left; padding-right: 0px; }
.RadMenu_menu .group .text { padding-left:6px; padding-right: 40px; }
.RadMenu_menu .group .link:hover,
.RadMenu_menu .group .focused,
.RadMenu_menu .group .expanded
{ background: #759580; border-bottom: 1px solid #15572A; border-top: 1px solid white; font-weight: normal; }
.RadMenu_menu .group .link:hover .text,
.RadMenu_menu .group .focused .text,
.RadMenu_menu .group .expanded .text
{ border-top: 0; }
.RadMenu_menu .leftArrow,
.RadMenu_menu .rightArrow,
.RadMenu_menu .topArrow,
.RadMenu_menu .bottomArrow,
.RadMenu_menu .leftArrowDisabled,
.RadMenu_menu .rightArrowDisabled,
.RadMenu_menu .topArrowDisabled,
.RadMenu_menu .bottomArrowDisabled
{ border-left: 1px solid #bfcde3; border-right: 1px solid #bfcde3; background: #a7cfe8 url('/_static/themes/perkasie/menu/img/left.gif') center center no-repeat; width:15px; }
.RadMenu_menu .topArrow,
.RadMenu_menu .topArrowDisabled
{ background-image:url('/_static/themes/perkasie/menu/img/top.gif'); width: 100%; }
.RadMenu_menu .bottomArrow,
.RadMenu_menu .bottomArrowDisabled
{ background-image:url('/_static/themes/perkasie/menu/img/bottom.gif'); width: 100%;}
.RadMenu_menu .rightArrow,
.RadMenu_menu .leftArrow
{ height:100%; }
.RadMenu_menu .rightArrow,
.RadMenu_menu .rightArrowDisabled
{ background-image:url('/_static/themes/perkasie/menu/img/right.gif'); }
.RadMenu_menu .vertical .separator .text { background: #d4e5eb; font-size:1px; padding-top: 2px; border-left: solid 1px #bfcde3; border-right: solid 1px #bfcde3; }
.RadMenu_menu .expandLeft,
.RadMenu_menu .expandRight
{ background:transparent url(/_static/themes/perkasie/menu/img/groupImage.gif) right center no-repeat; margin: 0px; }
.RadMenu_menu_rtl .group .link:hover .expandLeft,
.RadMenu_menu_rtl .group .link:hover .expandRight
{ background:transparent url(/_static/themes/perkasie/menu/img/left.gif) left center no-repeat; margin: 0px 1px; padding-left: 8px;}
.RadMenu_menu_rtl .expandLeft,
.RadMenu_menu_rtl .expandRight
{ background:transparent url(/_static/themes/perkasie/menu/img/groupImageRTL.gif) left center no-repeat; }
.RadMenu_menu .link:hover .expandLeft,
.RadMenu_menu .link:hover .expandRight,
.RadMenu_menu .focused .expandLeft,
.RadMenu_menu .focused .expandRight,
.RadMenu_menu .expanded .expandLeft,
.RadMenu_menu .expanded .expandRight
{ background:transparent url(/_static/themes/perkasie/menu/img/invertedGroupImage.gif) right center no-repeat; }

System Navbar:
.top_app_nav_main { margin-top:125px; font-size:11px; font-family:Times New Roman; width:100%; background:transparent; color:white; }
.top_app_nav_inner { margin-left:10px;float:left; }
.top_app_nav_inner a { color:white; text-decoration: none }