top of page
Writer's pictureJulian Kirkness

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!


832 views3 comments

Recent Posts

See All

3 Comments


craig
Jun 20, 2022

Hi Julian,

Trying to style some buttons and wondering if you have an answer to a question: I have several buttons in various pages exactly the same style, and rather than defining the style repeatedly in the CSS, I am wondering how to define it just once and then call that style up for each instance.

I can define the style like this:


.button {

style details here ... }


And then each instance would look something like this: #view_637 > div > a.kn-link.kn-link-1.kn-link-page.kn-button .button ** Not sure what code goes here to make this work **


#view_637 > div > a.kn-link.kn-link-2.kn-link-page.kn-button .button Does that make sense?

Cheers

Craig

Like

Thanks for sharing your fire side rips and tricks. Always very welcomed to make our apps look better. 👍

Like

craig
Nov 07, 2021

Great writeup thanks Julian.

Very simple and helpful!!

Like
bottom of page