Fix search bar style (Prime Template)

Hello there,

Your FiboSearch is updated. The one used in Prime is currently an older version.

The design of the Search bar changes upon update.

You'll need to use the older version, or use custom CSS to change how it looks.

Thanks, Fernando, got it.

So what is the CSS to fix that?

They changed the styling. The style was coming from their plugin.

Though not perfectly identical, here's something you can try adding through Appearance > Customize > Additional CSS:

.site-header .dgwt-wcas-sf-wrapp {
    padding: 0;
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 6px !important;
}

.site-header input#dgwt-wcas-search-input-1 {
    border-radius: 7px !important;
    padding: 4px 20px;
    font-size: 14px;
    font-style: italic !important;
}

.site-header button.dgwt-wcas-search-submit {
    right: 0 !important;
    left: unset !important;
    top: 0 !important;
    height: 100% !important;
    background-color: #ff9b00 !important;
    border-radius: 0 !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

Thanks, Fernando, that worked!

But how do I change the placeholder text in the search bar? I used to find it in the element settings, but it's no longer there.

Hi there,

the plugin has its own settings in Woocommerce > FiboSearch --> Search Bar ( tab ) -----> Search input placeholder

Thanks David!

Last question on this one: how can I change the placeholder color and weight? I'm trying to do the change with CSS but to no avail.

I would really appreciate your help.

They provide this in their docs:

https://fibosearch.com/documentation/tips-tricks/how-to-change-placeholder-color/

Although you could probably reduce that down to this:

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #f00 !important;
}

Every property needs !important by the looks ofm it.

Thank you, David!

You're welcome