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

Forums / Designing with Sitefinity / siteMenu Style Issues

siteMenu Style Issues

4 posts, 0 answered
  1. Phil BS
    Phil BS avatar
    3 posts
    Registered:
    16 Jul 2009
    16 Jul 2009
    Link to this post
    Hi I am building my first site using sitefinity. Really loving the cms so far except for one thing - the navigation menus!

    Firstly, there are so many controlls for navigation, is there somewhere that explains which one is best for which purposes, or a summary of each one?

    Any way, i have a main horizontal menu, and and secondary vertical menu on the side. I have used a SiteMenu controll for each one (dont know if this is correct?). My problem is that it wraps all kinds of classes and divs around my nice neat css, causing it to look wrong. Is there any way i can remove all these styles, and just use mine?

    When i look at the problem css through firebug, the root of the styles i want to change / remove is 'http://magic.magnetism.co.nzWebResource.axd?d=dkJwu6xy2ZMsfmG7LrB59Hp6cGipGFIQdjWED4NwkV6laj1fyK56SKHWW0Nl9eeo0&t=633803997226495000' which is obviously a dynamic generated styles, not from a file i can edit.

    Been trying to look intot he problem and i can see there is such a thing a skins. Would this be my solution? I have looked at a tutorial for skins, but still not understand. I dont use visual studio. If skins is the solution, could anyone tell me a simple step by step solution to styling both menus? ie:

    1. Create a css file called menu1.skin
    2. In the template area choose edit siteMenu and in ... type menu1.skin
    3. I am done > Save.

    Any help appreciated!
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Jul 2009
    Link to this post
    Hello Phil BS,

    Thank you for using our services.

    So far you are going in the right direction. You can skin your menus as you wish, and make your skins use your custom CSS. There is a slight difference in how to use skins for RadControls in Sitefinity. Let's say that your site is using a particular theme, tat is located in the ~/App_Themes/ folder of your project (we will use the White fluid that comes with Sitefinity for example). Now if you take a look at the contents of the ~/App_Themes/White fluid/ directory you will see that there is a file called RadMenu.skin and folder called Menu. The RadMenu.skin file defines the skins that Sitefinity SiteMenu control uses (this control is actually RadMenu contained in a control wrapper). If you open the file and take a look at it you will see that you have a property Skin="Menu" there you can define RadMenu to use your custom skin, for example menu1. So you should change the ~/App_Themes/White fluid/RadMenu.skin like this:
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
    <telerik:RadMenu     
        runat="server"  
        Skin="menu1"  
        EnableEmbeddedSkins="false" 
        > 
    </telerik:RadMenu> 

    Now you will have to create a folder with the same name as the skin, which will hold all styles and images for your skin. For reference take a look at the ~/App_Themes/White fluid/Menu/ directory that holds the styles for the default Menu skin used by the Site Menu, when you are using this particular theme.

    The principle for skinning other RadControl, and creating skins for the other navigation controls in Sitefinity is the same. For example if you want to style your own custom Site PanelBar for your side navigation just create a file RadPanel.skin in your theme folder and follow the above instructions.

    As a good tutorial for designing in Sitefinity you can take a look at the Designing & Skinning with Sitefinity webinar.

    I hope I gave you a clear introduction on how you should go about when creating your custom styles in Sitefinity. If you have more questions, please feel free to contact us.

    Greetings,
    Rado
    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. Phil BS
    Phil BS avatar
    3 posts
    Registered:
    16 Jul 2009
    17 Jul 2009
    Link to this post
    Thanks Rado for your great reply. The video link is VERY helpful.

    However i have a couple more questions. If i am correct, the way you describe the skinning of the siteMenu, will make all siteMenus have the same skin style? I have three siteMenus that all need a differant skin, is this possible?

    I see from the video link, that he styles the tabstrip by just creating a css file in a folder he names within RadControlls > Tabstrip > Skins and then types that name into the 'Skin' field in the appearance area of the tabstrip editor. This sound a really great way, but my site structure is different to his in the video, and i cant see this skins folder. i am using version 3.6

    Thanks,
    Phil


  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    17 Jul 2009
    Link to this post
    Hello Phil BS,

    I suggest that you should take a look at Tutorial: Creating A Custom Skin and Understanding the Skin CSS File

    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.
Register for webinar
4 posts, 0 answered