Menu
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;
}
352
Controls are visual elements such as edit boxes, buttons, images, and text that allow users to manipulate data on an XPage. Understanding Dojo widgets. Dojo widgets are prepackaged JavaScript™ code, HTML, and CSS declarations that enhance the appearance and use of controls in both a browser and the Notes® client.
The Dojo Parser is an optional module which is used to convert specially decorated nodes in the DOM and convert them into Dijits, Widgets or other Objects. By decorated we mean use of a data-dojo-type attribute. Any “Class” (or object, such as the ones created by dojo.
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 */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
