Color (Style) Page Tabs

API & Customization
1

Has anyone found a good way to style the individual top tabs in their app?

I could see possibly finding the li element with jQuery but when I have multiple roles enabled for a user there is sometimes overlap in the text displayed.

For example an Admin has a Projects tab with greater privileges than a Project Manager with their Projects tab. This is actually why I want to alter the style of the tab. I'd like to color all the Admin role tabs red in this case.

Thanks for any pointers!

2

I finally got around to looking up some string functions so here is a cleaned up snippet. This also handles the odd case where there was an extra slash character in the URLs.

// Tab Coloring
  // This will select the "tabs" at the top of the app and cycle through them.
  $("ul.kn-grid-list li").each(function() {
    // This will check what each is linking to so that even tabs 
    //   with the same visible name will be uniquely identified.
    var tab = $(this).find("a").prop("href")  // Get the target URL
    switch (tab.substr(tab.lastIndexOf("#"))) {  // Get just the last part of the URL
      // Admin Tabs  --  Example; you'll need to change these to match this part of the URLs.
      case "#users":
      case "#admin-exhibitors":
      case "#home":
      case "#managedocuments":
        var bgColor = "#440000"; break;  // This is just picking the color to change them too.  
        								 //   Since it's the first line that says break, all 
                                         //   those above it that matched will be set to this color.
    }
    // Add the color selected to the "tab".  Note: it seems the active tab still 
    //   takes it's style from elsewhere and isn't overwritten, but I think that's 
    //   fine so the user can still identify what tab they are on.
    $(this).css("background-color", bgColor);
  })

3

I worked out a hack to do this but there are parts of it that are ugly. Here you go:

// Tab Coloring
  // Set this to your main site name since the .prop("href") below returns the full link name.
  var siteURL = "https://your.knackhq.com/app-name";
  // This will select the "tabs" at the top of the app and cycle through them.
  $("ul.kn-grid-list li").each(function() {
    // This will check what each is linking to so that even tabs with the same visible name will be uniquely identified.
    switch ($(this).find("a").prop("href")) {
      // Admin Tabs  --  Example; you'll need to change these to match this part of the URLs.
      case siteURL + "#users":
      case siteURL + "#admin-exhibitors":
      case siteURL + "#home":
      case siteURL + "#managedocuments":
        var bgColor = "#440000"; break;   // This is just picking the color to change them too.  Since it's the first line that says break, all those above it that matched will be set to this color.
    }
    // This will add the color selected to the "tab".  Note: it seems the active tab still takes it's style from elsewhere and isn't overwritten, but I think that's fine so the user can still identify what tab they are on.
    $(this).css("background-color", bgColor);
  })

I think it would be cleaner if you didn't add the URL on each check in the switch statement, but this is a start.