Disable results CSS

This topic contains 6 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 2 weeks, 6 days ago.

Viewing 7 posts - 1 through 7 (of 7 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 :)


Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.