Add the below CSS code in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor to replace all instances of the Filter button in conversation toolbar with pure CSS icon without using an image.
Customizations:
Code:
.filter-wrapper .label { margin-left: 3px; margin-top: 5px; width: 1px; height: 0; border-left: solid 7px transparent; border-right: solid 7px transparent; border-top: solid 7px #333; text-indent: -99999px; position: relative } .filter-wrapper .label:before { content: ''; left: -1px; top: -5px; height: 7px; width: 0; border-top: solid 3px transparent; border-left: solid 3px #333; border-bottom: solid 3px transparent; display: block; position: absolute; } .toolbar-filter:hover .filter-wrapper .label, .toolbar-filter .filter-wrapper.selected .label { border-top-color: #019dce; } .toolbar-filter:hover .filter-wrapper .label:before, .toolbar-filter .filter-wrapper.selected .label:before { border-left-color: #019dce; } .toolbar-filter .arrow { display: none; } .conversation-toolbar-wrapper .conversation-toolbar .toolbar-filter .filter-wrapper.selected { margin-top: 1px; } .conversation-toolbar-wrapper .conversation-toolbar .toolbar-filter .filter-wrapper { outline: none; } .conversation-toolbar-wrapper .conversation-toolbar .toolbar-filter .filter-wrapper.selected { margin-top: -5px; padding-top: 5px; }
- Replace both instances of #333 with the desired Filter icon color.
- Replace both instances of #019dce with the desired color of Filter icon when hovered or selected.
Comment