Customize how menu links look in views

Feature Requests
1

What about make it possible to customize how “Menu links” will appear in views. Like the other links is now possible to do now, witch is a fine addition to the builder.

image
image1920×1081 91.5 KB

2

Until this is a feature you can use the below CSS to add some colour to your menu links.
Update XXX to your view number
If you have multiple links use the code block again and change the link to 2,3,4 etc. depending on how many buttons you have. You can then change the background-color hex code to suit.

Be great when we can customise without code, until then, I hope this helps :blush:

/*Add Button*/
#view_XXX a.kn-link.kn-link-1.kn-link-page.kn-button 
{
padding-top: 5px!important;
padding-bottom: 5px!important;
padding-right: 16px!important;
padding-left: 16px!important;
background-color: #7EBB44;
color: white !important;
font-size: 16px !important;
}

image
image1539×799 83.9 KB

image
image1388×1140 180 KB

1 Like
3

Thanks Carl this is grate to have, but for many pages to much work, Hope Knack will make is avalible as the page links soon !

4

Hi @Pálmar

In a few of my apps, I have the following single block of CSS which colours all the menu view buttons across all pages:

/*The following code colours all of the buttons on all menu views*/
a.kn-link.kn-link-1.kn-link-page.kn-button {
    background:    #01992d !important;
}
a.kn-link.kn-link-1.kn-link-page.kn-button:hover {
    background:    #017f25 !important;
}
a.kn-link.kn-link-2.kn-link-page.kn-button {
    background:    #dbbf0f !important;
}
a.kn-link.kn-link-2.kn-link-page.kn-button:hover {
    background:    #b49d0b !important;
}
a.kn-link.kn-link-3.kn-link-page.kn-button {
    background:    #88aee8 !important;
}
a.kn-link.kn-link-3.kn-link-page.kn-button:hover {
    background:    #7f9ec6 !important;
}
a.kn-link.kn-link-4.kn-link-page.kn-button {
    background:    #bd72ec !important;
}
a.kn-link.kn-link-4.kn-link-page.kn-button:hover {
    background:    #9e5fc5 !important;
}
a.kn-link.kn-link-5.kn-link-page.kn-button {
    background:    #ffacb3 !important;
}
a.kn-link.kn-link-5.kn-link-page.kn-button:hover {
    background:    #e69ba2 !important;
}
a.kn-link.kn-link-6.kn-link-page.kn-button {
    background:    #9e9be6 !important;
}
a.kn-link.kn-link-6.kn-link-page.kn-button:hover {
    background:    #9290d5 !important;
}
a.kn-link.kn-link-7.kn-link-page.kn-button {
    background:    #7fc1d5 !important;
}
a.kn-link.kn-link-7.kn-link-page.kn-button:hover {
    background:    #6fa8ba !important;
}
a.kn-link.kn-link-8.kn-link-page.kn-button {
    background:    #96c98f !important;
}
a.kn-link.kn-link-8.kn-link-page.kn-button:hover {
    background:    #80ab7a !important;
}
a.kn-link.kn-link-9.kn-link-page.kn-button {
    background:    #01992d !important;
}
a.kn-link.kn-link-9.kn-link-page.kn-button:hover {
    background:    #017f25 !important;
}
a.kn-link.kn-link-10.kn-link-page.kn-button {
    background:    #dbbf0f !important;
}
a.kn-link.kn-link-10.kn-link-page.kn-button:hover {
    background:    #b49d0b !important;
}

Obviously you can change the specific colours used and also the hover colours to suite your preferences - also if you need more than 10 you can just add more lines of CSS. If you like you can also change other options like fonts, padding etc as per Carl’s version.

Essentially no work required but you get the same sequence of colours on all pages.

1 Like
5

Thank you Julian, useful for me specially as I will use same backbround color for all links, thanks