Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 5, 2024 at 10:42 pm #1433065
    Qgrafica_7

    I’d like to style the category filters of the portfolio grid. I’ve managed to change font size, remove the “all” sort button and the “/” separator.
    I’d like to change color, hover color, center the category names, change the spacing between them. If it’s possible to underline them on hover.

    I looked at the documentation and i couldn’t find what i was looking for.

    Thank you very much

    • This topic was modified 9 months, 3 weeks ago by Qgrafica_7.
    February 6, 2024 at 8:24 am #1433189
    Ismael

    Hey Qgrafica_7,

    Thank you for the inquiry.

    You can use the following css code to adjust the style of the sorting buttons. 

    #top .av-sort-yes-tax .av-sort-by-term, #top .av-sort-yes-tax .sort_by_cat a, #top .av-sort-yes-tax .av-sort-by-term, #top .av-sort-yes-tax .sort_by_cat .text-sep {
    color: red;
    margin-right: 10px;
    font-size: 20px;
}

#top .av-sort-yes-tax .sort_by_cat a:hover {
    color: blue;
}

    Best regards,
    Ismael

    February 6, 2024 at 10:01 pm #1433358
    Qgrafica_7

    Hi and thank you.
    Your code didn’t work actually, so i did some research using inspect and i came out with the following working code:

    #js_sort_items a {
    color: blue !important;
    font-size: 25px !important;
    margin-right: 25px !important;
}
#js_sort_items a:hover {
    color: red !important;
}

    The only thing that i still need is how to center the sort categories horizontally in the page and how to increase the dimension of the grid items

    Thank you very much

    February 7, 2024 at 10:48 am #1433445
    Ismael

    Hi,

    Glad to know that you managed to adjust the style of the sort buttons. Your modifications are actually the same as the ones we provided above, so it’s quite odd that the modification didn’t work. Anyway, to align the sort buttons to the center, you can add this css code:

    #top .sort_by_cat {
    width: 100%;
    display: flex;
    justify-content: center;
}

    And to increase the size of the grid items, you can adjust the Column count settings in the Styling > Columns tab.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.