This is a migrated thread and some comments may be shown as answers.

Sitefinity 4.2 Menu

4 Answers 132 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Popescu
Top achievements
Rank 1
Popescu asked on 16 Dec 2011, 01:57 PM
Hello,

I have to create a custom menu in sitefinity that must match & respect my design 100%. Unfortunately, I couldn't find any tutorial that shows step by step what i have to do. As far as i've seen there is a Navigation control that allows you to customize your menu by giving a css file or a template. In traditional html/css sites i would crop my buttons from the design and would integrate them in the design with an <a href=""><img src=""></a>.
How should i do it?
Another problem i am dealing with is that i have to create a multi language website. So i would use the Language Selector control. Can i use it and have different content in the pages? For instance in the English Language page, i would have 4 columns in a widget, and in the German Language page i would have only 3 columns, and different pictures, content, etc?
Please give me some hints, tutorials or anything that could put me on track.
Thanks.

Edit: I am not interested in drop-down menus, i want a simple linear menu. I tryed the navigator control and it generated me only one button, because i am working on the home page template. Should i create the whole structure of the website and then create the menu? This way sitefinity will generate all the buttons for all the pages?
Thanks

4 Answers, 1 is accepted

Sort by
0
Accepted
Jen Peleva
Telerik team
answered on 20 Dec 2011, 02:12 PM
Hi Popescu,

You can style your navigation by a css file, which has to be included in your Theme, or using a css widget on your page or template. In both cases styles are applied to the selectors of the navigation - RadTabStrip selectors for Horizontal and Vertical, RadMenu selectors for horizontal with drop-downs, RadTreeView selectors for Tree (vertical with sub-levels), because our navigation is based on the RadControls.

A very useful tool for creating custom skins is the Telerik Visual Style Builder. Skins, created with the style builder have to be included in a registered theme. Then, you simply enter the name of your skin in the designer of the navigation (same as when you're using the embedded skins) to make the it work. You can also modify the skin by adding css declaration to it manually. The only thing you need to keep in mind is the way you declare the css properties  - they should be placed between the brackets of a rule, similar to this one:

 .[name of control, used for this navigation type] _ [name of your custom skin] { styles }

I believe that you'll find this discussion useful.

About your second question, localization is supported in Sitefinity, so you can easily create different language versions of pages. If you'd like your pages to look identical in different languages, they have to be synchronized. If your requirement is to have completely different versions of a page, depending on the language ( example - page in English has two content blocks, page in French has 1 content block), when you create the language translation of the initial page, you shouldn't choose pages to be synced. Take a look at the articles about localization from our documentation - Localization of templates and Translating an existing page.

As for your last question, you need to create the whole structure of your site first, if you'd like to see how the navigation will look like (all tabs in it), because otherwise, having only one page, your navigation will consist of one tab only.

Best wishes,
Jen Peleva
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Popescu
Top achievements
Rank 1
answered on 01 Feb 2012, 10:16 AM
It didn't work with an external CSS file, but it worked if i added the css from the css widget editor.

Thanks for your reply!
0
Popescu
Top achievements
Rank 1
answered on 08 Feb 2012, 04:51 PM
Hello,

I have another problem related to the menu customization.
It works perfectly in preview mode, but when i want to see the page from the pages listing -> View it doesn't show my customization. I have used an external css and embedded css from the widget editor. My menu customization is done with the css widget editor and it looks like this: 

.RadTabStrip_custom {
  font-size:14px; 
 
}
.rtsLevel{ 
background: url("../../App_Themes/imgs/menu_background.png") repeat-x;
}


.rtsTxt {margin-top:10px; margin-bottom:10px; color:white; font-weight: bold;}

I have named the wrapper class custom when i created the menu, and i have created a folder App_Themes/imgs in my project root folder and i have added menu_background.png in the folder.

What am i doing wrong?
Please let me know, any help would be great.
Thanks!

0
Jen Peleva
Telerik team
answered on 09 Feb 2012, 01:06 PM
Hi Popescu,

Correct me if I'm wrong, but you mentioned  that you put your images in an App_Theme folder in the root of the project, when App_Themes is actually a folder with special restrictions and should be under App_Data. You can, however, try putting your images in a folder in the root with a different name. Also, make sure that you're referencing your image properly from your css file.

All the best,
Jen Peleva
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Menu
Asked by
Popescu
Top achievements
Rank 1
Answers by
Jen Peleva
Telerik team
Popescu
Top achievements
Rank 1
Share this question
or