Search Widget transparent background

[hastur42Participant]

Hello Support!
I need a little help with the Ajax Search Pro plugin. So far, everything has worked great to get the search working against my Categories. No problems there as far as I can tell.

The problem is that I have the search bar setup to display in two separate areas.

1) The main page (along the top between the menu and page content. Looks great! (see attached pic #1)
http://www.soundscenes.com
2) When navigating the other pages, the search bar should be displayed at the top of the right sidebar in a widget. (see attached pic #2)
http://soundscenes.com/catalog/atmo/nature/birds/laughing-gull/

The search widget does not look great. I want the background to be transparent and not white. The Ajax Search Widget element is the first one at the top of the (laughing gull) page and it has a blue border at the top if I skip the title. The second search widget is a text widget with the Ajax shortcode put in…. but it still has the white background.

I’ve searched the knowledgebase, manual, and tried multiple CSS edits to adjust the widget background with no luck.

Can you recommend what setting I should be looking for to do this? Does the Ajax shortcode supercede all custom CSS that I try to use at the theme level?

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

The background color is coming from the widget container. The widget container layout is purely controlled by the theme CSS. However you should try the following custom CSS:

*[id*=ajaxsearchprowidget] h3.widget-title {
    display: none !important;
}

*[id*=ajaxsearchprowidget] {
    background: transparent !important;
}

These will force to remove the background from the widget container.

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

[hastur42Participant]

Hi Ernest!
Thanks for the quick reply! I tested out the custom CSS and it works to remove the white background!

The only thing it leaves behind is the empty widget title bar just above it (pic attached)… is there another piece of CSS that I could use to remove that as well?

Thank you again for your assistance!

Regards,
R

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

Have you entered the first part of the custom CSS? I don’t see it on the page.

*[id*=ajaxsearchprowidget] h3.widget-title {
    display: none !important;
}

This is supposed to hide the widget title aka. the blue bar.

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

[hastur42Participant]

D’oh! Got it! The first part was definitely missing and after a quick cache dump the title bar is removed.

Thanks Ernest! Top notch plugin and support! Much appreciated!

[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