Can I customize plugin in DIVI theme?

[Amber AtkinsonParticipant]

Hi there,

I have done a few hours searching but thought it might be quicker to ask the experts!

I am using the DIVI theme (actually I’m using a child theme with the DIVI builder) and am having troubles customizing the theme style of AJAX search pro.

I have tried some of the suggestions offered: turn on the Inline Styles; Compatibility Options -> CSS compatibility level and change it to Maximum.

I haven’t had any luck and thought you’ve probably had this question a number of times already so you may be able to tell me what if what I’m trying to achieve is possible.

Can you please let me know if it’s possible to style the plugin while using divi?

Also, as I am a web design novice I haven’t set up a ftp however I have provided you with login info to cpanel so that you can access file manager.

I look forward to hearing from you.

ps. I purchased a plugin called called Reactive PRO from RedQ which promised everything your plugin does. They stung me a long for a month and then told me yesterday that their planned update for last week was not happening. It was a paid plugin and It never worked.
I am so impressed with how intuitive your plugin is! Thank you!!

[Ernest MarcinkoKeymaster]

Hi!

First of all, thank you very much for your kind words, I really appreciate it!

I’ve logged in with the given details to check on the search instance settings and the layout. So far the search style looks okay to me both on the front-end and the back-end. I’ve made a few minor changes to the search theme (like isotopic result title background color), but I can see the change as well on the front-end. Example:
– Back-end change: https://i.imgur.com/ZzjUFue.jpg
– After saving, front-end change visible: https://i.imgur.com/bNruOOw.jpg

Is this the problem, or do you mean something else? If so, then after making a chage, make sure to clear your site cache (if you have any) and re-load the page after clearing the browser cache (reloading the page by hitting CTRL + SHIFT + R will do it automatically).

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

[Amber AtkinsonParticipant]

Thank you so much for your reply.

I seem to be getting further away from what I’m trying to achieve, the more I fiddle with the settings.

I’ve contacted WP Kraken for a quote however I think they may be taking a 3 day break for a public holiday and my client is pretty disappointed in me, so I’m grasping at straws.

I am trying to achieve a filterable search like the one on this page: https://www.waituk.com/entrada/modern/home/zoom/

I feel like it’s definitely achievable with your plugin, it just may need a little css styling? Is this correct? Or are there settings within the plugin where I can change or do I need a guru?
I’m having trouble with the following:
1. Changing the background of the search settings to white and text to black (changes to these in ‘theme options: drop down’ don’t take effect).
2. Can I change the spacing between the search settings boxes?
3. I’m so sorry, but can you please tell me which setting to change so that all three fields need to be selected before results appear? At present, as soon as one dropdown menu is selected the search results appear.
4. I need the search results to appear in a new tab. I have had a play around with the provided short codes but can’t get anything to work except the quick shortcode. For example, when I paste the folling: [wpdreams_asp_settings id=1 element='div']
nothing appears on the published page. Can you please tell me how to achieve the settings boxes only?

I’m so sorry about this. The more I mess with the settings, the more I chew hours of time getting nothing done.

I look forward to hearing from you.

[Ernest MarcinkoKeymaster]

Hi!

1. and 2. – these might be overruled by a theme or another plugin CSS, as fieldsets and other form elements are very common. To force some space between the items, try this custom CSS:

div#ajaxsearchprobsettings1_1 form>fieldset {
    margin: 0 10px !important;
}

..for the background and color:

div#ajaxsearchprobsettings1_1 {
    background: white !important;
}

div#ajaxsearchprobsettings1_1 *:not(select) {
    color: black !important;
}

PS: These rules are all tailored for the 1st search instance only!

3. That is unfortunately not possible with an option. Maybe with a custom script to prevent the change event ulness all boxes have a specific value. I might be able to suggest a solution, but only when the search configuration is somewhat final. You can let me know when you have that, and then I will try to figure something out.

4. The settings shortcode is to display the results container on the same page (for the live search), but in a different location as the default (below the search bar). It’s not possible to place it on a second page and transfer the results there using that shortcode.
To have the settings boxes only, on the Layout Options -> Search box layout panel there is an option to disable it: https://i.imgur.com/MTquzHp.png

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

[Amber AtkinsonParticipant]

Thank you so much for your reply.

I tried copying tat CSS into several places but haven’t had any luck unfortunately. My client is not liking the small, thin black settings boxes at all 🙁

I pasted the theme into the css box in the plugin; into my theme custom css; into the page I am trying to achieve the styling… and I haven’t had luck.

I seem to be able to style the search box with the themes, however the settings boxes won’t change at all.

One other thing. Can I increase the height of the Drop down column? In one column I have listed the days of the week however Sunday is being cut off and I need to scroll down to see it.

I look forward to your advice.

[Ernest MarcinkoKeymaster]

Hi!

You are very welcome!

Can you maybe point me which aspects should be changed and how, with a screenshot? A link to a page where I can see the search would help a lot too 🙂 I will try to tailor a custom CSS code targeting those specific items.

The max height of the boxes can be changed actually: https://i.imgur.com/R89IPfV.png
That should do the trick.

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

[Author]

Posts