Baskervill 2 Sidebar Search Box Shape and Color

  • danielbarnette8 · Member ·

    Hey all,

    I’m trying to add a sidebar to my site and I’ve done so successfully, but I’d like to modify it more by making the search box typing field match the background color of the site and round the edges instead of it being a hard rectangle. I’ve changed the color via more setting on the search box, but when I change the color, no changes take affect. Any ideas?

    Here is one of the posts that has the sidebar and you can see that it’s white and rectangular. https://vbarneeze.cloud/2023/11/20/vxrail-enabling-vlcm-using-api/

    The blog I need help with is: (visible only to logged in users)

  • staff-dragon · Staff ·

    Hey there,

    It looks like your site is using a classic theme with a widget sidebar. Block widgets have limited functionality as they are no longer used in the new Block themes. This means there are two options for customizing the appearance.

    First, you might consider looking for a theme that supports the site editor, this will provide additional functionality such as template editing and more options for stylization. You can find themes that support the site editor here.

    The second option would be to use custom CSS to change the appearance of the search bar. You can learn more about using CSS on your site here:

    WP
    Add Custom CSS
    in WordPress.com Support
    6 min read
    While most changes can be made with settings in the WordPress editor, you may prefer to use CSS to customize your site if you have experience writing CSS code. This guide will show you how to edit your website with CSS. This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan.

    Hope this helps!

  • danielbarnette8 · Member ·

    I was going to change themes but porting over the content was going to be too cumbersome. What’s interesting is I’ve seen other Baskerville 2 based sites that have the exact look of the search bar that I’m looking for but they’re saying they’re just using the default tools. However, when I try to change the background or text of the widget block nothing takes effect.

  • supernovia · Staff ·

    Hey there,

    I’ve seen other Baskerville 2 based sites that have the exact look of the search bar that I’m looking for but they’re saying they’re just using the default tools.

    Could you share a link? Maybe we can spot what they’ve done.

    I was going to change themes but porting over the content was going to be too cumbersome

    For what it’s worth, the content should mostly stay put, except for a few themes that have front page templates (which you can opt to not use.) If you decide to try another theme, I’d just recommend choosing a Blogging theme to start, since those generally include what you need. Plus you can use a staging site to see how it shakes out before committing to changes:

    WP
    Create a Staging Site
    in WordPress.com Support
    5 min read
    Use a staging site to clone your entire WordPress.com site for testing purposes. This guide will show you how to create a staging website on WordPress.com. This feature is available on sites with the WordPress.com Business or Commerce plan. How to Create a Staging Site A staging site is a great place to test plugin and theme updates or any other changes you plan to make to your liv

    Let us know if you need help!

  • danielbarnette8 · Member ·

    Here is an example page, but also the theme demo page explains the sidebar widget and shows the search bar as grey with soft edges.

    VSI 10.4 – Snapshotting
  • supernovia · Staff ·

    Okay, I see what’s going on. That site has a much older legacy widget in place, and it’s got different CSS classes than the search block. The theme includes those classes but not the typical search block class. Luckily we should be able to copy most of those styles over.

    So to match the style on your site that I see here, try adding this to Additional CSS:

    .wp-block-search__input {
	background: #ddd;
	border: 1px solid transparent;
	border-radius: 3px;
	display: block;
	font-size: .9em;
	margin: 0;
	padding: 16px 55px 16px 20px;
	width: 100%;
	-webkit-font-smoothing: antialiased;
}

.wp-block-search__input:focus {
	color: white !important;
	background: #1f2f2b;
	border-width: 1 px important;
	border-color: #1f2f2b; !important;
}


    Or, adjust the colors as needed. Hoping this helps!

  • danielbarnette8 · Member ·

    Thanks @supernovia I was able to use some of that to get what I wanted. Only follow up that I have is – the side bar search widget that we modified is now missing the “…” doesn’t show in the typing field anymore. Since the CSS add is an override, does that mean we need to add something for the greyscale text?

  • staff-dragon · Staff ·

    Hey there,

    You are correct that additional CSS would be required to change the placeholder text which is blending in with the search box. You can change the color of the placeholder text using the following CSS: 

    /* Change placeholder text color */
::placeholder {
	color: #ffffff;
}

    I checked to see if this would change any other placeholder text on the site, and it should only impact the search bar.

    Hope this helps!

  • danielbarnette8 · Member ·

    Thanks @staff-dragon !

  • supernovia · Staff ·

    Noting you can also set that in the placeholder text of the search form block if you’d like! Let us know if you need more help. :)

  • The topic ‘Baskervill 2 Sidebar Search Box Shape and Color’ is closed to new replies.