Disable results CSS

[theapeParticipant]

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.

[Ernest MarcinkoKeymaster]

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 :)

[theapeParticipant]

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?

[Ernest MarcinkoKeymaster]

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 :)

[theapeParticipant]

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.

[theapeParticipant]

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

[Ernest MarcinkoKeymaster]

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 :)

[theapeParticipant]

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?

[Ernest MarcinkoKeymaster]

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 :)

[theapeParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

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 :)

[theapeParticipant]

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.

[Ernest MarcinkoKeymaster]

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 :)

[theapeParticipant]

Thank you, that did the job. 🙂

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts