+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / I can't change the text-align of the site menu

I can't change the text-align of the site menu

2 posts, 0 answered
  1. john mirzaei
    john mirzaei avatar
    13 posts
    Registered:
    06 Oct 2009
    04 Dec 2009
    Link to this post
    Hello
    i wanna change the text-align of the site menu to right but i can't do it;
    i've created the skin file and menu folder with it's css.
    here is my skin file and css
    skin file:
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
    <telerik:RadMenu    
        runat="server"
        Skin="Menu"
        EnableEmbeddedSkins="false"
        >
    </telerik:RadMenu>

    css :
    /* RadMenu Plain skin */

    .RadMenu_Menu
    {
        background: #fff;    
        z-index: 100 !important;        
        width:150px;
        direction:rtl !important;
        text-align:right !important;
    }

    .RadMenu_Menu_Context
    {
        background: none;
        border:0;
        direction:rtl;
        text-align:right !important;
    }

    .RadMenu_SitefinityBlueBlue .rmLink,
    .RadMenu_SitefinityBlueBlue .rmTemplate .rmText
    {direction:rtl !important;
        text-align:right !important;
        line-height: 20px;
        text-decoration:none;
        color: #000;
        background: #fff;    
    }

    .RadMenu_SitefinityBlue .rmTemplate .rmText:hover,
    .RadMenu_Menu .rmLink:hover,
    .RadMenu_Menu .rmFocused,
    .RadMenu_Menu .rmExpanded
    {direction:rtl!important;
        text-align:right !important;
        color: #fff !important;
        background: #000;        
    }

    .RadMenu_Menu .rmText
    {direction:rtl!important;
        text-align:right !important;
        padding: 0 10px 5px 10px;    
        font-size: 16px;
        font-family: Georgia, Verdana;
    }

    .RadMenu_Menu_rtl .rmText
    {direction:rtl !important;
        text-align:right !important;
        padding-right: 10px;    
        padding-left: 36px;
    }


    .RadMenu_Menu .rmGroup
    {direction:rtl !important;
        text-align:right !important;
        border: solid 1px #000;    
        background: #fff;    
    }

    .RadMenu_Menu .rmGroup .rmLink,
    .RadMenu_Menu .rmGroup .rmTemplate .rmText
    {direction:rtl !important;
        text-align:right !important;
        background: none;        
        text-align: left;    
        margin: 10px;
    }

    .RadMenu_Menu_rtl .rmGroup .rmTemplate .rmText,
    .RadMenu_Menu_rtl .rmGroup .rmLink
    {direction:rtl !important;
        text-align:right !important;
        text-align: right;
    }

    .RadMenu_Menu .rmGroup .rmTemplate .rmText:hover,
    .RadMenu_Menu .rmGroup .rmLink:hover,
    .RadMenu_Menu .rmGroup .rmFocused,
    .RadMenu_Menu .rmGroup .rmExpanded
    {direction:rtl !important;
        text-align:right !important;
        background: #000;
        color: #fff;    
        font-weight: normal;
    }

    .RadMenu_Menu .rmLeftArrow,
    .RadMenu_Menu .rmRightArrow,
    .RadMenu_Menu .rmTopArrow,
    .RadMenu_Menu .rmBottomArrow,
    .RadMenu_Menu .rmLeftArrowDisabled,
    .RadMenu_Menu .rmRightArrowDisabled,
    .RadMenu_Menu .rmTopArrowDisabled,
    .RadMenu_Menu .rmBottomArrowDisabled
    {direction:rtl !important;
        text-align:right !important;
        background: #ededed url('Menu/left.gif') center center no-repeat;
        width:15px;
    }

    .RadMenu_Menu .rmTopArrow,
    .RadMenu_Menu .rmTopArrowDisabled
    {direction:rtl !important;
        text-align:right !important;
        background-image:url('Menu/top.gif');
        width:100%;
    }

    .RadMenu_Menu .rmBottomArrow,
    .RadMenu_Menu .rmBottomArrowDisabled
    {direction:rtl;
        text-align:right !important;
        background-image:url('Menu/bottom.gif');
        width:100%;
    }

    .RadMenu_Menu .rmRightArrow,
    .RadMenu_Menu .rmLeftArrow
    {direction:rtl !important;
        text-align:right !important;
        height:100%;
    }

    .RadMenu_Menu .rmRightArrow,
    .RadMenu_Menu .rmRightArrowDisabled
    {direction:rtl !important;
        text-align:right !important;
        background-image: url('Menu/right.gif');
    }

    .RadMenu_Menu .rmVertical .rmSeparator
    {direction:rtl !important;
        text-align:right !important;
        padding: 0;
        background: #ccc;
        font-size: 1px;
        line-height: 1px;
        height: 1px;
    }

    .RadMenu_Menu .rmExpandLeft,
    .RadMenu_Menu .rmExpandRight
    {direction:rtl !important;
        text-align:right !important;
        background: transparent url('Menu/groupImage.gif') right center no-repeat;
        margin-right: 4px;
    }

    .RadMenu_Menu_rtl .rmExpandLeft,
    .RadMenu_Menu_rtl .rmExpandRight
    {direction:rtl !important;
        text-align:right !important;
        background: url('Menu/groupImageRTL.gif') left center no-repeat;
    }

    .RadMenu_Menu .rmLink:hover .rmExpandLeft,
    .RadMenu_Menu .rmLink:hover .rmExpandRight,
    .RadMenu_Menu .rmFocused .rmExpandLeft,
    .RadMenu_Menu .rmFocused .rmExpandRight,
    .RadMenu_Menu .rmExpanded .rmExpandLeft,
    .RadMenu_Menu .rmExpanded .rmExpandRight
    {direction:rtl !important;
        text-align:right !important;
        background:transparent url('Menu/invertedGroupImage.gif') right center no-repeat;
    }

    .RadMenu_Menu_rtl .rmLink:hover .rmExpandLeft,
    .RadMenu_Menu_rtl .rmLink:hover .rmExpandRight,
    .RadMenu_Menu_rtl .rmFocused .rmExpandLeft,
    .RadMenu_Menu_rtl .rmFocused .rmExpandRight,
    .RadMenu_Menu_rtl .rmExpanded .rmExpandLeft,
    .RadMenu_Menu_rtl .rmExpanded .rmExpandRight
    {direction:rtl !important;
        text-align:right !important;
        background:transparent url('Menu/groupImageRTL.gif') left center no-repeat;
    }

    .RadMenu_Menu a.rmDisabled,  
    .RadMenu_Menu .rmDisabled:hover  
    {  direction:rtl !important;
        text-align:right !important;
        background: none;  
        color: #ccc;  

    what is wrong with this codes? there is no property to make it right to left?
    thanks
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    07 Dec 2009
    Link to this post
    Hello john mirzaei,

    Thank you for using our services.

    There seems to be some padding coming from the built in styles. Can you try to add the following to your skin:

    .RadMenu_Menu_rtl .rmHorizontal .rmText
    {
        padding-right: 0px !important;
        }

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
2 posts, 0 answered