CODEWITHSUNDEEP
dojo
Mark Hall
Mark Hall

Reputation: 505

Changing default style of DOJO widget

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

Answers (1)

mtyson
mtyson

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

Related Questions