Apply custom CSS class to elements?

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à…

3 Likes