Disable results CSS

This topic contains 15 replies, has 2 voices, and was last updated by theape theape 1 year, 2 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #38589
    theape
    theape
    Participant

    Is there a method to disable specific sections of CSS? I’ve created a custom vertical template for the search results and I use my own CSS and classes (no conflicts), but the ASP CSS is too aggressive and breaks the formatting/layout. I know I can add custom CSS via the ASP settings, but I’m assuming all I need is the JS for the searches to continue functioning due to inline styles for Ajax related functionality. I want to use ASPs CSS for the filtering and not the results, but I’ve so far been unable to unravel or unset the CSS.

    #38597
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    You should definitely use custom CSS. You can surely override them, just have to create higher specificity rules.

    The problem with disabling them is, that the plugin generates all of the search bar CSS in one request, and they are not separated like that. So you either disable all of the CSS or none of it.

    There is a simple programmatical way of disabling all of the CSS. Theoretically, you could collect all the required CSS from the plugin enqueued CSS files, then put them into a custom css file, along with your styles, then disable them via the above mentioned method. That would actually work.

    There are usually 2 CSS files enqueued:

    wp-content/uploads/asp_upload/style.basic-{OPTIONAL_QR_STRING}.css
    wp-content/uploads/asp_upload/style.instances-{OPTIONAL_QR_STRING}.css

    The search results CSS rules usually either start with:

    #ajaxsearchprores...

    ..or

    div.asp_r

    ..or

    .asp_r

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #38598
    theape
    theape
    Participant

    That’s exactly what I needed! I don’t know how I missed that in the ‘filters’ documentation. I think I was hung up on it being in the templating section, or not being.

    I’m going to add a custom style.cc in the asp theme folder that includes the asp styles that I want to keep and ‘wp_enqueue_script’ said style.css in the footer via my ASP Mod plugin.

    Can I suggest/put forward a potential future feature, that by adding a style.cc to the asp folder in the theme folder overrides the frontend css added by the plugin automatically?

    #38599
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    You are welcome 🙂

    Well, I am not sure if we can add such feature, but we will definitely consider. For now, you can use that small custom code snippet 🙂

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #38605
    theape
    theape
    Participant

    For future reference, normally for myself as I’ve forgotten how something was accomplished and my comments don’t help. This is what I did.

    I added this code to a custom plugin that I’m using to modify ASP functionality.

    // Hook to prevent the plugin stylesheet (CSS) files loading
    
    add_filter( 'asp_load_css', 'illo_asp_stop_load_css', 10, 1 );
    
    function illo_asp_stop_load_css( $stop ) {
    	if (is_page('search')) {
    		return true;
    	}
    }
    
    add_action( 'get_footer', 'illo_asp_custom_css' );
    
    function illo_asp_custom_css() {
        if (is_page('search')) {
    		wp_enqueue_style( 'illo_asp_custom_css', get_stylesheet_directory_uri() . '/asp/style.css' );
    	}
    }

    I made a copy of the following file and uploaded it to the asp folder in my child theme.

    wp-content/uploads/asp_upload/style.instances-{OPTIONAL_QR_STRING}.css

    Then I commented out the following CSS.

    Line 2560

    /* div.asp_r.asp_r_2, div.asp_r.asp_r_2 *, div.asp_m.asp_m_2, div.asp_m.asp_m_2 *, div.asp_s.asp_s_2, div.asp_s.asp_s_2 * {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -ms-box-sizing: content-box;
        -o-box-sizing: content-box;
        box-sizing: content-box;
        border: 0;
        border-radius: 0;
        text-transform: none;
        text-shadow: none;
        box-shadow: none;
        text-decoration: none;
        text-align: left;
        letter-spacing:normal
    } */

    Line 2584

    /* div.asp_r.asp_r_2, div.asp_r.asp_r_2 *, div.asp_m.asp_m_2, div.asp_m.asp_m_2 *, div.asp_s.asp_s_2, div.asp_s.asp_s_2 * {
        padding: 0;
        margin:0
    } */

    Line 3303

    /* #ajaxsearchprores2_1.vertical .resdrg, #ajaxsearchprores2_2.vertical .resdrg, div.asp_r.asp_r_2.vertical .resdrg {
        display: flex;
        flex-wrap:wrap
    } */

    Obviously the stylesheet I made a copy of is created dynamically from the options chosen in List > Theme & Styling. But generally these were the style that were causing me issues with my specific set up.

    #38612
    theape
    theape
    Participant

    What do I need in my template to get the Ajax loading spinner working?

    #38613
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    It is generated based on the exact loader.

    Look for styles with the classes:
    proloader and asp_loader asp_loader-inner asp_simple-circle

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #40223
    theape
    theape
    Participant

    Updating to the latest version broke my custom CSS, boxes no longer tick when clicked on. Is there a quick fix due to a naming convention change or do I need to rework my custom CSS from scratch to find the issue?

    #40251
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Can you copy/paste your exact custom CSS here? A few accessibility changes were made specifically for the checkboxes, structurally not much, the label element was replaced with a div.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #40252
    theape
    theape
    Participant
    You cannot access this content.
    #40256
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Thanks.

    Try replacing .asp_option_inner label
    with: .asp_option_inner .asp_option_checkbox
    ..that will do the most of it.

    For future, if you can, then I rarther recommned not overriding all of the CSS, it is better to use a few override rules, much simpler to edit. Sometimes the strucure may change a bit, not very often though.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #40258
    theape
    theape
    Participant

    Almost, I’ve got the tick on hover now, but it doesn’t remain after an item is clicked.

    not overriding all of the CSS, it is better to use a few override rules

    I would have done that and preferred to, but I think there were too many conflicts with the results CSS.

    #40268
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Check if you can find anything like this:

    .asp_option_inner input[type=checkbox]:checked ~ label

    and replace with

    .asp_option_inner input[type=checkbox]:checked ~ div

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #40269
    theape
    theape
    Participant

    Thank you, that did the job. 🙂

    #40272
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.