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

Forums / Designing with Sitefinity / Need some detailed instructions

Need some detailed instructions

8 posts, 0 answered
  1. bleutiger
    bleutiger avatar
    153 posts
    Registered:
    23 Oct 2008
    15 Jul 2009
    Link to this post
    Hello everyone,

    I am new to Sitefinity and I am having some issues specifically on changing the look of a site menu.

    Q1.  Is a sitemenu in sitefinity a Radmenu that is already configured?
    Q2. If not...where is the CSS that controls the Sitemenu control?  I am trying to use the examples but cannot figure out why my hover always gives me a blue background.

    Please treat me like I am five and walk me through step by step how to find the correct way to do this.

    Q3  If I drop a Radmenu in instead how can I connect it to the datasource that the Sitemenu control is already using so that my menu items will appear automatically?

    I am sure there will be more questions on this...how about a tutorial section for this kind of thing.

    Thanks in advance,

    CDavis
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    15 Jul 2009
    Link to this post
    Hello bleutiger,

    The SiteMenu control ( RadMenu) is bounded to Sitefinity SiteMapData source. It shows all pages that you have already created. The control is styled by a css located under App_Themes/[one of the default theme]/Menu folder.
    I suggest that you should take a look at RadMenu developers manual to gather more information about the control and how it works.
    If you are going to use RadMenu control there are two easy options that you can use to bind the menu to a data source

    - Declare SiteMapDataSource control and RadMenu control in a user control. Then set DataSourceID property of the RadMenu to the ID of SiteMapDataSource control

    - Work in Sitefinity UI, In one ContentPlaceholder drop RadMenu and DataSource control. Then Configure the DataSource for the RadMenu control in the same way as described in the lines above ( the diferrence  here is that you are working in design mode)

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. bleutiger
    bleutiger avatar
    153 posts
    Registered:
    23 Oct 2008
    15 Jul 2009
    Link to this post
    Ivan,

    Thanks for the information about the SiteMapDataSource...I will look into it.

    What I am having difficulty with is configuring the css.  All of your samples in Sitefinity and in the regular Radcontrols all show examples based on changing the background colors.  I am trying to create a menu with an image background that will change when the menu is hovered over.

    http://www.napnap.org/  uses Sitefinity and their menu is similar to what I am trying to create however everytime I try to put an image in for the background it defaults to a dark blue color...

    I have tried to create a custom skin and I have tried to edit the main css file of the site and neither are working.  I can get a background image to appear but no matter what I do the hover is always dark blue.

    Can you provide a sample of the sitemenu control with a background image and a hover background image using either a custom skin or a main CSS file?

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    16 Jul 2009
    Link to this post
    Hi bleutiger,

    I am sending you an archive with RadMenu.skin file, styles.css file and one image that will show up on item hover. You need to put these files in your theme. Then create a user control( or user SiteMenuControl).

      
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />  
    <telerik:RadMenu ID="RadMenu1" runat="server"  DataSourceID="SitemapDataSource1">  
    </telerik:RadMenu 

    In Sitefinity design mode, create a page, drop the RadMenu control and use the theme where you have added the custom menu style.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. bleutiger
    bleutiger avatar
    153 posts
    Registered:
    23 Oct 2008
    16 Jul 2009
    Link to this post
    Ivan,

    That helped...

    I created my skin folder and used only your code and was able to get my hover to work with the image, thanks.

    Ok one more thing...

    If I want to access only the first menu item and chang its background to a different image ie. A rounded graphic but keep all the other items with the default background image what is the css tag for that or is there one?


     
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    16 Jul 2009
    Link to this post
    Hello bleutiger,

    If you want to change the background of a particular item you can access the item by Text or url (var item = menu.findItemByText(text);) . If you are talking for Root or Level items you can use .rmGroup or .rmLevel[n] css classes.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. bleutiger
    bleutiger avatar
    153 posts
    Registered:
    23 Oct 2008
    16 Jul 2009
    Link to this post
    I think we are talking about the same things but in two different ways...

    I opened my Master Page in the Sitefinity Admin and chose to edit it.
    I then dropped a SiteMenu item from the "Add Controls Bar on the right" into one of my available contentplaceholders

    I have been trying to customize the skin that deals with this menu control.  It is being rendered for me so I don't know what the names of the items are.

    I think you have been talking about adding a RadMenu control into Visual Studio and manipulating it there.  Am I right?  If so, I would know what the names/IDs were there but that is not how I am doing this particular project.

    Am I just totally confused or does this give you more details on what I am trying to do?
  8. bleutiger
    bleutiger avatar
    153 posts
    Registered:
    23 Oct 2008
    16 Jul 2009
    Link to this post
    Never mind I figured it out using these three documents for anyone having the same or similar issues.

    FYI for newbees the Sitemenu control is a Radmenu also so the same rules apply for both

    (These are actually in the order that helped me the most. Hope it helps someone else)
    http://www.telerik.com/help/aspnet-ajax/menu_appearancecreatingacustomskin.html
    http://www.telerik.com/help/aspnet-ajax/menu_appearancecssselectors.html
    http://www.telerik.com/help/aspnet-ajax/menu_appearancecssfile.html

    I personally recommend you copy the one of the other skins and then completely gut the css file for the skin and only add back in what you need based on the above documents.

    It will make the task a little easier for newbees like me.

    Thanks again for the help Ivan
Register for webinar
8 posts, 0 answered