Custom CSS to Change the Directory Bar Color

Custom CSS to Change the Directory Bar Color

If you want to change color of the top Directory bar from the standard teal to your own colors, add the following to the Custom CSS (under Dashboard / Website). You will copy and paste it into your CSS. You will need to add your own Hex Code for the background color. If you are not familiar with CSS and would like assistance, please submit a ticket through our Help Desk.

/* directory table header row */
#mtk-pagewrapper .directory-table .dt-header-row .dt-cell {
  background-color: #046518 !important;
}

    • Related Articles

    • Custom CSS for All System Button Colors

      If you want to change the button colors system-wide from the standard teal to your own colors, add the following to the Custom CSS (under Dashboard / Website). You will copy and paste it into your CSS. You will need to add your own Hex Code for both ...
    • Directory and Custom Fields

      You can choose whether or not to include the information collected in your custom fields in the directory. The directory information for a custom field is controlled at the configuration for the custom field. *Only administrators with Account Owner ...
    • Editing Custom Fields

      Adding a Custom Field At this time, Admins cannot add a custom field, but they are able to edit the data once it has been collected. If you would like to have a custom field added to your parent or student information, create a help desk ticket and ...
    • Customizing Calendars

      Customizing the CSS for a Calendar If you want to change the color or font of your calendar, this can be done through the CSS. Custom CSS overrides the original instructions programmed for your site. Below is information on the CSS for customizing ...
    • Directory Options

      Directory Search Options - Custom Fields If you would like to include your existing Custom Fields in your Online Directory, you can select which custom fields are included and if you want to include the fields as a search option. Step 1 - Go ...