May 5, 20214 min read

Styling Your Knack Apps - Part 2

Updated: Apr 17, 2022

Hopefully you will have found the ideas and CSS code in Part I useful - in this second part I want to take our simple Knack app a little further and make some changes to existing pages. We will then look at making a standalone page - which in reality you might use for a Dashboard or similar use.

Some more Ideas...

In this section, I am just going to give you three code snippets which should be self-explanatory:

Providing a style change when hovering over a table row
Changing the style of the View Header

/* Change table row background color on hover */
.kn-table tr:hover {
 border: 2px solid #c0c0c0 !important;
}

/* Change styling of the View header */
.view-header {
 background:    #dcdede;
 padding: 20px 20px 10px 20px;
 margin-bottom: 20px !important;
}

I have deliberately made the table row hover pretty subtle - but you could choose to change the background or pretty much anything else if you wanted. The same with the view header which I have just made a light grey. The padding and margin both resulted from some experimentation to make the spacing seem right to my eye. The end result is as follows:

You can just see that the first table row is highlighted with a heavier border.

'Targeting' your CSS

With CSS, you are able to style things by referencing their 'class' which will usually make changes right across your app - this is pretty much the case with all we have been doing so far. But what happens if you just want to make a change to a single item on a screen - the colour of a menu button for example?

This is where it gets a little techy - and you may need to turn on your browser's Developer tools I'm afraid!

Let's consider the Company Details page:

What I would like to do is to make the two menu buttons stand out a little and also me the Notes field stand out with a white background. Considering the buttons first, you should right click on one of them and select Inspect Element (or similar depending on Browser). You will then see something like this (this example is from Mac Safari):

You DON'T need to understand this code!!

If you move the mouse over the code window, then you should be able to find the element of code which includes the item on screen you want to change - you can then right click the code and select Copy | Selector Path. For any menu button this will be something like this:

#view_20 > div > a.kn-link.kn-link-1.kn-link-page.kn-button

In fact, any menu button can be access with this 'selector'. The view number is the view number of the Menu view concerned and the link-x number is the first, second, third button along the menu. So the good news is that if you want to colour individual menu buttons you now needn't use the Inspector, I've done it for you!

So, the code to make the first button green and the second orange is:

/*on Companies view show different colourde buttons with hover*/
#view_20 > div > a.kn-link.kn-link-1.kn-link-page.kn-button {
 background:    #69AB3A !important;
 padding:       10px 30px !important;
 color:         #ffffff !important;
}
#view_20 > div > a.kn-link.kn-link-1.kn-link-page.kn-button:hover{
 background:    #699e41 !important;
}
#view_20 > div > a.kn-link.kn-link-2.kn-link-page.kn-button {
 background:    #EE771B !important;
 padding:       10px 30px !important;
 color:         #ffffff !important;
}
#view_20 > div > a.kn-link.kn-link-2.kn-link-page.kn-button:hover{
 background:    #ca731c !important;
}

I would also like to show a white background for the Notes field which is done as follows:

/*white background to notes field on Company Details*/
#view_6 > section > div > div.kn-details-group.column-1.columns > div > div > div:nth-child(2) > div {
 background: white;
}

Once again, I found the 'Selector' using the inspector.

So now Company Details looks like this:

Making Our Dashboard Styled Page

Here, I wanted to make a page which was a little more attractive - a bit more work but worth it for public facing apps, dashboards for managers etc. For this, I have set up a Knack page which is not included in the menus and does not display the menus either. What I am aiming to achieve is this:

You will see that I have a 'menu bar' made of some images and also a 'List View' where the data is centred and there is a border around each entry shown. It's minor, but I have also added a little space between the filters and the results.

The surprising thing here is that the menu is exactly that - a Knack menu view. It has HTML in each menu item's Link Text and some CSS to make it look a bit better. I have ensured that each of the images are square as well to show consistency and set it up to highlight the button hovered over and display some text explaining what it does. This is what the HTML in the Link Text field looks like:

<img src="https://s3-eu-west-1.amazonaws.com/assets.knack-eu.com/assets/nnnnnnnnnnn/ooooooooooooo/thumb/screenshot20210502at14.35.15.png" width="120" title="My Tasks" />

(I have removed some elements of the URL for obvious reasons - and if you know a typical Knack image URL you will see that the Image is actually stored in the Knack database).

The width of all my buttons was set at 120 and I used title="Some text" to generate the popup description.

Some CSS was then required to make these look attractive - I decided to highlight the border and brighten the particular image when hovered over (as well as the popup description). Once again the specific border and margin sizes result from some trial and error:

/*this section is for the Image/Menu bar on My Dashboard*/
#view_29 a.kn-button {
 background:    #d5d5d5 !important;
 border: 3px solid #d5d5d5 !important;
 border-radius: 0px !important;
 padding: 5px 5px !important;
 opacity: 0.7;
}
#view_29 a.kn-button:hover {
 background:    #c0c0c0 !important;
 border: 3px solid #c0c0c0 !important;
 opacity: 1;
}

Note that the menu was view_29 in the app - you will need to find the view number of your own menu when you try this.

Lastly, I have also modified the layout of List Views since last time and also slightly increased the gap between the Search tools and the results - I felt the standard layout was too tight. Lastly, I have modified the styling of the standard kn-button from the previous CSS file - it should now work better when used as a Tab style of menu. All of these are included in the CSS file which is available to download below.

If you would like to find out more about Knack, then click here.

If you would like to find out more about my consultancy services, please visit my website.

To download the CSS in a text file: