AEM 6 SP2 - Change Parsys Border and Text Color in Classic UI

Goal

Change the color of parsys. In Classic UI, the parsys border color is #d3ea9a; if your website background happens to be of same color or site CSS cannot contrast CQ parsys, the following simple css override might help

Package Install


Product Parsys





Extension Parsys

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/classic-ui-change-parsys-color

2) Create clientlib (type cq:ClientLibraryFolder) /apps/classic-ui-change-parsys-color/clientlib and set a property categories of String type to cq.widgets

3) Create file ( type nt:file ) /apps/classic-ui-change-parsys-color/clientlib/css.txt, add the following

                         highlight.css

4) Create file ( type nt:file ) /apps/classic-ui-change-parsys-color/clientlib/highlight.css, add the following styles

#CQ .cq-editrollover-highlight-left {
     background-color: red !important;
}

#CQ .cq-editrollover-highlight-bottom {
    background-color: red !important;
}

#CQ .cq-editrollover-highlight-top {
    background-color: red !important;
}

#CQ .cq-editrollover-highlight-right {
    background-color: red !important;
}

#CQ .cq-editrollover-insert-message {
    color: red !important;
}