X
244751

Custom CSS - sorting section

Hi,
I’ve been trying to customize my sorting section with custom CSS, to make it look more like my theme, but i’m struggling at aligning the sorting section to center ( can only align the div element to left or right) and changing the hover effects and drop downs.

Could you please advise me on which element i need to target?

And a bonus question, is it possible to hide the small evo filter button?

Thanks!

BY: Lars Bugge - Jul 12,2021 AT 1:40AM - 3 years ago
    • Artem Jul 12,2021 AT 2:21AM - Posted 3 years ago - #244760

      Hello,

      Please add this CSS code to EventON > Styles (If you don’t see any change, EventON > Scripts & Styling > turn off Write styles to header > save settings > turn on Write styles to header):

      .eventon_sorting_section {display: flex !important;align-items: center;justify-content: center;} .evo_cal_above .evo-filter-btn, .evo_cal_above .evo-sort-btn { display: none !important; }

    • Lars Bugge Jul 12,2021 AT 2:51AM - Posted 3 years ago - #244767

      Thank’s! Works great! Support on this plugin is always aces!

    • Lars Bugge Jul 12,2021 AT 2:53AM - Posted 3 years ago - #244768

      Ohh, i forgot, how do I change the hover color and style of the dropdown?

    • Kenneth Jul 12,2021 AT 6:05AM - Posted 3 years ago - #244789

      Hi there,

      I tried to access the page you have linked but I am getting a 404 error. Please send in a link that works so that we can take a look and give you the accurate custom CSS to use.

    • Lars Bugge Jul 12,2021 AT 8:47AM - Posted 3 years ago - #244834

      Sorry!

      Here you go:

      https://dev.ungdomsringen.dk/eventsworkshops/

    • Kenneth Jul 12,2021 AT 9:27AM - Posted 3 years ago - #244838

      To change the hover color, please use the custom CSS below:

      .eventon_filter_line .filtering_set_val:hover {

          background-color: #d2d2d2;

          color: #fff;

      }

      .eventon_filter_dropdown p.select, .selecttype .eventon_filter_dropdown p, .ajde_evcal_calendar .evo-sort-btn .eventon_sort_line p.select{

      background-color:#f7f7f7;

      color:#000;

      }

      Let us know if this works for you. If it does not, please give us some more insight on the styling you are hoping to achieve.

    • Lars Bugge Jul 13,2021 AT 2:39AM - Posted 3 years ago - #244894

      Yes, works very nicely!

      The only thing I can’t figure out is how to change the spacing between the dropdown elements, so a little more of the white background is showing. How would I best approach this?

       

      https://dev.ungdomsringen.dk/eventsworkshops/

       

       

    • Artem Jul 13,2021 AT 2:53AM - Posted 3 years ago - #244905

      Please use this code:

      .eventon_filter_dropdown p, .ajde_evcal_calendar .evo-sort-btn .eventon_sort_line p { border: none; }

You must login to reply to this ticket

HelpDesk

Welcome to EventON helpdesk.

EventON is the #1 Best selling event calendar plugin for WordPress websites in envato marketplace.

Checkout EventON