Apply custom CSS class to elements?

[julienallard1]

Hi, I really need help on this one!

In the app I’m doing, I have dozens of groups that need to customize CSS properties. So far I attribute each group a unique ID that all have an identical keyword in it (say Group1=grp1_key, Group2=grp2_key). Then, in a HTML element between brackets I can select all of them with [id*=’_key’].

So far, this is the most efficient way I found to do what I need. But managing, like 200 ID, means having a logical nomenclature to keep the app organized. This is becoming a HUGE task. It would be SOOOOO much easier and productive if I could simply give custom class names to any element I’d need, but I can’t figure a way to do this.

Please, if you can help, I’d appreciate.

[julienallard1]

I just found that if I give the same ID to multiple elements, the rules that I give to that ID in my CSS is applied to all elements.

But in HTML, the concept of ID is to make an element unique. That said it is a bad practice to repeat the same ID.

But it works…

[julienallard1]

Just for the sake of sharing solutions, I did found a workaround but that takes too many steps. So in the end, I prefer to enter unique IDs for every groups.

How to add custom classes to groups:
Say I have GROUP-A to which I want to add class myClass. Inside the group I’ll create a HTML element into which I put the code:

<i class="_myClass"></i>

Then, in a workflow, using the Toolbox plugin, I set the action Run Javascript on Page load. The javascript code:

$(‘i._myClass’).parents(‘div.Group:first’).addClass(‘myClass’);

For starters, this jQuery command searches through the page for every element with class _myClass. For every occurence, the code climbs up the parents of till it finds a div with class Group and gives it the class myClass.

Now if I have 100 groups that I want to have the class myClass, I simply have to copy/paste the HTML element in the first step into every group.

One big downside of using javascript (jQuery) to add classes is that it affects only loaded elements at the moment of the script execution. So hidden groups won’t be parsed.

Voilà…