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

Snippets of code for Tabbed Navigator page template

  • a511197
  • Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
6 years 2 months ago #6566 by 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

Please Log in or Create an account to join the conversation.

  • a511197
  • Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
6 years 2 months ago #6570 by a511197
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

Please Log in or Create an account to join the conversation.

Moderators: ingdonronmhelenmdFay
Time to create page: 0.129 seconds
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo