Forum for the discussion around technical documentation, user documentation, website & testing

Snippets of code for Tabbed Navigator page template

Plus d'informations
il y a 6 ans 2 mois #6566 par a511197
Hi everyone,

I'd really like to provide snippets of code that will easily allow non coding users to be able to change things like the colours of tabs in the Tabbed Navigator pages. Anyone got any examples of how to do that? Does this already exist in the existing documentation? We already use the xhibit site for customising themes.

TIA

If you can use Lego, you can use Xerte

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 6 ans 2 mois #6570 par a511197
Réponse de a511197 sur le sujet Snippets of code for Tabbed Navigator page template
For those that were looking to do the same, a colleague shared this with me:

Page template: Navigators - Tabbed Navigator
Code to be added to Script (optional properties)
Execute: "Every time page is used"

// JavaScript / jQuery

var acq1 = $("body").find("[aria-controls='tab1']");
var clb2 = $("body").find("[aria-controls='tab2']");
var dsc3 = $("body").find("[aria-controls='tab3']");
var inv4 = $("body").find("[aria-controls='tab4']");
var prc5 = $("body").find("[aria-controls='tab5']");
var prd6 = $("body").find("[aria-controls='tab6']");

acq1.css( "background-color", "#76DEF2");
clb2.css( "background-color", "#FFD21A");
dsc3.css( "background-color", "#85AEEA");
inv4.css( "background-color", "#F8807F");
prc5.css( "background-color", "#BB98DC");
prd6.css( "background-color", "#BDEA75");

Code to be added with Script (Optional Properties)
#ui-id-1, #ui-id-2, #ui-id-3, #ui-id-4, #ui-id-5, #ui-id-6, #ui-id-7, #ui-id-8{
color:black !important;
}

Hope that helps

If you can use Lego, you can use Xerte

Connexion ou Créer un compte pour participer à la conversation.

Modérateurs: ingdonronmhelenmdFay
Temps de génération de la page : 0.130 secondes
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo