Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 14, 2022 at 12:22 pm #1340468
    fkm

    Hey Enfold team,

    I´m using the accordion (which is pretty nice btw) and I´d like to make some changes to the sorting options:
    1. increase the spacing between sorting options and tabs
    2. remove the delimiters (slashs), but keep the distance
    3. reverse the order (chronologically from most recent to oldest – left to right)
    4. change the font weight for the active sorting option (if possible)

    Please see screenshot.

    I already tried to solve this myself by using the Enfold documentation and other topics.
    Unfortunately without success. So I would be very grateful for your help.

    Thank you very much in advance.

    Best regards, fkm

    February 14, 2022 at 5:46 pm #1340553
    Ismael

    Hey fkm,

    Thank you for the inquiry.

    The css code below should remove the separator, increase the space between the items and adjust the font weight of the text.

    .taglist .tag-seperator {
    display: none;
}

.taglist a {
    margin-right: 20px;
    font-weight: bold;
}

    To reverse the order of the items, try to add this css.

    .taglist {
    display: flex;
    flex-flow: row-reverse;
    justify-content: flex-end;
}

.taglist a:first-child {
    order: 1;
}

    Best regards,
    Ismael

    February 15, 2022 at 11:06 am #1340670
    fkm

    Hey Ismael,

    thank you very much for your quick and helpful reply.
    Everything worked just fine. Great.

    The only thing I meant differently is the case with the bold font:
    Is it also possible that only the tag that is currently active (on hover and after the click) appears in bold?
    Basically the same as on “Page Xsample” (sorting tags of the portfolio grid, please see below).

    Thanks a lot for another reply in advance.

    Best regards, fkm

    February 15, 2022 at 2:26 pm #1340723
    Ismael

    Hi,

    Glad to know that the modifications are working. For the hover and active state, try to add this css code.

    
.taglist a:hover, #top .taglist .activeFilter {
    font-weight: bold;
}

    Best regards,
    Ismael

    February 15, 2022 at 4:17 pm #1340740
    fkm

    Hi Ismael,

    exactly like that – it’s very motivating when something works right away.
    Thank you so much.

    I have one last question on this topic:
    the top border disappears for all togglers if you select them separately using the sort function expect from the first one (please see screenshot).
    Is there a quick fix for this too?

    Thank you very much in advance.

    Best regards, fkm

    February 16, 2022 at 7:57 am #1340856
    Ismael

    Hi,

    Thank you for following up.

    It seems to be a styling issue with the theme. To add a border on top of the first toggled item, try to use this css code. 

    .taglist {
    border-bottom: 1px solid #c5c6c6 !important;
    padding-bottom: 30px;
    margin-bottom: 0 !important;
}

.togglecontainer .av_toggle_section:first-of-type .toggler {
    border-top-width: 0;
}

    Best regards,
    Ismael

    February 16, 2022 at 10:32 am #1340889
    fkm

    Hi Ismael,

    thank you very much for your reply and for the ccs code, which again works great.

    First, it made the top border of the first toggler/entry thicker (because it was double), but I could quickly fix this problem with the following css code:

    .toggler {
    border-top: none!important;
    }

    Now everything is just fine and you can close this topic as successfully solved.
    Thanks a lot for your support.

    Best regards, fkm

    February 17, 2022 at 4:41 am #1341030
    Ismael

    Hi,

    Great! Please feel free to open another thread if you need anything else. We will close this one for now.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘chnages to the accordion sorting options’ is closed to new replies.