Customise Appearance of Only Some Form Tabs?

Questions related to customising nuBuilder Forte with JavaScript or PHP.

Customise Appearance of Only Some Form Tabs?

Unread postby pmjd » Fri Jul 23, 2021 8:33 pm

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
pmjd
 
Posts: 76
Joined: Fri Mar 12, 2021 7:08 pm
nuBuilder Version: 4.5

Re: Customise Appearance of Only Some Form Tabs?

Unread postby kev1n » Fri Jul 23, 2021 8:48 pm

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');
kev1n
nuBuilder Team
 
Posts: 2012
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Re: Customise Appearance of Only Some Form Tabs?

Unread postby pmjd » Fri Jul 23, 2021 8:52 pm

Thanks kev1n, will start with the ugly and see what I can do
pmjd
 
Posts: 76
Joined: Fri Mar 12, 2021 7:08 pm
nuBuilder Version: 4.5

Re: Customise Appearance of Only Some Form Tabs?

Unread postby pmjd » Fri Jul 23, 2021 9:54 pm

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?
pmjd
 
Posts: 76
Joined: Fri Mar 12, 2021 7:08 pm
nuBuilder Version: 4.5

Re: Customise Appearance of Only Some Form Tabs?

Unread postby kev1n » Fri Jul 23, 2021 10:09 pm

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');
});
kev1n
nuBuilder Team
 
Posts: 2012
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Re: Customise Appearance of Only Some Form Tabs?

Unread postby pmjd » Fri Jul 23, 2021 10:45 pm

Perfect, thank you very much.

Is this css change in nuBuilder done via JQuery, rather than javascript?
pmjd
 
Posts: 76
Joined: Fri Mar 12, 2021 7:08 pm
nuBuilder Version: 4.5

Re: Customise Appearance of Only Some Form Tabs?

Unread postby kev1n » Fri Jul 23, 2021 10:46 pm

You can use both jQuery or JavaScript, whichever you prefer.
kev1n
nuBuilder Team
 
Posts: 2012
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5


Return to Custom Code

Who is online

Users browsing this forum: No registered users and 4 guests

cron