Support » Theme: Pen » Sidebar Search widget transparent

  • Resolved joachimherb

    (@joachimherb)


    Good morning.

    If i add the wordpress Search widget to the sidebar and set it to “transparent”, then the search field is transparent, but the search button does not apply to the theme-colors. Button background is white and button text is blue. Have a look at this screenshot:

    Search Button
    On mouse over the colors of the button background and the button text are exchanging (background blue and text white).
    In the customizer i didn’t find any setting for this.

    Please can you apply the theme colors to the search button?

    Joachim

    • This topic was modified 1 month, 3 weeks ago by joachimherb.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author htmlpie

    (@htmlpie)

    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!

    Thread Starter joachimherb

    (@joachimherb)

    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

    Theme Author htmlpie

    (@htmlpie)

    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.

    Thread Starter joachimherb

    (@joachimherb)

    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 1 month, 2 weeks ago by joachimherb.
    Theme Author htmlpie

    (@htmlpie)

    That’s great, and thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.