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

Style Menu

6 Answers 64 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 22 Apr 2020, 08:37 PM

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);
    }
    )
)

6 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 27 Apr 2020, 05:00 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 28 Apr 2020, 02:41 PM

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;" })
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 28 Apr 2020, 02:43 PM

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>
0
Dimitar
Telerik team
answered on 29 Apr 2020, 05:07 AM

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:

Regards,
Dimitar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 29 Apr 2020, 01:55 PM

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.

0
Accepted
Dimitar
Telerik team
answered on 30 Apr 2020, 05:14 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Menu
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Dimitar
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or