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

Snippets of code for Tabbed Navigator page template

  • a511197
  • Onderwerp Auteur
  • Offline
  • Premium lid
  • Premium lid
Meer
6 jaren 2 maanden geleden #6566 door 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

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

  • a511197
  • Onderwerp Auteur
  • Offline
  • Premium lid
  • Premium lid
Meer
6 jaren 2 maanden geleden #6570 door a511197
Beantwoord door a511197 in topic 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

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Moderators: ingdonronmhelenmdFay
Tijd voor maken pagina: 0.894 seconden
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo