Change color around imageUrl on radMenu Item

8 posts, 1 answers
  1. Dondi
    Dondi avatar
    5 posts
    Member since:
    Aug 2011

    Posted 10 Aug 2011 Link to this post

    Telerik Gurus:

    I have been  able to almost perfectly style a radMenu that I am working on with the exception of the space above and below the left image on each item.  It is showing light gray and I want it to be dark gray like the rest of the line.  (See enclosed pic.)  I am using the Default skin and RadControls for ASP.NET AJAX Q1 2011 SP2.  The following is my .css file.  What am I missing?

    Thanks in advance for your help!
    Dondi

    /* <RadMenu / Default> */
    .RadMenu_Default .rmRootGroup,
    .RadMenu_Default a.rmLink,
    .RadMenu_Default .rmGroup .rmText,
    .RadMenu_Default .rmVertical .rmText,
    .RadMenu_Default .rmLeftArrow,
    .RadMenu_Default .rmRightArrow,
    .RadMenu_Default .rmTopArrow,
    .RadMenu_Default .rmBottomArrow
    {
     background-image: url('../Images/Menu/rmSprite.png');
     background-color: transparent;
    }

    .RadMenu_Default .rmRootGroup
    {
     border: 1px solid #828282;
     background-repeat: repeat-x;
     background-position: 0 -408px;
     background-color: #e6e6e6;
    }

    /* <Root items> */

    .RadMenu_Default,
    .RadMenu_Default a.rmLink
    {
     font: normal 12px/23px "Segoe UI", Arial, sans-serif;
     color: #000;
     text-decoration: none;
    }

    .RadMenu_Default a.rmLink,
    .RadMenu_Default a.rmDisabled,
    .RadMenu_Default a.rmDisabled:hover
    {
     background-position: 0 -72px;
    }

    .RadMenu_Default .rmFirst a.rmLink,
    .RadMenu_Default .rmFirst a.rmLink:hover,
    .RadMenu_Default .rmLast .rmText,
    .RadMenu_Default .rmLast a.rmLink:hover .rmText,
    .RadMenu_Default .rmVertical a.rmLink,
    .RadMenu_Default .rmVertical .rmText
    {
     background-repeat: no-repeat;
     background-position: 0 500px;
    }

    .RadMenu_Default .rmVertical .rmFirst,
    .RadMenu_Default .rmVertical .rmLast
    {
     background: none;
    }

    .RadMenu_Default a.rmLink:hover,
    .RadMenu_Default a.rmFocused,
    .RadMenu_Default a.rmSelected
    {
     background-color: #fff;
    }

    .RadMenu_Default .rmHorizontal .rmRootLink span.rmText
    {
     display: inline;
     padding-left: 12px;
    }

    .RadMenu_Default_rtl .rmRootLink span.rmText
    {
        padding-right: 12px;
    }

    .RadMenu_Default_Context_rtl .rmRootLink span.rmText
    {
        padding-right: 28px;
    }

    .RadMenu_Default .rmHorizontal a.rmRootLink
    {
     padding-left: 0;
    }

    .RadMenu_Default_rtl a.rmRootLink
    {
        margin-left: 0;
        padding: 0;
    }

    .RadMenu_Default .rmHorizontal .rmItem > a.rmRootLink /* IE6 doesn't like width: 100% on its items. */
    {
     width: 100%;
    }

    /*.RadMenu_Default ul.rmVertical .rmLeftImage
    {
     margin: 4px -4px 0 6px;
     background-color:Red;
    }

    .RadMenu_Default_rtl ul.rmVertical .rmLeftImage
    {
     margin: 4px 6px 0 -4px;
     background-color:Red;
    }
    */

    .RadMenu_Default .rmVertical a.rmLink
    {
     padding-top: 1px;
     padding-bottom: 1px;
    }

    .RadMenu_Default .rmVertical a.rmLink:hover,
    .RadMenu_Default .rmVertical a.rmFocused,
    .RadMenu_Default .rmVertical a.rmSelected,
    .RadMenu_Default .rmVertical a.rmExpanded,
    .RadMenu_Default .rmVertical a.rmExpanded:hover
    {
     padding-top: 0;
     padding-bottom: 0;
     border-style: solid;
     border-color: #828282;
     border-width: 1px 0;
    }

    .RadMenu_Default .rmVertical .rmFirst a.rmLink:hover,
    .RadMenu_Default .rmVertical .rmFirst a.rmFocused,
    .RadMenu_Default .rmVertical .rmFirst a.rmSelected,
    .RadMenu_Default .rmVertical .rmFirst a.rmExpanded,
    .RadMenu_Default .rmVertical .rmFirst a.rmExpanded:hover
    {
     padding-top: 1px;
     padding-bottom: 0;
     border-top-width: 0;
    }

    .RadMenu_Default .rmVertical .rmLast a.rmLink:hover,
    .RadMenu_Default .rmVertical .rmLast a.rmFocused,
    .RadMenu_Default .rmVertical .rmLast a.rmSelected,
    .RadMenu_Default .rmVertical .rmLast a.rmExpanded,
    .RadMenu_Default .rmVertical .rmLast a.rmExpanded:hover
    {
     padding-bottom: 1px;
     padding-top: 0;
     border-bottom-width: 0;
    }

    .RadMenu_Default .rmVertical .rmItem a.rmDisabled:hover
    {
     padding-top: 1px;
     padding-bottom: 1px;
     border-width: 0;
    }

    .RadMenu_Default a.rmExpanded,
    .RadMenu_Default a.rmExpanded:hover
    {
     background-color: #fff;
    }

    .RadMenu_Default a.rmDisabled,
    .RadMenu_Default a.rmDisabled:hover
    {
     color: #7d7d7d;
     background-color: transparent;
    }

    /* </Root items> */
    /*.RadMenu_DealEdit .rmRootGroup
    {
        background-color:Blue;
    }*/

    /* <Submenu items> */

    .RadMenu_Default .rmGroup,
    .RadMenu_Default .rmMultiColumn,
    .RadMenu_Default .rmGroup .rmVertical
    {
     border: 1px solid #979797;
     background: #fff url('../Images/Menu/rmVSprite.png') repeat-y 0 0;
    }

    .RadMenu_Default .rmTopFix,
    .RadMenu_Default .rmBottomFix,
    .RadMenu_Default .rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_Default .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
    .RadMenu_Default .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
    .RadMenu_Default .rmRoundedCorners ul.rmHorizontal .rmFirst,
    .RadMenu_Default_Context.rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_Default_Context.rmRoundedCorners ul.rmHorizontal .rmFirst
    {
     /*Controls background to rmGroup*/
     background-image: url('../Images/Menu/rmVSprite.png');
     background-color: #565656;
     background-repeat: repeat-y;
    }

    * html .rmRoundedCorners_Default .rmGroup .rmItem,
    * html .rmRoundedCorners_Default ul.rmHorizontal .rmFirst
    {
     background-image: url('../Images/Menu/rmVSprite.png');
     background-color: #565656;
     background-repeat: repeat-y;
    }

    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer .rmGroup,
    .RadMenu_Default .rmRoundedCorners .rmScrollWrap .rmItem,
    .RadMenu_Default .rmRoundedCorners .rmGroupColumn .rmItem,
    .RadMenu_Default .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,
    .RadMenu_Default .rmRoundedCorners .rmHorizontal .rmItem,
    .RadMenu_Default .rmRoundedCorners .rmScrollWrap .rmVertical,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrap .rmItem,
    .RadMenu_Default_Context.rmRoundedCorners .rmHorizontal .rmItem,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrap .rmVertical
    {
     background-image: none;
    }

    * html .rmRoundedCorners_Default .rmScrollWrapContainer .rmGroup,
    * html .rmRoundedCorners_Default .rmScrollWrap .rmItem,
    * html .rmRoundedCorners_Default .rmHorizontal .rmItem,
    * html .rmRoundedCorners_Default .rmScrollWrap .rmVertical
    {
     background-image: none;
    }

    .RadMenu_Default .rmRoundedCorners .rmGroupColumn
    {
     background-color: #fff;
    }

    .RadMenu_Default .rmBottomLeft,
    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer,
    .RadMenu_Default_Context.rmRoundedCorners ul.rmGroup,
    .RadMenu_Default .rmRoundedCorners ul.rmGroup,
    .RadMenu_Default .rmRoundedCorners .rmMultiColumn
    {
     background-image:  url('../Images/Menu/rmRoundedLeft.png');
     background-color: transparent;
     background-repeat: no-repeat;
    }

    * html .rmRoundedCorners_Default .rmScrollWrapContainer,
    * html .rmRoundedCorners_Default .rmGroup ul.rmGroup,
    * html .rmRoundedCorners_Default ul.rmGroup
    {
     /*far left of menu box*/
     /*background-image:  url('../Images/Menu/rmRoundedLeft.png');*/
     background-color: transparent;
     background-repeat: no-repeat;
    }

    .RadMenu_Default .rmTopRight,
    .RadMenu_Default .rmBottomRight
    {
        /*far right of menu box*/
     /*background-image:  url('../Images/Menu/rmRoundedRight.png');*/
     background-color: transparent;
     background-repeat: no-repeat;
    }

    .RadMenu_Default .rmTopFix,
    .RadMenu_Default .rmBottomFix,
    .RadMenu_Default .rmRoundedCorners .rmGroup .rmFirst,
    .RadMenu_Default_Context.rmRoundedCorners .rmGroup .rmFirst,
    .rmRoundedCorners_Default .rmGroup .rmFirst
    {
     border-color: #979797;
    }

    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix
    {
     background: #FFF;
    }

    * html .rmRoundedCorners_Default .rmScrollWrapContainer .rmTopFix,
    * html .rmRoundedCorners_Default .rmScrollWrapContainer .rmBottomFix
    {
     background: #FFF;
    }

    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow
    {
     background-color: #FFF;
     border: 0;
    }

    * html .rmRoundedCorners_Default .rmScrollWrapContainer .rmTopArrow,
    * html .rmRoundedCorners_Default .rmScrollWrapContainer .rmBottomArrow,
    * html .rmRoundedCorners_Default .rmScrollWrapContainer .rmLeftArrow,
    * html .rmRoundedCorners_Default .rmScrollWrapContainer .rmRightArrow
    {
     background-color: #FFF;
     border: 0;
    }

    .RadMenu_Default_rtl .rmBottomLeft,
    .RadMenu_Default_rtl .rmRoundedCorners ul.rmGroup,
    .RadMenu_Default_rtl .rmRoundedCorners .rmMultiColumn,
    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer,
    .RadMenu_Default .rmScrollWrapContainer .rmBottomLeft,
    .rmRoundedCorners.RadMenu_Default_Context_rtl ul.rmGroup,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer
    {
     background-image: url('../Images/Menu/rmRoundedLeft_rtl.png');
    }

    .RadMenu_Default_rtl .rmTopRight,
    .RadMenu_Default_rtl .rmBottomRight
    {
     background-image: url('../Images/Menu/rmRoundedRight_rtl.png');
    }

    .RadMenu_Default_rtl li.rmTopFix,
    .RadMenu_Default_rtl li.rmBottomFix,
    .RadMenu_Default_rtl .rmRoundedCorners .rmGroup .rmItem,
    .rmRoundedCorners.RadMenu_Default_Context_rtl .rmGroup .rmItem
    {
     background-position: 101% 0;
    }

    .RadMenu_Default .rmSlide .rmScrollWrap
    {
     background-image: none;
    }

    .RadMenu_Default_rtl .rmGroup,
    .RadMenu_Default_rtl .rmMultiColumn,
    .RadMenu_Default_rtl .rmGroup .rmVertical
    {
     background-position: 100% 0;
     background-color: #565656;
    }

    .RadMenu_Default .rmRootGroup li.rmItem .rmGroup
    {
     padding-bottom: 0;
    }

    .RadMenu_Default .rmRootGroup .rmHorizontal
    {
     background-image: none;
    }

    .RadMenu_Default .rmScrollWrap .rmVertical
    {
     border: 0;
    }

    .RadMenu_Default .rmRoundedCorners .rmScrollWrapContainer li.rmItem,
    .RadMenu_Default_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,
    .rmRoundedCorners_Default .rmScrollWrapContainer li.rmItem
    {
     background: none;
    }

    .RadMenu_Default .rmGroup .rmItem a.rmLink,
    .RadMenu_Default .rmGroup .rmItem a.rmLink:hover,
    .RadMenu_Default .rmGroup .rmItem a.rmFocused,
    .RadMenu_Default .rmGroup .rmItem a.rmSelected,
    .RadMenu_Default .rmGroup .rmItem a.rmExpanded
    {
     /*Controls rmGroup when nothing selected*/
     padding-top: 0;
     padding-bottom: 0;
     border: 0;
     background-color: #828282;
    }

    .RadMenu_Default .rmGroup .rmLast a.rmLink,
    .RadMenu_Default .rmGroup .rmLast a.rmLink:hover,
    .RadMenu_Default .rmGroup .rmLast a.rmFocused,
    .RadMenu_Default .rmGroup .rmLast a.rmSelected,
    .RadMenu_Default .rmGroup .rmLast a.rmExpanded
    {
     padding-bottom: 1px;
    }

    .RadMenu_Default .rmGroup a.rmLink,
    .RadMenu_Default .rmGroup .rmText,
    .RadMenu_Default .rmGroup .rmItem a.rmDisabled,
    .RadMenu_Default .rmGroup .rmItem a.rmDisabled:hover,
    .RadMenu_Default .rmGroup .rmItem a.rmDisabled .rmText,
    .RadMenu_Default .rmGroup .rmItem a.rmDisabled:hover .rmText
    {
     background-position: 0 500px;
     background-repeat: no-repeat;
     background-color: transparent;
    }

    .RadMenu_Default .rmGroup a.rmLink:hover,
    .RadMenu_Default .rmGroup a.rmFocused,
    .RadMenu_Default .rmGroup a.rmSelected,
    .RadMenu_Default .rmGroup a.rmExpanded
    {
     background-position: 0 -168px;
    }

    .RadMenu_Default .rmGroup a.rmLink:hover .rmText,
    .RadMenu_Default .rmGroup a.rmFocused .rmText,
    .RadMenu_Default .rmGroup a.rmSelected .rmText,
    .RadMenu_Default .rmGroup a.rmExpanded .rmText
    {
     background-position: 100% -192px;
    }

    /* <expand arrows> */

    .RadMenu_Default .rmRootGroup .rmExpandRight,
    .RadMenu_Default .rmGroup .rmExpandDown,
    .RadMenu_Default_Context .rmGroup .rmExpandRight,
    .RadMenu_Default .rmRootGroup .rmItem a.rmDisabled .rmExpandRight,
    .RadMenu_Default .rmGroup .rmItem a.rmDisabled .rmExpandDown,
    .RadMenu_Default .rmRootGroup .rmItem a.rmDisabled:hover .rmExpandRight,
    .RadMenu_Default .rmGroup .rmItem a.rmDisabled:hover .rmExpandDown
    {
     background-position: 100% -216px;
    }

    .RadMenu_Default a.rmLink:hover .rmExpandRight,
    .RadMenu_Default .rmLast a.rmLink:hover .rmExpandRight,
    .RadMenu_Default a.rmFocused .rmExpandRight,
    .RadMenu_Default a.rmSelected .rmExpandRight,
    .RadMenu_Default a.rmExpanded .rmExpandRight
    {
     background-position: 100% -312px;
    }

    .RadMenu_Default .rmGroup a.rmLink:hover .rmExpandRight,
    .RadMenu_Default .rmGroup a.rmFocused .rmExpandRight,
    .RadMenu_Default .rmGroup a.rmSelected .rmExpandRight,
    .RadMenu_Default .rmGroup a.rmExpanded .rmExpandRight,
    .RadMenu_Default .rmGroup a.rmLink:hover .rmExpandDown,
    .RadMenu_Default .rmGroup a.rmFocused .rmExpandDown,
    .RadMenu_Default .rmGroup a.rmSelected .rmExpandDown,
    .RadMenu_Default .rmGroup a.rmExpanded .rmExpandDown
    {
     background-position: 100% -240px;
    }

    .RadMenu_Default .rmRootGroup a.rmDisabled:hover .rmExpandRight,
    .RadMenu_Default .rmGroup a.rmDisabled:hover .rmExpandDown
    {
     background-image: url('../Images/Menu/rmSprite.png');
     background-position: 100% -216px;
    }

    /* </expand arrows> */

    /* <rtl> */

    .RadMenu_Default_rtl a.rmLink,
    .RadMenu_Default_rtl .rmRootGroup a.rmDisabled
    {
     background-position: 100% -96px;
    }

    .RadMenu_Default_rtl .rmGroup a.rmDisabled
    {
     background: none;
    }

    .RadMenu_Default_rtl .rmText
    {
     background-position: 0 -96px;
    }

    .RadMenu_Default_rtl .rmVertical a.rmExpanded .rmText,
    .RadMenu_Default_rtl .rmVertical a.rmExpanded:hover .rmText
    {
     background-position: 0 500px;
     background-repeat: no-repeat;
    }

    .RadMenu_Default_rtl .rmGroup a.rmLink:hover,
    .RadMenu_Default_rtl .rmGroup a.rmFocused,
    .RadMenu_Default_rtl .rmGroup a.rmSelected,
    .RadMenu_Default_rtl .rmGroup a.rmExpanded
    {
     background-position: 100% -264px;
    }

    .RadMenu_Default_rtl .rmGroup a.rmLink:hover .rmText,
    .RadMenu_Default_rtl .rmGroup a.rmFocused .rmText,
    .RadMenu_Default_rtl .rmGroup a.rmSelected .rmText,
    .RadMenu_Default_rtl .rmGroup a.rmExpanded .rmText
    {
     background-position: 0 -288px;
    }

    .RadMenu_Default_Context_rtl .rmVertical .rmExpandLeft,
    .RadMenu_Default_rtl .rmRootGroup .rmExpandLeft
    {
     background-position: 0 -312px;
    }

    .RadMenu_Default_rtl .rmVertical a.rmLink:hover .rmExpandLeft,
    .RadMenu_Default_rtl .rmVertical a.rmFocused .rmExpandLeft,
    .RadMenu_Default_rtl .rmVertical a.rmSelected .rmExpandLeft,
    .RadMenu_Default_rtl .rmVertical a.rmExpanded .rmExpandLeft
    {
     background-position: 0 -216px;
    }

    .RadMenu_Default_rtl .rmGroup a.rmLink:hover .rmExpandLeft,
    .RadMenu_Default_rtl .rmGroup a.rmFocused .rmExpandLeft,
    .RadMenu_Default_rtl .rmGroup a.rmSelected .rmExpandLeft,
    .RadMenu_Default_rtl .rmGroup a.rmExpanded .rmExpandLeft
    {
     background-position: 0 -336px;
    }

    .RadMenu_Default_rtl .rmRootGroup a.rmDisabled:hover .rmExpandLeft
    {
     background-position: 0 -312px;
    }

    /* </rtl> */

    /* </Submenu items> */

    /* <Submenu offsets (Default - specific, overlapping submenus)> */

    .RadMenu_Default .rmSlide
    {
     margin: 0 0 0 -1px;
    }

    .RadMenu_Default .rmVertical .rmSlide,
    .RadMenu_Default .rmSlide .rmSlide,
    .RadMenu_Default_Context .rmGroup .rmSlide
    {
     margin: 0 0 0 -5px;
    }

    .RadMenu_Default_rtl .rmSlide
    {
     margin: 0 0 0 0;
    }

    .RadMenu_Default_rtl .rmFirst .rmSlide
    {
     margin-left: 1px;
    }

    .RadMenu_Default_rtl .rmVertical .rmSlide,
    .RadMenu_Default_rtl .rmSlide .rmSlide,
    .RadMenu_Default_Context_rtl .rmGroup .rmSlide
    {
     margin: 0 0 0 5px;
    }

    /* </Submenu offsets> */

    /* <Scrolling arrows> */

    .RadMenu_Default .rmLeftArrow,
    .RadMenu_Default .rmRightArrow
    {
     background-color: #E6E6E6;
    }

    .RadMenu_Default .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }
    .RadMenu_Default .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }

    .RadMenu_Default .rmTopArrow,
    .RadMenu_Default .rmBottomArrow,
    .RadMenu_Default .rmGroup .rmLeftArrow,
    .RadMenu_Default .rmGroup .rmRightArrow
    {
     background-color: #E6E6E6;
    }

    .RadMenu_Default .rmTopArrow { background-position: 50% -367px; border-bottom: 1px solid #828282; }
    .RadMenu_Default .rmBottomArrow { background-position: 50% -391px; border-top: 1px solid #828282; }

    /* </Scrolling arrows> */

    /* <Separators> */

    .RadMenu_Default .rmHorizontal .rmSeparator .rmText,
    .RadMenu_Default .rmVertical .rmHorizontal .rmSeparator .rmText
    {
     height: 22px;
     margin: 1px 0 0;
     width: 1px;
     background-color: #A8A8A8;
    }

    .RadMenu_Default_Context .rmSeparator .rmText,
    .RadMenu_Default .rmHorizontal .rmGroup .rmSeparator .rmText,
    .RadMenu_Default .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText
    {
     background-color: red;
     background-position: 0 -406px;
    }

    /* </Separators> */

    /* </RadMenu / Default> */

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 15 Aug 2011 Link to this post

    Hi Dondi,

    I tested the styles that you apply to the RadMenu control and indeed I get a white border when I apply an image to a menuItem (see the image before.png). I am not able to get the dark grey border that serves as a separator between the menu items. However, in order to remove the white one you could use the following css class selector (refer to the attached image - after.png):
    <style type="text/css">
            div.RadMenu .rmLeftImage
            {
                padding-bottom: 3px;
            }
        </style>

    All the best,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Dondi
    Dondi avatar
    5 posts
    Member since:
    Aug 2011

    Posted 15 Aug 2011 Link to this post

    Kate,

    THANK YOU SO MUCH!!!  I have been totally banging my head against the wall on this one!

    Take care and God bless you!
    Dondi
  4. Dondi
    Dondi avatar
    5 posts
    Member since:
    Aug 2011

    Posted 15 Aug 2011 Link to this post

    I thought I was good to go, but I spoke too soon.  While the light color lines between each item are now gone, there is a light colored line on the left on the line that frames the whole grouping.  See attached pic.  Any ideas?

    Thank you in advance!
    Dondi
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Aug 2011 Link to this post

    Hello Dondi,

    I can not get the appearance that you provide in the image file. Can you please paste the markup of the RadMenu here, so I can try to reproduce the issue that you encounter?

    All the best,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Dondi
    Dondi avatar
    5 posts
    Member since:
    Aug 2011

    Posted 16 Aug 2011 Link to this post

    Kate,

    The markup is as follows:

    <td align="left" valign="top" style="background-color: transparent; border-color: Black; height: 100px; width: 200px">
                                    <telerik:RadAjaxPanel runat="server" ID="radPnlMenu">
                                    <telerik:RadMenu EnableEmbeddedSkins="False" EnableRoundedCorners="True" ID="RadMenu2" runat="server" Flow="Vertical"  ClickToOpen="True" Visible="true">                               
                                    <Items>
                                        <telerik:RadMenuItem Text="HIDE" Height="15px" ForeColor="White" BackColor="#383838" Font-Names="tahoma,verdana" Font-Size="10px">
                                            <GroupSettings ExpandDirection="Down" OffsetX="0" OffsetY="-1"></GroupSettings>
                                            <Items>
                                                <telerik:RadMenuItem ImageUrl="~/Images/Tabstrip/handshake.gif"
                                                Text="General Deal Info" NavigateUrl="~/DealEditor.aspx">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem ImageUrl="~/Images/Tabstrip/calendar.gif" Text="Details &amp; Due Dates"
                                                NavigateUrl="~/DealDetailEditor.aspx">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem ImageUrl="~/Images/Tabstrip/copy.gif" Text="Invoicing &amp; Docs"
                                                NavigateUrl="~/Invoicing.aspx">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Deal Cost" ImageUrl="Images/Tabstrip/creditcards.gif" NavigateUrl="~/Dealcostui.aspx">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Value="mnuAdjustments" Text="Adjustments" ImageUrl="~/Images/Tabstrip/wrench.gif"  NavigateUrl="~/AdjustmentsUI.aspx" Visible="false">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Value="mnuDeferred" Text="Deferred Payment" ImageUrl="~/Images/Tabstrip/trafficlight_red_yellow.gif"  NavigateUrl="~/DeferredItems.aspx" Visible="false">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Value="mnuLMC" Text="Lockheed Martin"  NavigateUrl="~/LMC.aspx" Visible="false">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Value="mnuRequests" Text="Access Requests" Visible="False">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Value="mnuAccounting" ImageUrl="Images/tabstrip/businessman_preferences.gif" Text="Checklist" NavigateUrl="~/AccountingUI.aspx" Visible="false">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Value="mnuAccess" Text="Access Requests" Visible="False">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Value="mnuCollection" ImageUrl="~/Images/Tabstrip/money_envelope.gif" Text="Collection Log" NavigateUrl="~/CollectionLog.aspx" Visible="false">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Value="mnuCapitalMarkets" ImageUrl="Images/Tabstrip/businessman_preferences.gif" Text="Checklist" NavigateUrl="~/CapitalMarketsUI.aspx" Visible="false">
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenuItem>
                                    </Items>
                                    </telerik:RadMenu>
                                    </telerik:RadAjaxPanel>
                                    <asp:contentplaceholder id="head" runat="server">
                                    </asp:contentplaceholder>
                                    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                                    </asp:contentplaceholder>
                                </td>

    Thank you so much for all your help!
    Dondi
  7. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 17 Aug 2011 Link to this post

    Hello Dondi,

    Please try to use the following css class selector:
    div.RadMenu_Default .rmTopFix,
    div.RadMenu_Default .rmBottomFix,
    div.RadMenu_Default .rmRoundedCorners .rmGroup .rmItem,
    div.RadMenu_Default .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
    div.RadMenu_Default .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
    div.RadMenu_Default .rmRoundedCorners ul.rmHorizontal .rmFirst,
    div.RadMenu_Default_Context.rmRoundedCorners .rmGroup .rmItem,
    div.RadMenu_Default_Context.rmRoundedCorners ul.rmHorizontal .rmFirst {
         
    background-image: none;
    }

    In case this does not help I would suggest that you open a support ticket and send us a runnable simple project where the issue is visible or try to use our Visual Style Builder and create your customized skin according to your requirements.

    Regards,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Dondi
    Dondi avatar
    5 posts
    Member since:
    Aug 2011

    Posted 17 Aug 2011 Link to this post

    Kate,

    That fixed it!  THANKS!  You're the best!

    God bless you!
    Dondi
Back to Top