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

392
6
Jump to solution
01-24-2018 12:05 PM
FrancescoTonini2
Occasional Contributor II

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! 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Francesco,

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

FrancescoTonini2
Occasional Contributor II

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...  

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
FrancescoTonini2
Occasional Contributor II

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...

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor II

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..

0 Kudos