I overrode my content pane class already. But now I want use another content pane with the default styling. Is this possible?
Solved! Go to Solution.
A rule as simple as this should work:
.download.dijitArrowNode {
display: none;
}
or even a little more specific:
.download.dijitTitlePane .dijitArrowNode {
display: none;
}
Brandon,
Sure that is call css specificity You need a css rule that only applies to one particular content pane. You can add a class name or a id to your rule then that rule is specific to that particular element.
Thanks Robert.
I created a class in my html within the title panes I wanted changed:
<div data-dojo-type="dijit/TitlePane" data-dojo-props='open:false' class="download">
and then adjusted my css in those areas to point to the that class:
.download .dijitTitlePaneTitle {
padding: 0 0 3px 5px;
background-color: white;
border-radius: 2px;
border: 1px solid black;
width: 30px;
height: 30px;
}
.download .dijitTitlePaneContentInner {
border: 1px solid black;
margin-top: 7px;
}
However, I have also changed the .dijitArrowNode's background image. I do not want to have an image display at all for the for one of my content panes and keep the custom image on the others. How do I that? Any suggestions?
Thanks,
Brandon
Do the same thing there make the css rule more specific.
None of these work:
.download .dijitTitlePane .dijitClosed .dijitArrowNode {
background-position: 3px 0;
background-image: url("image/download.png");
height: 11px;
// change with your image dimensions width: 11.5px;
// change with your image dimensions
}
.download .dijitTitlePane .dijitOpen .dijitArrowNode {
background-position: 3px 0;
}
.download .dijitTitlePane .dijitArrowNode {
background-image: url("image/download.png") !important;
background-repeat: no-repeat;
height: 11px !important;
// change with your image dimensions width: 11.5px;
// change with your image dimensions
}
.download .dijitTitlePane .dijitArrowNode, .claro .dijitFieldset .dijitArrowNode {
width: 12.5px !important;
}
It goes back to the regular arrownode when I replace claro with my class.
These work:
.download .dijitTitlePaneTitle {
padding: 0 0 3px 5px;
background-color: white;
border-radius: 2px;
border: 1px solid black;
width: 30px;
height: 30px;
}
.download .dijitTitlePaneContentInner {
border: 1px solid black;
margin-top: 7px;
}
Don't replace .claro just add you class to the rule.
Thanks Robert for your help so far. I still couldn't get that method to work. Maybe you know of an easier way via the html to remove the arrow node only on that particular title pane?
Brandon,
What is the rule you are attempting to use to hide the arrow now?
I was planning on getting the custom arrow node to show with my new class on two of my custom panes and then I would set the default claro arrow node display to none on my other content pane.
OK, But what rule have you tried that is not working?