[Resolved] Fix search bar style (Prime Template)

[WPguy]

Hi!

I’ve installed the prime template and imported demo content from the Prime template. And made sure all necessary elements are activated. However, my search bar looks different from the official prime template style.

I checked custom CSS – no issues.
I tried to style with custom CSS – didn’t work.

Can you please help me make my search bar look exactly the same as on the official prime template?

Details are in the attachment.

Thanks!

[Fernando]

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.

[WPguy]

Thanks, Fernando, got it.

So what is the CSS to fix that?

[Fernando]

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;
}

[WPguy]

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.

[David]

Hi there,

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

[WPguy]

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.

[David]

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.

[WPguy]

Thank you, David!

[David]

You’re welcome

[Author]

Posts