Need help? Check out our Support site, then


Remove box around 'search'

  1. Hi. I'd like to remove the thin border and grey box around 'search' so that the magnifying glass and word 'search' remain, but with no surrounding box.
    I'd also like the word 'search' to be black.
    Is this possible, by adding code to the custom CSS area? And if so, what would I add please? Many thanks!

    The blog I need help with is oneequalstwo.wordpress.com.

  2. To remove the border from the search box in the sidebar on your Twenty Eleven theme, add this to your Appearance > Customize > CSS panel:

    #branding .only-search #s,
    #branding .only-search #s:focus {
    	border: none;
    }

    To change the color of the placeholder text in the search form:

    ::-webkit-input-placeholder {
    	color: #000;
    }
    
    :-moz-placeholder {
    	color: #000;
    }
    
    ::-moz-placeholder {
    	color: #000;
    }
    
    :-ms-input-placeholder {
    	color: #000;
    }

    I found the placeholder CSS at http://css-tricks.com/snippets/css/style-placeholder-text/

  3. Thank you! The border outline on the search box deleted beautifully.
    The 2nd lot of CSS didn't work though unfortunately, and the dark grey solid search box still remains. Any ideas? I don't mind if, once the search request text is being entered, the light grey box appears; it's the very dark box I'm offended by!! I'd love it to be white/clear like my menu bar. Thanks for your time.
    PS. Thanks for the CSS tips site. I'm trying to get my head around CSS but it has me baffled so far!

  4. I think this should address the search box.

    #branding .only-search #s {
    background-color: #fff;
    border-color: #fff;
    color: #000;
    }
    
    #branding .only-search #s:focus {
    background-color: #fff;
    }

    And if you want to get rid of the boarder shadow.

    input[type=text] {
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    Although that might affect the look of other text forms on your blog. So try this instead if that happens.

    #searchform input[type=text] {
    -webkit-box-shadow: none;
    box-shadow: none;
    }
  5. YAY! That worked. Can't thank you enough. It looks so much better! Thanks for your time mrdirby and designsimply.

  6. PS. Any chance you could help me with the CSS for deleting the outline around the little comment bubble? I'm happy with the light grey, just want to remove the outline. Thank you!!

  7. The comment bubble is a reverse graphic with the outline as part of the graphic. CSS can be used to change the color of the bubble but the graphic has the outline. You can see what it looks like.

    http://s2.wp.com/wp-content/themes/pub/twentyeleven/images/comment-bubble.png

    To make it easy for you I edited the png. Download this graphic and add it to your site's media.
    http://mrdirby.files.wordpress.com/2013/08/comment-bubble.png

    When you upload the file click edit and get the full file url.

    Then add this to your style sheet. Inserting the file url in this code.

    .entry-header .comments-link a {
    background: #eee url('file url') no-repeat;
    }

    If you want to edit the color of the bubble change #eee to whatever color you want.

  8. Thank you so much for editing the .png file. Will give this a try and let you know! I may try re-colouring it in Photoshop to light yellow.

  9. You are welcome.

    The bubble color isn't the graphic. That is just white. So if you want the bubble to be a different color change the #eee to a color code in that previous css.

  10. Sorry, it's early in the morning here! I'm a wee bit confused. So if I want the bubble to be solid cream (like the panel behind my post intro text); no keyline, and the bubble change solid grey/no keyline (per existing), do I insert your supplied new bubble and add the solid cream colour to #eee? Thank you.

  11. Yes you would change #eee to #f5f5dc.

  12. If you want to change the color when you hover over the bubble use this css.

    .entry-header .comments-link a:hover {
    background-color: #b7afa3;
    }

    Then update that color.

    If you want to change the color of the number, update the last css I gave you.

    .entry-header .comments-link a {
    background: #eee url('file url') no-repeat;
    color: #808000;
    }

    That would make it the same color as the text in the cream box.

Topic Closed

This topic has been closed to new replies.

About this Topic