Knack Styling - Fun With Menu Views

Spending a quiet Sunday afternoon in front of an open fire I decided to play around with menu views to see if there were easier ways to make them more colourful across an app - or create what I call Portal Menus (generally vertically spaced menus useful particularly for mobile users).

I have been doing both of these things for quite a while for clients but have been using the Web Inspector to target specific buttons and colouring them - or in the case of portals, using multiple menu views laid out one beneath the other. Here I am presenting an easier way.

Colouring Menu Buttons

I hope I'm not alone in this - but I quite like colourful apps and thought it would be great if it were possible to create a small amount of CSS which would colour ALL the buttons on menu views in an app - now I'm not a CSS expert by any means so this was not immediately obvious to me so I decided to experiment and it turns out to be pretty simple. The following CSS will colour (and provide a different hover colour) for all the menu buttons in an app (unless they are specifically styled):

a.kn-link.kn-link-1.kn-link-page.kn-button { background: #70c65b !important; } a.kn-link.kn-link-1.kn-link-page.kn-button:hover { background: #21942f !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: #e66600 !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; }

This code can simply be pasted into the CSS section of the Code section of the APR and Code section in the builder - and in this case the first four buttons of all your menu views will be coloured - here's an example with 2 buttons:

Vertically Spaced Portal Menus

Building on this, I have been asked several times to create a simple menu for specific users of an app - providing access to a small number of screens and operating in a mobile/touch friendly way. Large menu buttons seemed to be the way to go - but I wanted them vertical like this:

The above is a screenshot of a sample Portal Menu taken on a Mac - so pretty big buttons!

This is actually quite simple to achieve and requires just a small amount of CSS for the View (view_40 in this case):

#view_40 > div.control { margin-left: 10%; } #view_40 a.kn-button { padding: 25px 5px !important; font: normal 600 36px/1 "Calibri", sans-serif; text-align: center; width: 90% !important; margin-bottom: 20px; }

The first section sets a left margin for the actual menu (but not the view header hence the '> div.control'). You can experiment with this.

The main section then applies some styling to all of the buttons in View_20 - which is the menu view. Again you can experiment with these - the important thing if you want the buttons to be underneath each other is the width - it must be more than 50% to ensure that they each have their own 'line'.

This is great so far, but one thing you may find is that the text in the buttons makes them too large when the page is displayed on a phone (in Portrait at least). Luckily there is a solution to this as well using the @media features in CSS - again here is some code to get you going with this:

@media (max-width: 800px) { #view_40 a.kn-button { font: normal 600 20px/1 "Calibri", sans-serif; } } You can see that I have basically just changed the font size if the screen width is less that 800 pixels. My menu now looks like this on an iPhone 11 Pro:

So, a bit of fun for a Sunday afternoon - but I think I will use both of these techniques in client project occasionally so I hope you also find this useful.

Thank you for reading!

Health Warning

Note that Knack are in the process of preparing a new Live App theme and some code may not work correctly with this!