Knowledge Base

Style changes does not apply after saving

in Ajax Search Pro Troubleshooting Tags: changescsssavestyle

There are multiple possible causes for this issue:

  1. If you have a caching method (plugin, cloud service) activated the style sheet might be cached
  2. The style sheet file is not writable
  3. Theme styles are overriding the search styles
1. Cache purging

If you have any caching plugin active make sure you purge the cache, or disable caching while styling the plugin. Services like Cloudflare or MaxCDN add an additional layer of caching.

In case you are using a CDN service, you will probably need to purge the search style sheet as well. If you don’t want to purge all of your cache, then the files in the following directory needs to be purged: yourdomain.com/wp-content/uploads/asp_upload/

2. Stylesheet generating issues

By default the search tries to determine whether the style sheet file is created and writable. In case of failure it forces to turn on “Inline styles”, so the style sheet is directly outputted to the site header. If you are still experiencing issues, you should definitely try to check the permissions and the ownership of the CSS directory.

  • Try to chmod to 777 the following directory: yourdomain.com/wp-content/plugins/ajax-search-pro/css/
  • Check the ownerships, and allow the www-data process to use the ajax-search-pro folder via SSH: (check the paths, they might be different!!!)
    sudo chown -R root:www-data /var/www/example.com/public_html/wp-content/plugins/ajax-search-pro

    and

    sudo chown -R root:www-data /var/www/example.com/public_html/wp-content/plugins/ajax-search-pro/css

You can alternatively turn on the Inline Styles, which most likely solves the issue immediately:

Turning on Inline styles

3. Theme style override

You can identify this issue easily by seeing some of the changes apply, some of them don’t. Usually the search bar color, background colors, icons apply and the font colors, paddings don’t.

From plugin version 4.0 there is a forced fix that might work:

Go to Compatibility Options -> CSS compatibility level and change it to Maximum

  • Save your search instance settings again afterwards, just to make sure, that the stylesheet is properly generated
  • Don’t forget to clear your site and browser cache afterwards (including Cloudflare if you are using it)

The cause of this are simple CSS rules, most likely coming from the theme. Unfortunately there is a thing called CSS specificity. It means, that some of the rules have priority over other ones. So if two rules define two different colors for the same element, the one with the higher specificity applies. You can read more about the CSS specificity here: http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html

The best way to treat this is to create custom CSS rules with higher specificty to override the ones that are overriding those coming from the search plugin. If you don’t know CSS or don’t know how to fix these issues, then feel free to open a support ticket and we gladly help you out.