If you’re using the Extra Theme, chances are you might want to customize the look and feel of the sidebar search widget. Here is how to style it.
Customize the Extra Theme Search Widget using CSS
You’ll need to add a little bit of custom CSS to change the colors in the Extra Theme search widget.
Here’s how you can use some custom CSS to restyle your search bar, making it more visually appealing and user-friendly.
Step 1: Start by navigating to the “Extra > Theme Options > General > Custom CSS” section in your WordPress admin area. This is where you’ll paste your custom CSS.
Step 2: Copy the below code and paste it in the Custom CSS box:
/* Style the search widget */
.et_pb_widget.widget_search input[type="search"] {
background-color: white; /* Set the background color to pure white */
color: #000000; /* Apply a high-contrast black for the text */
font-size: 18px; /* Increase the font size for better legibility */
font-weight: 600 !important; /* Bold the text */
}
/* Style the search widget placeholder text */
.et_pb_widget.widget_search input[type="search"]::placeholder {
color: #666666; /* Use a darker shade for the placeholder text for better visibility against the bright background */
}
This custom CSS implements several changes to the style of the Extra Theme’s search widget. In this example, we’ve kept the background of the search input pure white for a clean look (but added in a CSS rule for it that you can change if you want a different background color) and contrasted it with dark-colored text for legibility. Additionally, we’ve bumped up the font size and made both the entered text and placeholder text bold. The placeholder text is styled in a darker shade that’s distinctive yet still remains visible against the bright background.
And there you have it! A way to revamp the look for your search widget, so that it’s not just visually appealing, but also more usable by your site visitors.