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

[Solved] menu style

13 Answers 207 Views

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

This question is locked. New answers and comments are not allowed.

13 Answers, 1 is accepted

answered on 24 May 2010, 03:04 PM

hello georgi,

i think that post will not help me.

if grid and menu shares the same css property, for example, .t-header and .t-grid-header how can i say that menu extention use .t-header, .t-grid-header from one skin1 and grid use .t-header and -grid-header from skin2.

if i understand correctly, the post that you have mentioned only shoes how we can mix the skins.

am i right?

if not please explain me better what i really need to do, if possible send me a little sample.

hope you can help me

best regards

Marco Teodoro

answered on 25 May 2010, 09:42 AM

Hello Marco,

In order to use different themes, you need to do the following:

In the theme files, add a class before every selector.
For example, in telerik.vista.css, add a .vista class in front of every selector, like this:
.vista .t-widget,
.vista.t-widget button,
.vista.t-widget input,
.vista.t-widget select
{
font-family: "Segoe UI", Arial, sans-serif;
}
Include both theme files on the page (through <link> elements, or use the StyleSheetRegistrar)
Add the above class name to a container of the components.
For example, you should have the following HTML structure:
<div class="vista">  </div>
<div class="black">  </div>

Regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 01 Jun 2010, 05:05 PM

hello Georgi, i did all the changes that you said but i don't see any style on project

i have a menu like this

                     <div class="black">         
                                <%=Html.Telerik().Menu()         
                         .Name("Menu")         
                         .Orientation(MenuOrientation.Horizontal)         
                         .BindTo(Model, mapping => mapping         
                           .For<Modulo>(binding => binding         
                              .Children(c => c.ModulosModuloParentList)         
                              .ItemDataBound((item, c) =>         
                              {         
                                  item.Text = Resources.ResourceManager.GetString(c.Nome);         
                                  if (!c.isMain)         
                                    item.Action(c.action, c.controller,null);         
                              }))         
                         )         
                                %>         
                            </div>         

and on telerik.black.min.css i added the ".black" class before every selector.

i have made the same to vista css and added a <div class="vista">grid</div>

this way all the styles where lost.

do you know what can be wrong?

Marco Teodoro

answered on 03 Jun 2010, 01:04 PM

budfree.zip

Hello Marco,

Calendar is not formatted, because it is created dynamically and then it is added to the end of the body. To apply custom style, as you know, calendar should be wrapped in div with CSS class "your custom class". Unfortunately there is no easy way to achieve this goal. Nevertheless one possible solution is to wire Open event of the datepicker and in its handler to apply custom CSS class. Here is the event handler:

function onOpen() {

var $calendar = $(this).data('tDatePicker').$calendar();

$calendar.addClass('black');

}

For your convenience I have attached the modified test project to this message.

Regards,
Georgi Krustev
the Telerik team

answered on 03 Jun 2010, 02:40 PM

hello Georgi,

i saw your project working but i can't make it work on mine.

the onopen function isn't called. do you know why this is happening?

there are also a second issue, if you press cancel button the calender will not be removed from page.

i have my script inside content page just below the grid. it as to be here or could i pass it to a script file and reference it in the master page, or even use this script in master page to avoid copy and paste all over the application.

hope you could help because i'm not understanding the reason behind this problem.

best regards

Marco Teodoro

answered on 04 Jun 2010, 10:03 AM

Hi Marco Teodoro,

The javascript in partial view will not be evaluated. In this chain of thoughts you need to place onOpen event handler in the ASPX page, which loads the partial view or in the master page.

I tried to reproduce the second issue on this online demo. You can check it in order to find the differences between it and your project.

Greetings,
Georgi Krustev
the Telerik team

answered on 11 Nov 2011, 11:31 AM

Hello Telerik team,

I'm trying to change the color of the text of just one MVC menu item, but nothing seems to be working. Can you tell me how can I do that? I want to put white background color (I managed to do that) and Black color of the text (which I can't do).

@{ Html.Telerik().Menu().Name("userMenu")

.HtmlAttributes(new { style = "float:left; border: 0px;" })

.Items(menu =>

{

menu.Add().Text(Model.Name).HtmlAttributes(new { style = "color: Black !important" }) //not working!

.Items(item =>

{

item.Add().Text("Help");

item.Add().Text("Themes");

item.AddSeparator();

item.Add().Text("Logout").Action("Logout", "Account");

});

}).Render();

answered on 11 Nov 2011, 12:27 PM

Hi Lilia,

The Menu items consist of two HTML elements - a <li class="t-item"> with an <a class="t-link"> or a <span class="t-link"> inside. Item HtmlAtrributes are applied to the <li>. However, if you have a color style applied directly to the inner element (and you have), you can't override it from the parent. I suggest you to use a custom CSS class instead of an inline style and use proper selectors:

.t-menu .customClass .t-link
{
color: ........
}

Best wishes,
Dimo
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now