How to Change Highlighted Items Color in Alfresco

Question

so I have been trying to change the highlight color in which documents show up in the "items" field within an Alfresco Share workflow form. Basically, given a starting form that looks like this...

You will notice that every other document that gets added to the items field is automatically highlighted light blue. I was wondering if it was possible to change that color, and furthermore if it was possible to set it so only the top item (or a single items) gets highlighted in that list of documents?

I thought this would be as simple as finding and changing a CSS file somewhere, but despite changing a number of different CSS files within Alfresco, I have had little luck changing that color. Just wondering if anyone had any experience with this and would be willing to help me out?

Answer 1

EDITED: The class you're looking for is:

tr.yui-dt-highlighted

The problem here is that these classes are generated automatically by JavaScript injected in the page. So, I've searched and found this little info: path share/res/js/yui-common.js you should use a tool like JavaScript Formatting to understand some code in there. There is a CLASS_HIGHLIGHTED that starts a function, and you should try to override this:

highlightRow: function (k) {
    var i = this.getTrEl(k);
    if (i) {
        var j = this.getRecord(i);
        c.addClass(i, d.CLASS_HIGHLIGHTED);
        this.fireEvent("rowHighlightEvent", {
            record: j,
            el: i
        });
        return;
    }
},
unhighlightRow: function (k) {
    var i = this.getTrEl(k);
    if (i) {
        var j = this.getRecord(i);
        c.removeClass(i, d.CLASS_HIGHLIGHTED);
        this.fireEvent("rowUnhighlightEvent", {
            record: j,
            el: i
        });
        return;
    }
},

There are highlightRow and highlightColumn to look into. It's always very difficult to override YAHOO yui functions..