Styling Knack Apps - Part 2

I have just published part two of my new series of Posts - Styling Your Knack Apps.

You can access the article here:

I have just published part one of my new series of Posts - Styling Your Knack Apps.

You can access the article here:

https://www.onlinedatabase.expert/post/styling-your-knack-apps-part-2

  • Changing backgrounds
  • Colouring individual menu buttons
  • Using Images in menus
  • CSS File provided

Please feel free to post comments or ask me any questions!

Wouldn't it be great if all of these things could be changed in the Builder without any code!!

Julian

 

1 Like

Thanks @JulianKirkness
I have been using your button code for sometime now.
I thought I would supplement your blog post with a short video walk through :pray:

1 Like

Hi guys,

Building on the shoulders of our Knack Experts, here I share some small styling to come closer to a Linkedin/Facebook lean appearance.

CSS

/Pages, Modals, Labels: back-ground/
#page, .kn-modal, .modal-card-body, .kn-detail-label { background-color: #F3F2EF !important; }

/Navigation, Filters, Search/
.kn-records-nav { display: flex; flex-wrap: wrap; }
.kn-records-nav > div { margin-right: 20px; }
.js-filter-menu.tabs .is-active a { background-color: #FFFFFF; color: #ededed; box-shadow: none; }
.kn-content .tabs.is-toggle a { border-color: #F2F3F4; }
.tabs.is-toggle .is-active a { color: #194f69; }
.kn-records-nav .kn-pagination select { border-color: #F2F3F4; height: auto; }
.table-keyword-search .kn-button.search { background-color: #F2F3F4; height: 38px;
font-size: 16px; padding: 20px 20px; padding-top: 10px; padding-right: 20px;
padding-bottom: 10px; padding-left: 20px; }

/Tables, Charts/
.kn-table th { background-color: #FFFFFF ; font-weight: 600; }
.kn-table th, .kn-table td { border: 0; border-bottom: 1px solid #F5F5F5; }
.kn-table-wrapper { background-color: #FFFFFF ; }
.kn-table-container {border-color: #FFFFFF; border-radius:10px;}
.kn-table-wrapper { border: 1px solid white; padding:5px; border-radius:10px;
box-shadow: 2px 5px 7px rgba(163,163,163,0.33); }
.highcharts-container {border-radius:10px;}

/Infobar, Back-link/
.kn-info-bar { font-size: 12px; background-color: #F3F2EF ; border-bottom: 1px solid #F5F5F5; }
.kn-current-user-intro, .kn-back-link { display: none; }

ps1: work in process. Still working on the Details view style. But good enough to share now. Some more maybe later.

ps2: I am editing this post to improve it.

Great stuff @MichaelG - may try your CSS out later!

One thing that has always concerned me though is making too many CSS/JS changes in Knack. I realise we are all basically doing this too much because the basic Knack theme is pretty basic and looks old fashioned but with Knack announcing that a new theme is on the way and that some of our custom code may not work or even ‘break’ our apps I am even more worried.

It would be great if someone from Knack would comment on your (and my) CSS and let us know where it will and will not work in future!!

1 Like

Hi All,

trying to add CSS to add a vertical space between list items but it doesn’t seem to be working as expected. My understanding was that Padding was space outside the border and that Margin was space inside the border - where am I going wrong? The border works fine but the Margin and Padding lines don’t seem to be doing anything much.

/This is to add a border to lists/
.kn-list-item-container {
border: 2px solid #066cb8;
padding: 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
}

Thanks a lot!
P.S. loving all of the excellent tips and information available on this site from the seasoned pros!

Try this:

  margin-bottom:   20px !important;

It doesn’t work without the !important.

Julian