Announcement

Collapse
No announcement yet.

Replace Filter text and arrow with Pure CSS icon

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Replace Filter text and arrow with Pure CSS icon

    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.

    Click image for larger version  Name:	filter-icon-min.png Views:	1 Size:	9.5 KB ID:	7203

    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;
    }
    Customizations:
    1. Replace both instances of #333 with the desired Filter icon color.
    2. Replace both instances of #019dce with the desired color of Filter icon when hovered or selected.
    Enjoy!
    Last edited by glennrocksvb; 10-21-2017, 10:27 PM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Awesome, you rock!

    Comment

    Users Viewing This Page

    Collapse

    There is 1 user viewing this forum topic.

    • Guest Guest

    Latest Posts

    Collapse

    Working...
    X
    Searching...Please wait.
    An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

    Please push the back button and reload the previous window.'
    An unexpected error was returned: 'Your submission could not be processed because the token has expired.

    Please push the back button and reload the previous window.'
    An internal error has occurred and the module cannot be displayed.
    There are no results that meet this criteria.
    Search Result for "|||"