Multiple CSS Content Pane Styles

[BrandonPrice]

I overrode my content pane class already. But now I want use another content pane with the default styling. Is this possible?

https://community.esri.com/groups/web-appbuilder-custom-themes?sr=search&searchId=656cd270-a749-4463...‌

https://community.esri.com/community/developers/web-developers/arcgis-api-for-javascript?sr=search&s...‌

[RobertScheitlin__GISP]

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.

[BrandonPrice]

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

[RobertScheitlin__GISP]

Do the same thing there make the css rule more specific.

[BrandonPrice]

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;
}

[RobertScheitlin__GISP]

Don't replace .claro just add you class to the rule.

[BrandonPrice]

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?

[RobertScheitlin__GISP]

Brandon,

   What is the rule you are attempting to use to hide the arrow now?

[BrandonPrice]

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.

[RobertScheitlin__GISP]

OK, But what rule have you tried that is not working?