[Resolved] Styling the Search bar

Home Forums Support [Resolved] Styling the Search bar

Home Forums Support Styling the Search bar

  • This topic has 5 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #558097
    Liad

    Hi,

    I’m trying to customize the look and feel of search bar in the header. I’ve been able to make some changes by adding this to the custom css:

    .widget .search-field {
    width: 100%;
    height: 30px;
    background-color: #eeeeee
    }

    I’m unable to figure out how to add the submit button as an icon next to the search bar or align the search bar to the right of the logo but on the left side of the header. Here is an example of what I’m trying to do: http://diyforme.com/wp-content/uploads/2018/04/search_header_example.png

    Any help would be greatly appreciated ๐Ÿ™‚

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #558555
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    To get the overall layout, you can do this:

    .header-widget .search-submit {
        display: block;
        height: 30px;
        line-height: 30px;
        padding-top: 0;
    }
    
    .header-widget .search-form {
        display: flex;
    }
    
    .site-logo {
        float: left;
    }
    
    .inside-header {
        display: flex;
    }
    
    .site-logo {
        order: 1;
    }
    
    .header-widget {
        order: 2;
        margin-left: 20px;
    }
    
    .secondary-navigation {
        order: 3;
        margin-left: auto;
    }

    Since it’s using Flexbox, you may want to run it through a program like this for maximum browser support: https://autoprefixer.github.io/

    Making the button a search icon is a little harder. Are you using Font Awesome on the site? If so, which version?

    #559032
    Liad

    Hey Tom,

    Thanks for the excellent response. I ran the code through autoprefixer as you suggested and added it to the CSS. Everything worked as expected and I can play around with the margins to get things set where we’ll need them.

    As for the submit button, I don’t run fontawesome on my site. Assuming an icon is the best way to go, how about this:
    <i class=”material-icons” style=”color:#ffffff; font-size:25px;”> & # xe8b6;” </i> (I had to separate the first two letters so it would post correctly)
    The button color would be: #e70137

    I also thought about an image for this, however, when I tried to add it using CSS, the results were less than stellar: http://diyforme.com

    What would you suggest in this case?

    #559694
    Tom
    Lead Developer
    Lead Developer

    Try adding color: transparent to your current CSS.

    Then add this as well:

    .header-widget .search-submit:hover {
        color: transparent;
        background: url('/wp-content/uploads/2018/04/search_button_30px-01.png');
    }
    #559973
    Liad

    Awesome Tom, It worked like a charm!

    If you don’t hear it enough, this really is an amazing theme you’ve created and I’ve been more than impressed with the support so far (great responses from you and your team and good documentation to go along with it). Seriously, keep up the excellent work!

    Out of curiosity, if I were to go with the icon option (now or down the road), would it be significantly more difficult to implement?

    Best regards,
    Liad

    #560224
    Tom
    Lead Developer
    Lead Developer

    Thank you! I really appreciate that ๐Ÿ™‚

    It wouldn’t be very difficult, but you would need the unicode for the font icon, instead of HTML.

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