Topic
  • 2 replies
  • Latest Post - ‏2014-04-02T12:54:03Z by RickGentner
RickGentner
RickGentner
80 Posts

Pinned topic Dojo tab customization

‏2014-03-25T17:37:09Z |

Does anyone have any suggestions on how to change the color of an individual tab on the Dojo tabContainer?

I want to change the background color of the tab at the top not the entire content page.

Updated on 2014-03-25T17:37:43Z at 2014-03-25T17:37:43Z by RickGentner
  • HuangJiYong
    HuangJiYong
    116 Posts
    ACCEPTED ANSWER

    Re: Dojo tab customization

    ‏2014-04-01T06:37:31Z  

    Hi Rick,

    You can specify the custom css style of the tabs. For the below example, set the checked tab background color to yellow, the unchecked tab to beige.

    .claro .dijitTabContainerTop-tabs .dijitTabContent {
        background: beige;
    }
    
    .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
            background: yellow;
    }
    

    Just add the above css code to the css file of the handler. For example, for the below RUIHandler, the css file is WebContent/css/RTCCase.css

    handler testDojoTab type RUIhandler {initialUI = [ TabContainer ],onConstructionFunction = start, 
    cssFile="css/RTCCase.css", title="testDojoTab"}
    

    Hope this is helpful for you.

    -Jiyong

     

    Updated on 2014-04-01T06:37:43Z at 2014-04-01T06:37:43Z by HuangJiYong
  • HuangJiYong
    HuangJiYong
    116 Posts

    Re: Dojo tab customization

    ‏2014-04-01T06:37:31Z  

    Hi Rick,

    You can specify the custom css style of the tabs. For the below example, set the checked tab background color to yellow, the unchecked tab to beige.

    .claro .dijitTabContainerTop-tabs .dijitTabContent {
        background: beige;
    }
    
    .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
            background: yellow;
    }
    

    Just add the above css code to the css file of the handler. For example, for the below RUIHandler, the css file is WebContent/css/RTCCase.css

    handler testDojoTab type RUIhandler {initialUI = [ TabContainer ],onConstructionFunction = start, 
    cssFile="css/RTCCase.css", title="testDojoTab"}
    

    Hope this is helpful for you.

    -Jiyong

     

    Updated on 2014-04-01T06:37:43Z at 2014-04-01T06:37:43Z by HuangJiYong
  • RickGentner
    RickGentner
    80 Posts

    Re: Dojo tab customization

    ‏2014-04-02T12:54:03Z  

    Thanks for the reply