WAB Dev Edition: how do I customize widget sidebars class names?

[FrancescoTonini2]

Hello,

I am trying to tweak the class names of my widget sidebar elements within a WAB Dev Edition templated app. For example (see image below), I would like to locate and edit the class name of the following element:

<div class="title-label" data-dojo-attach-point="titleLabelNode" title="Add Systems" style="line-height: 35px;">Add Systems</div>

When I do a full search for "title-label" or class = "title-label" inside my entire web app folder and files, I cannot locate the corresponding CSS class name, nor the file where the <div> with that class name is. Am I looking for the wrong item? Any help or pointer is much appreciated! 

[RobertScheitlin__GISP]

Francesco,

  You can find the css file and rule very quickly using the browsers developer tools at your disposal (see the image below).

[FrancescoTonini2]

Robert, 

So if I wanted to tweak the title-label class and give my own name to it, I would have to modify the 

.jimu-foldable-panel .title-label {

}

chunk of code with something like .jimu-foldable-panel .title-label-2 {} correct? Since I am going to also change the class reference in the corresponding <div> element shown in the browser dev tools, how can I locate that <div>? I searched for that element but for some reason did not find it...  

[RobertScheitlin__GISP]

Francesco,

   So what are you wanting to change? If you are looking to change the text then just change the label of the widget in the widgets settings dialog.

[FrancescoTonini2]

Robert, 

Because of a separate in-app flow tutorial provider I am using with my web app, I was told I need to give my widget panels a unique class names. So, instead of having a generic "title-label" class for each of my widget panels that open when I click on them, I would like to manually edit the class names and call them something like "title-label-1", "title-label-2", etc. To do so, I need to locate the corresponding CSS file (which you pointed me to) where I can add my own .title-label- blocks as well as locate the corresponding sidebar <div> so I can have something like 

<div class="title-label-1" data-dojo-attach-point="titleLabelNode" title="Add Systems" style="line-height: 35px;">Add Systems</div>

for my "Add Systems" widget panel

<div class="title-label-2" data-dojo-attach-point="titleLabelNode" title="Upload Systems from File" style="line-height: 35px;">Upload Systems from File</div>

for my "Upload Systems from File" widget panel etc. etc. Basically, have a unique class identifier for each of my widget panels that currently has a generic "title-label" class name. The issue is that I cannot locate any of the <div> elements above to manually change the class names as well...

[RobertScheitlin__GISP · Accepted solution]

Francesco,

   I am afraid you are going to have a hard time with that. The class name is controlled by the themes widget frame. For example the Foldable themes pannels > FoldablePanel > FoldableDijit.js is where the div with class="title-label" exists but if you make changes there it affects all the apps widgets that use that code.

[FrancescoTonini2]

I see...so I might have to give up on customizing the class names for each separate sidebar. I thought that changing the CSS elements and the corresponding <div> would be doable for individual widget sidebars, not affecting the entire app like you are saying..