Quick Knack Customisation Tips

Looking to personalise your Knack application without coding expertise? Here are some simple enhancements you can implement to improve functionality and aesthetics:

• Dedicated Print Button: Create a styled print button that hides edit and view links for a cleaner print layout

• Visible Add Filters Button: Add a clear “Add Filters” button with hover effects to enhance usability.

• Custom Table Header Colours: Change your table header colours using hex codes for better visibility.

• Attention-Grabbing Detail Labels: Enhance detail labels’ colours to make important information stand out.

• JavaScript for Dynamic Changes: Use JavaScript to modify button text and add new features easily.

These quick tweaks can significantly enhance your app’s user experience!

Happy customising!

Sign up to Knack for Free - Affiliate Link

Add to CSS section

/* Change Table Header styles for multiple views */
#view_123 .knTable th,
#view_248 .knTable th,
#view_456 .knTable th {
    background-color: #88CAF0 !important; /* Apply background color */
}

---

/* Change Colour of Detail Labels Globally */
 .kn-detail-label {
    background-color:#90CDF1 !important; /* Navy background */
    color: #565656 !important;         /* White text as hex */
    padding: 5px;                     /* Optional: Add padding for better readability */
    border-radius: 3px;               /* Optional: Rounded corners */
    display: inline-block;            /* Ensures proper styling */
}

---

/* Change Filter Button Styling Globally */
.kn-add-filter {
  background: #88CAF0; /* Original green */
  color: white !important;
  font-weight: bold;
  padding: 10px !important;
  border: none;
  border-radius: .5em !important;
  transition: transform 0.2s ease, background 0.2s ease; /* Smooth transition for scale and background color */
}
/* Expand and change color on hover on Filter Button */
.kn-add-filter:hover {
  transform: scale(1.05); /* Slightly increases the size */
  background: #76D05B;    /* Lighter green on hover */
}
/* Optional - If you want to remove the Filter Button icon*/
.kn-add-filter span:nth-child(1) {
  display: none;
}

---

/* Print Button Formatting */
#printButton {
    background: #90CDF1;  /* Updated to hex value */
    border-radius: .4em;
    color: white;
    font-weight: bold;
    padding: 5px 10px;
    border: none;
    margin: 10px 0px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease; /* Smooth transition for scale and background color */
}
/* Expand and change color on hover */
#printButton:hover {
    transform: scale(1.05);  /* Slightly increases the size */
    background: #76D05B;      /* Change to green on hover */
}
#printButton::after {
    content: " \f02f ";
    font-family: FontAwesome;
    font-size: 14px;
}

---

/* Hide specific elements when printing the page */
@media print { /* This block applies styles specifically for print media */    
    .kn-table-link, /* Targets elements with the class .kn-table-link */ 
    .menu-links,    /* Targets elements with the class .menu-links */ 
    #printButton {  /* Targets the element with the ID printButton */
        display: none; /* Hides the selected elements during print */
    }
}

---

Add to JavaScript section

    /* Change Filter Button Text */
    $(document).on('knack-view-render.any', function (event, page, view, records) {
        $('.kn-add-filter span:nth-child(2)').html('Add Filters');
    });

---

    // Print Button on scene_130
    $(document).on('knack-page-render.any', function (event, page, view, records) {
        // Check if the print button already exists
        if ($('#printButton').length === 0) {
            $('#kn-scene_130').prepend('<button id="printButton">Print</button>');

            // Add click event for the print button
            $("#printButton").on("click", function () {
                window.print();
            });
        }
    });

---