Change design of portfolio sorting options

Morning,

There are a couple of pieces of css that you’ll need to use and tweak as to your liking

/* create each none active item as a button */
#js_sort_items a {
    background-color: #FFFFFF;
    padding: 12px 16px 10px;
    border: 1px #00aa67 solid;
}

/* create each active item as a highlighted button */
#js_sort_items .active_sort {
    background-color: #00aa67;
    color: #ffffff!important;
    padding: 12px 16px 10px;
    text-decoration: none;
}

/* add some space between the new button */
#js_sort_items a {
    margin-right: 10px!important;
}

/* remove the seperator */
.text-sep {
    display: none!important;
}

/* optional centre the buttons */

.avia-fullwidth-portfolio #js_sort_items {
    text-align: center;
}

That will produce this

TJ

• This reply was modified 6 years, 10 months ago by tjswarbs78.

Ah good stuff :)

Each element builder handles the sort function differently so the classes and ids for masonry / portfolio etc are not the same.
Glad you sorted (get it?) it out

TJ