Guides

CSS Examples

Below are fairly simple snippets which address several of the most common scenarios which require custom CSS.

❗️

These code examples below are best used as templates and Knack cannot guarantee that these examples will work on every operating system, browser, or mobile device.

📘

If you have a code example you’d like us to include in these docs, please do so by using the form located here.

We’ll review the code and add to the docs as soon as possible.

Set the width of a table column

This example forces a set width for a column.

/* Change the view_1 to the key of your table view */
/* Change the field_1 to the key of the field of the column you want to set */
#view_1 th.field_1 {
  width: 100px; /* width in pixels */
}

Hide the 'Account Settings’ link

This example hides the Account Settings link found at the top of all scenes, when a user is logged-in:

div.kn-current_user > a:nth-of-type(1){
  display:none;
}

Hide the log-in form (primarily for SSO)

You might find this example useful if you only want your users to sign-in through SSO.

/* Change view_1 to the key of your current view */
/* To apply this to ALL logins, remove #view_1 */
#view_1 div.kn-login-form {
  display: none;
}

/* To hide obsolete login box if using Google SSO but leave the Register new user box */
form.login_form.control {
  display: none;
}

Only show group totals in a table (hide grand total)

This example will hide the last Totals row in a grouped table. Only displaying totals per group.

/* Change view_1 to the key of your current view */
#view_1 tr.kn-table-totals:nth-last-child(1) {
  display:none !important;
}

Change a page’s font

This example will change the Font styles for a specific page. Choose from a variety of fonts: http://www.cssfontstack.com/

/* Change scene_2 to the key of the scene whose styles you want to change */
#kn-scene_2 {
  font-family: "Times New Roman", Georgia, Serif;
}

Change a label’s background color

This example will change the background color for all labels in a view.

/* Change the view_1 to the key of your table view */
/* Set your own color by changing the #feeeee value */
#view_1 .kn-label  {
  background-color:#feeeee;
}

Hide the crumbtrail at the top of the page

This example will hide the crumbtrail (Ex. “Project > Project Details”) at the top of the page for the entire app.

.kn-crumbtrail {
  visibility: hidden;
}

Hide the logo

This example will hide the entire logo header at the top of the app.

#knack-logo {
  display: none;
}

Hide the menu

This example will hide the menu from the top of the app. This can work well in combination with the Hide the Logo example above if you just want to include a single page or form without the rest of your app.

/* Use this to hide the menu on all pages. */
#kn-app-menu {
  display:none !important;
}

To hide the menu on a specific scene, please see this JavaScript example here. [lLINK]

Hide a cell from pivot table summary row

This example will remove the third cell in the final (summary) row of a pivot table, allowing you to hide, for example, an unnecessary sum of a column’s data.

/* Use this for a SPECIFIC report. Replace #view_1 with your specific view key. */
  #view_1 tr.kn-table_summary td:nth-child(3) {
  font-size: 0;
}

Remove the logo gradient

This example will remove gradient in the Logo banner so you can use a flat color. You can specify your own background color with this as well.

#knack-logo {
  background: none !important;
  background-color:#023F74 !important;
}

Change the font when printing a page

This example will change the font style when you print a page. You can find a list of web-safe fonts here.

/* Use this for ALL tables */
@media print {
    .kn-table-table thead {
        display: table-header-group;
    }
}
/* Use this for a SPECIFIC table. Replace #view_1 with your specific view key. */
@media print {
    #view_1 .kn-table-table thead {
        display: table-header-group;
    }
}

Hide Specific Address Input Fields

These examples will allow you to hide specific parts of an Address field.

Hide Street1 & Street2 

div.address_street.control {
  display: none;
}

Hide City, State & Zip 

div.control.is-grouped {
  display: none;
}

Hide City 

input#city.input, label.help[for="city"] {
  display: none;
}

Hide State 

input#state.input, label.help[for="state"] {
  display: none;
}

Hide Zip 

input#zip.input, label.help[for="zip"] {
  display: none;
}

Center Table Column Headers

This example will allow you to center a table's column headings.

/* Change #view_# to the view key of the table you'd like to center the column headers for.*/
/* Use for all themes except for the Knack Standard Theme */
#view_# th
{
  text-align: center;
}
/* Use for the Knack Standard Theme */
#view_# th span
{
  margin: auto !important;
}

Hide Forgot Password Link

This example will allow you to hide the forgot password link from the Live App login pages.

#forgot-pass {
  display: none;
}

Hide Specific Signup Button

This example will allow you to hide a specific user role signup button, on your Live App login pages.

/* Change #view_# to the view key of the login view you want to hide the signup button on. */
/* Change p:nth-child(#) to the button you want to remove. This is a number so count from the left to find the number to fill in here, then subtract 1. */
#view_# .kn-login-form div div p:nth-child(#) a {
  display: none;
}

Set Radio Button to be Horizontal

This example will allow you to show a Multiple Choice field using radio buttons horizontally instead of vertically.

/* Change field_1 to the field key of the field you want to have horizontal*/
/* Note: This example only works on Knack Standard theme */
#kn-input-field_1
  .kn-radio {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .control {
    margin-right: .5em;
  }

Display List View Results Horizontal

This example will allow you to display a list view showing the records in a column/horizontal way. This is designed to split the records 50/50 on the page and only works for the Knack Standard theme.

/* Change view_1 to the list view key to display horizontal */
/* Note: This example only works on Knack Standard theme */
#view_1 .kn-list-item-container.kn-list-container.column.is-full {
  width:50%
}

Make a Calendar View the Size of the Browser Window

This example will allow you to set your calendar view to the height & width of your browser window.

#view_# > div.knack-calendar.fc {
  height: 100% !important;
  width: 100% !important;
}

Edit the Text Color and Weight of Calendar Events

This example will allow you to edit the text color and weight of calendar events.

#view_### .fc-event-inner {
  font-weight: bold;
  color: black;
}

Change Standard Filter Button Colors

This code will change the color of standard filter button colors.

.tabs.is-toggle a {
  color: #f5f5f5;
  background-color: #07467c;
}

Updated almost 2 years ago