[SOLVED] change tab color of dijit layout tabcontainer

change tab color of dijit layout tabcontainer

I'm trying to change the title text color of dijit layout tabcontainer for when the tab is both active and inactive.

Does anyone know what the css property names are for the tabcontainer title colors or where I might find them listed ?

I'm using dojo version 1.12

Thanks

Pete

Solution

You can use the .tabLabel css class to change the text color of the tabcontainer , also if you want to set a color in the active state of tab , just check with the .dijitTabChecked .tabLabel .

See below working snippet :

require([
	"dojo/query",
  "dojo/on",
	"dojo/dom-style",
  "dijit/layout/TabContainer", 
  "dijit/layout/ContentPane",
  "dojo/domReady!"
], function(query,On,domStyle,TabContainer,ContentPane) {
  
  var tc = new TabContainer({
    style: "height: 100px; width: 100%;"
  },"tabContainer");

  var cpOrg = new ContentPane({
       title: "Tabe one",
       content: "Content of tab 1"
  });
  
  tc.addChild(cpOrg);
	
  var cpShared = new ContentPane({
       title: "Tabe two",
       content: "Content of tab 2"
  });
  tc.addChild(cpShared);

  var cpPrivate = new ContentPane({
       title: "Tabe three",
       content: "Content of tab 3"
  });
  
  tc.addChild(cpPrivate);
  tc.startup();
 
  
  
});

#tabContainer .tabLabel {
  color:green;
  
}

#tabContainer .dijitTabChecked .tabLabel {
  color:red;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div id="tabContainer"></div>
</div>