Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
Forum for the discussion around technical documentation, user documentation, website & testing
  • Page:
  • 1

TOPIC: Snippets of code for Tabbed Navigator page template

Snippets of code for Tabbed Navigator page template 4 months 1 day ago #6566

  • A511197
  • A511197's Avatar Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 110
  • Thank you received: 7
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 Inloggen or Create an account to join the conversation.

Snippets of code for Tabbed Navigator page template 3 months 4 weeks ago #6570

  • A511197
  • A511197's Avatar Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 110
  • Thank you received: 7
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 Inloggen or Create an account to join the conversation.

  • Page:
  • 1
Moderators: Fayronmingdon
Time to create page: 0.043 seconds
Copyright © 2020 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search