Page 1 of 1
Customise Appearance of Only Some Form Tabs?
Posted: Fri Jul 23, 2021 1:03 pm
by 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
Re: Customise Appearance of Only Some Form Tabs?
Posted: Fri Jul 23, 2021 1:18 pm
by 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');
Re: Customise Appearance of Only Some Form Tabs?
Posted: Fri Jul 23, 2021 1:22 pm
by pmjd
Thanks kev1n, will start with the ugly and see what I can do
Re: Customise Appearance of Only Some Form Tabs?
Posted: Fri Jul 23, 2021 2:24 pm
by 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?
Re: Customise Appearance of Only Some Form Tabs?
Posted: Fri Jul 23, 2021 2:39 pm
by 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');
});
Re: Customise Appearance of Only Some Form Tabs?
Posted: Fri Jul 23, 2021 3:15 pm
by pmjd
Perfect, thank you very much.
Is this css change in nuBuilder done via JQuery, rather than javascript?
Re: Customise Appearance of Only Some Form Tabs?
Posted: Fri Jul 23, 2021 3:16 pm
by kev1n
You can use both jQuery or JavaScript, whichever you prefer.
Re: Customise Appearance of Only Some Form Tabs?
Posted: Sat Jul 06, 2024 1:10 am
by 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');
Re: Customise Appearance of Only Some Form Tabs?
Posted: Mon Jul 08, 2024 8:02 am
by 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'
});
});
Re: Customise Appearance of Only Some Form Tabs?
Posted: Mon Aug 12, 2024 3:49 am
by jerante
Thanks Kevin! This is great!