Add Search Widget to Baskerville 2

colette100 · Member · Jul 8, 2023 at 2:29 am
Copy link

Add topic to favorites
In the theme Baskerville 2, I would like to add a search widget, but want it to look just like the one on the ‘Nothing Found’ page. When I add a search widget, it looks nothing like the ‘Nothing Found’ search. How can I use CSS to make it look like the search on the ‘Nothing Found’ page?

WP.com: Yes
Jetpack: No
Correct account: Yes

The blog I need help with is: (visible only to moderators and staff)
aleone89 · Staff · Jul 9, 2023 at 2:42 pm
Copy link
Hey there,

Happy to help you with this.

The search widget and the search box on the nothing found page, look very similar to me, except the search buttons differ from an icon to the word Search – is this what you’re looking to change?

This is what I’m seeing when I compare the two.

Many thanks and looking forward to hearing more!
colette100 · Member · Jul 9, 2023 at 6:24 pm
Copy link
Hello, thank you for responding! I am currently using a different theme for my website, but would like to use Baskerville 2. When I use ‘Try and Customize” with that theme and add a search widget, it does not look the same as the search widget on the nothing found page.
aleone89 · Staff · Jul 10, 2023 at 8:17 am
Copy link
Hey there,

Ah I see what you mean between the two styles.

It would be possible to change that with some CSS, however, we wouldn’t be able to write an apply that until the theme is activated for the site.

Do you know when/if you’re ready to make the changes to the site live?
colette100 · Member · Jul 10, 2023 at 5:38 pm
Copy link
Okay, I just activated it.
colette100 · Member · Jul 10, 2023 at 5:39 pm
Copy link
As you can see, the search widget on the sidebar looks weird and not like the one on the “Nothing Found” page for the theme.
staff-totoro · Staff · Jul 10, 2023 at 8:28 pm
Copy link
Hi there,

I can confirm that the Premium Plan is active on your account. The following CSS will style the sidebar search so it is very similar to the one one the 404 page.
```
/*style sidebar search block to match search on 404 page*/
.wp-block-search__button {
    margin-left: 0;
    padding-right: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.wp-block-search__input {
    border: 0;
    background: #eee;
    padding-left: 20px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.sidebar .search-icon {
    height: 45px;
}
/*end sidebar search style*/
```
Please note that I was not able to substitute the search icon being used (the magnifying glass tilts in a different direction) since CSS can’t be used to change that. Otherwise the look is very similar between the two.

Hope that helps. Please let us know if you have any more questions.
colette100 · Member · Jul 10, 2023 at 8:32 pm
Copy link
Hello, thank you so much! This is fine with me, however, a website called marilynarchive.wordpress.com has the exact search widget that appears on the “Nothing Found” page so am confused as to how they did that.
colette100 · Member · Jul 10, 2023 at 8:48 pm
Copy link
Even in this image for Baskerville 2, it shows that search widget:
staff-totoro · Staff · Jul 10, 2023 at 8:59 pm
Copy link
Hi again,

To clarify, we have changed over time the way in which we add content to sidebars, switching from widgets to blocks for more flexibility and customization options. The demo site uses the legacy search widget we offered (at the time of the demo site launch) but it is not possible to add this widget on newer sites.

The search block has different styles than the legacy search widget did, but can be styled with CSS, which is why we mentioned that as an option. Hope that helps. Please let us know if you have any more questions.

No items found.