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

Forums / Designing & Styling / Menu design with RAD Menu control

Menu design with RAD Menu control

1 posts, 0 answered
  1. Pritam
    Pritam avatar
    9 posts
    Registered:
    25 Jul 2008
    03 Apr 2012
    Link to this post
    I've tried to work on a menu design with the RAD menu control and facing certain issues with the CSS. Attached files are in sync with the content below -

    We started Sitefinity in our local server. Please check the below image.

    For navigation we tried to follow this link – http://screencast.com/t/iVBtOVH85 from

    http://www.sitefinity.com/devnet/forums/sitefinity/designing-styling/use-a-radcontrol-to-make-a-menu.aspx

    (Image 1.png attached)

    First one is normal sitefininity navigation control and second one is our newly created custom control.

    Then, we changed below code –

    From –

    <telerik:RadMenu runat="server" ID="menu"

    DataSourceID="SM" Flow="Horizontal"></telerik:RadMenu>

    To –

    <telerik:RadMenu runat="server" ID="menu" Skin="QsfMenu" EnableEmbeddedSkins="false"

    EnableRoundedCorners="true" EnableShadows="true" DataSourceID="SM" Flow="Horizontal"></telerik:RadMenu>

    And add a .css file and a cssLoadOrder.xml in Global folder of our themes folder. Now, menu is not displaing properly. Please check Image 2.png

    Red area indicated that menu is loading without css.

    Below is the content of cssLoadOrder.xml file.

    <?xml version="1.0" encoding="utf-8" ?>

    <cssFiles>

    <file>main.css</file>

    <file>qsf.css</file>

    </cssFiles>


    When we try to view source the code, we find that the above mentioned CSS file is not even loading. Only main.css file is loading.


    For general sitefinity navigation control, we also tried something from below link -
    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/designing-styling/css-navigation-horizontal-with-drop-down-menus.aspx

    We put our new qsf.css in global folder of our theme folder and assigned the skin name ( "QsfMenu" ). Our new css class look somthing like -

    .RadMenu_QsfMenu .rmRootGroup
    {
        background-repeat: repeat-x;
    }

    .RadMenu_QsfMenu ul.rmRootGroup .rmText
    {
        padding-bottom: 0;
    }

    .RadMenu_QsfMenu .rmVertical
    {
        background-position: 0 -408px;
    }

    But now the navigation is not display properly with css.
1 posts, 0 answered