Style Menu

[Joel]

I need to style the menu and I'm horrible at css.  I have made a .css file from the Template/Style builder.  That was a great experience and is an awesome tool.  But, I'm looking for help doing the following on one menu (don't want it to be the global style):

• Horizontal Alignment-Right:  Align all the Menu.Items to the right.
• Reduce the Margin around everything in order to size the menu smaller.
• Reduce the Font Size
• Change the Font Color (Black with bright background, White with dark background)
• Change the background color of the entire menu control to a solid color then a gradient.  (I'll try both)
• Instead of having a sharp edge on the bottom left of the menu, make it a radius.
• Limit the width of the menu to 1/2 the width of the page.

Thanks in advance for your help,

Joel

My Menu:

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(items =>
    {
        items.Add().Text(Glossary.Models.Group.Plural)
            .ImageUrl(Url.Content("~/images/32/group.png"))
            .Action("Index", "Groups", routeKeys);
        items.Add().Text(Glossary.Models.User.Plural)
            .ImageUrl(Url.Content("~/images/32/People.png"))
            .Action("Index", "Users", routeKeys);
        items.Add().Text(Glossary.Models.Patient.Plural)
            .ImageUrl(Url.Content("~/images/32/patient.png"))
            .Action("Index", "Patients", routeKeys);
        items.Add().Text(Glossary.Models.Session.Plural)
            .ImageUrl(Url.Content("~/images/32/session.png"))
            .Action("Index", "Sessions", routeKeys);
    }
    )
)

[Dimitar]

Hello Joel,

You could try the following selectors for the Sass-based themes:

1) Reduce padding, font-size, color and background-color:

.k-menu-group.k-link,
.k-menu-link {
  padding: 2px;
  justify-content: right;
  font-size: 12px;
  color: red;
  background-color: blue;
}
 

2) In terms of adding rounded cornets - you could utilize the border-bottom-right/left property. This, however, would require additional modification on the link boxes - removing shadow, setting transparent background and fine-tuning the appearance further.

3) The width of the Menu could be set through the HtmlAttributes:

@(Html.Kendo().Menu()
    .Name("menu")
    .HtmlAttributes(new { @style="width: 500px;" })
)

Additional modifications might be needed when such a big change is made to the Menu styles. Therefore, I would suggest referring to MDN for more detailed information and a learning reference for more-complex CSS properties.

I hope this helps.

Regards,
Dimitar
Progress Telerik

[Joel]

This is a good start. But, this is why this WPF developer gets so frustrated with .css.  There isn't a consistent cause/effect and the intellisense does very little to help with the situation.

What worked:

• Background-color
• Font-Size

What didn't work:

• justify-content: just to be clear, I want everything aligned starting on the right.
• margin: intellisense shows the need for the side being specified.  Either way, this doesn't seem to work
• color:  this doesn't seem to do anything with the font color
• padding: however, when I add this to the control itself it did work. .HtmlAttributes(new { style = "padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;" })

[Joel]

My updated Menu

@(Html.Kendo().Menu()
        .Name("menu")
        .HtmlAttributes(new { style = "padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;" })
        .Items(items =>
        {
            if (ProfileService.IsInRole(SecurityRoles.Manager))
            {
                items.Add().Text(customerName)
                    //.ImageUrl(Url.Content("~/images/32/customer.png"))
                    .Action("Details", "Customers", routeKeys);
                items.Add().Text(Glossary.Models.User.Plural)
                    //.ImageUrl(Url.Content("~/images/32/People.png"))
                    .Action("Index", "Users", routeKeys);
            }
            items.Add().Text(Glossary.Models.Patient.Plural)
                //.ImageUrl(Url.Content("~/images/32/patient.png"))
                .Action("Index", "Patients", routeKeys);
            if (ProfileService.IsInRole(SecurityRoles.Manager))
            {
                items.Add().Text(Glossary.Models.Group.Plural)
                    //.ImageUrl(Url.Content("~/images/32/group.png"))
                    .Action("Index", "Groups", routeKeys);
                items.Add().Text(Glossary.Models.Device.Plural)
                    //.ImageUrl(Url.Content("~/images/32/device.png"))
                    .Action("Index", "Devices", routeKeys);
            }
            items.Add().Text(Glossary.Models.Session.Plural)
                //.ImageUrl(Url.Content("~/images/32/session.png"))
                .Action("Index", "Sessions", routeKeys);
        })
    )

Style:

<style>

    .k-menu-group.k-link,
    .k-menu-link {
        justify-content: right;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left:0px;
        padding-right:0px;
        font-size: 12px;
        color: black;
        background: lightgray;
    }
</style>

[Dimitar]

Hello Joel,

Could you specify the name of the Telerik theme that is being used in the application? It might be the case that there are other custom styles on the page that are overriding the values that you are trying to set.

In terms of fine-tuning the css styles, I would suggest utilizing the browser DOM inspector to examine the markup, pin-down the elements that require the customization and apply the desired CSS rules to match the project requirements. Here is a helpful resource for working with the Chrome DOM inspector:

• https://developers.google.com/web/tools/chrome-devtools/dom

Regards,
Dimitar
Progress Telerik

[Joel]

I used your theme builder to create my .css files.  I'm not allowed to attach anything but pictures here.  So, let me know how I can send them to you.

 

Thanks for the DOM resource, I'll take a look.

[Dimitar]

Hello Joel,

I have opened a new private support thread on your behalf where you could share any additional files. I would suggest to continue our communication there.

Regards,
Dimitar
Progress Telerik