I think we can all agree that Knack is an amazing tool which allows us to digitise our businesses really fast. But, initially, apps tend to look a bit bland straight out of the box (by which I mean the views generated by Knack before modification):
The new builder doesn't help much in this respect (yet) - but there is a solution using a little CSS to get things going.
If, like me, you are a committed 'no coder' I can hear you groaning already - surely the point of no code is that you don't have to write any!! Well, I agree and let's hope that all of the things I am going to show here will be achievable in the Builder before long. In the meantime...
Basic Knack Design
You'll be pleased to hear that this first section will concentrate on a few tips for making your apps more usable within the confines of Knack. You'll see above a simple Knack contact app with Companies, Contacts and Activities/Tasks - the heart of a CRM. This is totally unmodified.
You should be aware of the Live App Design options within Knack with which you can change some of the colours, add an image as the app header etc - I am not going to go into that at the moment though. What is worth thinking about is how some of the navigation works. The page shown includes a menu with two options, Add Contact and Add Activity - these two screens are simply loaded as regular pages and to get back to the main Company page you need to click the link to return. For this type of thing, I generally turn the page into a Modal Popup (in Settings) and also set a Submit Rule to 'Return to the parent page'.
and:
If you don't already use this technique, then you should experiment - the apps are generally much more usable this way.
Another option you may not have noticed is the ability to create drop down menus on the main menu bar. This is particularly important as the size of your app grows and the menu gets crowded. This is done when creating a new page - just take the Dropdown Menu option and then choose which pages to add to it:
Styling with CSS
Let's try and make this app look a little less boring then - we'll have buttons instead of text links in tables, a more interesting background and a few other things before this is finished.
I have essentially built up a more or less standard set of CSS which I load into all the apps I build and will share this with you at the end - but for now let's look first at changing the background colour of the 'scenes' (the content of a Knack page) - we are going to get this:
Now, when I first did this, I discovered that the label background colour on detail views was too similar, so the CSS below changes that as well:
/*change the Scene Background and then the labels for details views*/
.kn-scene {
background: #eaeaea !important;
border: 10px solid #eaeaea !important;
border-radius: 7px !important;
}
.kn-detail-label {
background: #d5d5d5!important;
border: 1px solid #d5d5d5 !important;
border-radius: 1px !important;
}Now, you can obviously modify these colours to your own taste!
Styling Buttons
I have already provided a brief overview of this in the forum here but this post will be in more detail. Let's start with the simplest - a delete button in a table. By default, this is created as a basic link using the word 'delete'. I would like it to be like this:
Notice a couple of things - I have changed the word delete to have an upper case first letter (I prefer it that way), also, I have centred the column and removed the heading (the button says it all). These changes are all done in the normal builder:
Now, it happens that Delete buttons are a special case (or Class), and we can create CSS which specifically 'targets' all of them in an app - shown here:
/*defining buttons*/
a.kn-link-delete {
background: #fa9191;
border: 0px solid #fa9191;
border-radius: 4px;
padding: 10px 30px;
color: #ffffff;
display: inline-block;
font: normal 600 14px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
text-decoration: none;
}
a.kn-link-delete:hover {
background: #4689c0;
}Note that I am setting some of the values to zero (border for example) or none - you can change these to suit your own taste - I have also specified what happens when the button is hovered over.
Copying this code to the CSS window in your app will make this change for you immediately.
Colouring Other Buttons
The other links in Tables and other views - be they edit links, Action Links etc., can all be styled too. It's not quite as simple in that the implementation is in two parts - defining the Type of button (Class) in CSS and then adding some simple HTML to the text of your link.
First the HTML:
.blueButton {
background: #2d6bb3;
border: 0px solid #2d6bb3;
border-radius: 4px;
padding: 10px 30px;
color: #ffffff;
display: inline-block;
font: normal 600 14px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
}
.blueButton:hover {
background: #4689c0;
}You will notice immediately that this is very similar to the definition of the delete button above - except here you are creating your own new 'class' of button (blueButton in this case).
I often use a blue button to replace the Edit link in tables and detail views - so let's see how this is done in the design view of a Table:
As you can see, you simply need to add the HTML shown in the Link Text field:
<button type="button" class='blueButton'>Edit</button>and you will end up with a button like this:
Starting to look a bit more interesting?
Note that I have also created an greenButton and styled the standard Knack button (for menus) and the small button used for the filter options.
That's probably enough for one session - in my next post I am going to take this a little further and look at some basic styling for List Views, Tables and more on menu buttons.
If you would like to find out more about Knack, then click here.
To download the CSS in a text file:
Some great tips and tricks, thanks for taking the time to share 🙏