Geek Answers Handbook

Changing the default style of a DOJO widget

I would like to change some default CSS styles, like dijit.TitlePane, without hacking the "factory -installed" css themes. What I'm trying to do is remove the border of the Title and ContentOuter on the TitlePane. Setting a class (in this case "borderless") does not work when declaring a widget (see below: I also tried to set the class in data-dojo -props. I don’t have to go anyway).

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

The following are the classes that I want to modify in the claro.css file. Of course, I could change the border there, but I do not want to go this route for obvious reasons. All I want to do is override these settings in my own class. This one should be very light, but I'm just pulling a brain cramp. Any help? (Using DOJO 1.7.1).

thank

.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;
}
+5
source share
1 answer

You can override styles by making the selector more specific.

That should work. In the 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;
}

Something more specific will also work, based on the path of the tree tree, e.g.

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

And then in your selector:

.claro.myCompany .fooClass .dijitTitlePaneContentOuter {
  /* my special css */
+5
source

More articles:


All Articles