Home/ Questions/Q 7064025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:47:01+00:00

I’d like to be able to change some of the default CSS styles for,

  • 0

I’d like to be able to change some of the default CSS styles for, for example, dijit.TitlePane without hacking the “factory-installed” css themes. What I’m trying to do is remove the Title and ContentOuter borders of a TitlePane. Setting a class (in this case, “borderless”) when declaring the widget doesn’t work (see below: I’ve also tried setting the class within data-dojo-props. Still no go).

<div class="borderless" data-dojo-type="dijit.TitlePane" data-dojo-  props="title:'Filter by Last Name'" open="false">

Following are the classes that I want to change in the claro.css file. Of course, I could change the border there, but I don’t want to go that route for obvious reasons. All I want to do is override these setting in my own class. This should be really easy, but I’m just drawing a brain cramp. Any help? (Using DOJO 1.7.1).

Thanks

.claro .dijitTitlePaneTitle {
background-color: #EFEFEF;
background-image: url("images/titlebar.png");
background-repeat: repeat-x;
border: 1px solid #B5BCC7;
min-height: 17px;
padding: 0 7px 3px;
}

.claro .dijitTitlePaneContentOuter {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #B5BCC7 #B5BCC7;
border-width: medium 1px 1px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should be able to override the styles by making a selector that is more specific.

    This should work. In your body element, add another class, like 

    <body class='claro myCompany'>

    then you can define your own style:

    .claro.myCompany .dijitTitlePaneContentOuter {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #B5BCC7 #B5BCC7;
border-width: medium 1px 1px;
}

    Anything more specific based on the dom tree path will work also, like 

    <body class='claro'>
  <div class='fooClass'>
    <your title pane here>

    And then in your selector:

    .claro.myCompany .fooClass .dijitTitlePaneContentOuter {
  /* my special css */
    • 0