2. PHPRunner General questions
  3. Colored tabs: background as well as state
This topic is locked

Colored tabs: background as well as state

 		3/28/2023 5:29:53 PM
PHPRunner General questions
V
 valdaure author

I have successfully implemented Admin's Javascript OnLoad solution for customizing the background color of tabs on a list page, as presented here: https://asprunner.com/forums/topic/26333-tab-color-based-on-another-field-value
In my case it was simple, because my tab titles are a set list of task categories. The tabs are beautifully colored as expected:
$("a[data-tabid]:contains('Admin')").parent().css('background','#86592d');
$("a[data-tabid]:contains('Staffing')").parent().css('background','#008000');
$("a[data-tabid]:contains('BizDev')").parent().css('background','#e600e6');
$("a[data-tabid]:contains('Urgent')").parent().css('background','#ff3333');
$("a[data-tabid]:contains('Personal')").parent().css('background','#b34700');
However, things become somewhat less beautiful when I hover over a tab or its state is 'active'. The theme colors take over in those cases.
Ideally, I'd like the the hover color to be the same as the inactive color, with 'active' state having a white underline of the text.
I am really unfamiliar with JavaScript. What would be the JavaScript (similar to above) for doing this? Let's take category 'Admin' for example.
Many thanks in advance for any help.
V
 		valdaure author 3/29/2023

ChatGPT to the rescue. This JavaScript looks like it should work, and it sort of does, except that in the end the theme's CSS wins. Including !important in the styles doens't help.
Any ideas why the theme's CSS will take a back seat when setting the background color, but not when setting the hover and active colors?

  • // Create the CSS classes dynamically*
    var stylesheet = document.styleSheets[0];
    stylesheet.insertRule('.my-highlight { background-color: #86592d; }', 0);
    stylesheet.insertRule('.my-active-link { border-bottom: 3px solid #fff; }', 1);


  • // Insert the JavaScript code here*
    $("a[data-tabid]:contains('Admin')").parent().css('background','#86592d');
    $("a[data-tabid]:contains('Admin')").parent().hover(
    function() {
    $(this).addClass('my-highlight');
    },
    function() {
    $(this).removeClass('my-highlight');
    }
    );
    $("a[data-tabid]:contains('Admin')").parent().on('click', function() {
    $('.my-active-link').removeClass('my-active-link');
    $(this).addClass('my-active-link');
    });