Sidebar Search widget transparent

Hi there,

I’ll add this to the to-do list for the next version. In the meantime, you can use this CSS:

.sidebar .widget.pen_widget_transparent input[type="button"],
.sidebar .widget.pen_widget_transparent input[type="submit"] {
  background: transparent !important;
  color: #fff !important;
}

Hope it helps!

Thanks for the CSS, but it helps only a little bit.

Now the background of the button is transparent (OK), but the button text remains blue and the button has a white border.
On hoover the text changes to white and the button border changes to blue.

I tried to play with the last line of the CSS (color: #fff !important;) and changed the color to #c976c3, but it has no effect. The button text remains blue.
I also added “border: none !important;” which also had no effect.

It would be great, to have control about the color of the button text and the button border.
And if it would be possible, to have control about the color of the border of the text input field (including the option “border: none;”), that would be also very great. At the moment it looks like, that the text input field has no border at all.

Thank you very much for your efforts
Joachim

This is the entire CSS for the transparent search widgets, add this instead and change the colors:

#page .widget-area .widget_search.pen_widget_transparent .search-field {
	border: 1px solid #fff;
	color: #fff;
}
body.pen_drop_shadow #page .widget-area .widget_search.pen_widget_transparent .search-field {
	box-shadow: 2px 2px 5px rgba(0,0,0,0.25), 2px 2px 5px rgba(0,0,0,0.25) inset;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#page .widget-area .widget_search.pen_widget_transparent .search-field:focus,
#page .widget-area .widget_search.pen_widget_transparent .search-field:hover,
#page .widget-area .widget_search.pen_widget_transparent .search-field:active {
	color: #fff;

#page .widget-area .widget_search.pen_widget_transparent .search-submit {
	background: #fff;
	border: 1px solid #fff !important;
	color: #fff !important;
}
body.pen_drop_shadow #page .widget-area .widget_search.pen_widget_transparent .search-submit {
	box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
}
#page .widget-area .widget_search.pen_widget_transparent .search-submit:focus,
#page .widget-area .widget_search.pen_widget_transparent .search-submit:hover,
#page .widget-area .widget_search.pen_widget_transparent .search-submit:active {
	background: transparent !important;
	border-color: #fff !important;
	color: #fff !important;
}

Although adding these as widget options is not a lot of work it may make the theme bloated, so unless many users request that I don’t think we’d ever add them as widget options. Thanks for your suggestion though, much appreciated.

Thank you very much, this was very helpful!

But … i inserted the css in “design – cutomizer – additional css” and … nothing happend. I tried a few changes and … nothing happend.

After a while i recognized, that there was a missing “}” in the css you posted above. Look at line 13, there it is missing.
I inserted the missing “}” and then it worked.
I also hat to add some “!important” at some places, so that the colors changed.

Here is my adjusted css:

#page .widget-area .widget_search.pen_widget_transparent .search-field {
	border: 1px solid !important;
	color: #5f2d5f !important;
}
body.pen_drop_shadow #page .widget-area .widget_search.pen_widget_transparent .search-field {
	box-shadow: 2px 2px 5px rgba(0,0,0,0.25), 2px 2px 5px rgba(0,0,0,0.25) inset;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#page .widget-area .widget_search.pen_widget_transparent .search-field:focus,
#page .widget-area .widget_search.pen_widget_transparent .search-field:hover,
#page .widget-area .widget_search.pen_widget_transparent .search-field:active {
	color: #eacaea !important;
	border-color: #c976c3 !important;
}
#page .widget-area .widget_search.pen_widget_transparent .search-submit {
	background: transparent;
	border: 1px solid #5f2d5f !important;
	color: #c976c3 !important;
	font-weight: bold !important;
}
body.pen_drop_shadow #page .widget-area .widget_search.pen_widget_transparent .search-submit {
	box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
}
#page .widget-area .widget_search.pen_widget_transparent .search-submit:focus,
#page .widget-area .widget_search.pen_widget_transparent .search-submit:hover,
#page .widget-area .widget_search.pen_widget_transparent .search-submit:active {
	background: transparent !important;
	border-color: #c976c3 !important;
	color: #eacaea !important;
}

You can have a look at the result at reicom.de
The Search is at the bottom of the left sidebar.

Have a nice and sunny week,
Joachim

• This reply was modified 4 years ago by joachimherb.

That’s great, and thanks!