Skip to:
Content
Pages
Categories
Search
Top
Bottom

Search form styling

  • @etchbee

    Participant

    Hi,
    I am just trying to find an answer to style search form on index page but had no luck. Can anyone please tell me how to style the search form? I want the width 100%, if possible same as Generatepress support form. Would much appreciate your help.
    Thank you in advance
    Etchbee

Viewing 3 replies - 1 through 3 (of 3 total)
  • @robin-w

    Moderator
    #bbp-search-form input[type="text"] {
    	font-size: 15px;
    	background: #fff;
    	border: 1px solid #bacad6;
    	margin-right: -4px;
    	border-right: 0;
    	border-top-left-radius: 5px;
    	border-bottom-left-radius: 5px;
    	border-top-right-radius: 0px;
    	border-bottom-right-radius: 0px;
    	width: calc(100% - 85px);
    }
    #bbp-search-form input[type="submit"] {
    	font-size: 15px;
    	border-top-right-radius: 5px;
    	border-bottom-right-radius: 5px;
    	border-top-left-radius: 0px;
    	border-bottom-left-radius: 0px;
    	width: 84px;
    }

    @etchbee

    Participant

    Hi @robin-w
    Thank you for quick reply and code. I placed the code to customizer and it looks little better, however the width of the search form is still half of the area. Is it possible to display 100% width? BTW, the search form is displayed automatically without any shortcode. Here is my bbpress installation.
    Thanks again.
    Etchbee

    @robin-w

    Moderator

    play with the width settings in the above code

    width: calc(100% - 85px);

    and

    width: 84px;

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