Customise Appearance of Only Some Form Tabs?

[pmjd]

Hello,

is there a way to customise the appearance of the tabs on an indivdual basis?

I know how to change the tabs on a global basis via the .css file but is there a way to set different tab styles for different forms?

I am using nuSetVerticalTabs(); for the userhome menu and want to make it different to the other tabs in nuBuilder. Any info would be great.

Thanks,
Paul

[kev1n]

Hi,

Use jQuery/css in the form's Custom Code to change the tab appearance. You can also change the font, size, border etc. See https://www.w3schools.com/cssref for a reference.

Example (ugly colors - but it should help you get started)

Code: Select all

// Change the tab holder background color
$('#nuTabHolder').css('background-color','orange');
// Change the tab background color
$('.nuTab').css('background-color','red');
// Change the selected tab background color
$('.nuTabSelected').css('background-color','green');

[pmjd]

Thanks kev1n, will start with the ugly and see what I can do

[pmjd]

The code only seems to work on form load, so when I click a different tab the new tab colour stays the same (the general css is applied) and the old unselected tab retains the selected tab colour, unless I reload the form.

Do I have to add individual JS to each object or is there another way that custom css could be applied to only that form?

[kev1n]

Like this?

Code: Select all

// Initially, all tabs green
$('.nuTab').css('background-color','green');

// On tab click, change all back to green and the active tab to red
$('.nuTab').click(function(){
     $('.nuTab').css('background-color','green');
     $(this).css('background-color','red');
});

[pmjd]

Perfect, thank you very much.

Is this css change in nuBuilder done via JQuery, rather than javascript?

[kev1n]

You can use both jQuery or JavaScript, whichever you prefer.

[jerante]

I'm sharing what I did in my 5 tabs. I placed the code in the EDIT section of the custom code

Code: Select all

$('#nuTab0').css('background-color','#F39C12');
$('#nuTab0').css('color','white');
$('#nuTab1').css('background-color','#00A65A');
$('#nuTab1').css('color','white');
$('#nuTab2').css('background-color','#DD4B39');
$('#nuTab2').css('color','white');
$('#nuTab3').css('background-color','#00C0EF');
$('#nuTab3').css('color','white');
$('#nuTab4').css('background-color','#595959');
$('#nuTab4').css('color','white');

[kev1n]

You can make the code more compact by using a loop and an array to apply the styles. Here's how you can do it:

Code: Select all

var tabColors = ['#F39C12', '#00A65A', '#DD4B39', '#00C0EF', '#595959'];

tabColors.forEach((color, index) => {
  $(`#nuTab${index}`).css({
    'background-color': color,
    'color': 'white'
  });
});

[jerante]

Thanks Kevin! This is great!