Reputation: 505
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;
}
Upvotes: 5
Views: 5709
Reputation: 8580
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 */
Upvotes: 5