Remove box around 'search'

  • Author
    Posts
  • #1395078

    oneequalstwo
    Member

    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.

    #1395380

    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/

    #1395385

    oneequalstwo
    Member

    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!

    #1395387

    mrdirby
    Member

    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;
    }
    #1395390

    oneequalstwo
    Member

    YAY! That worked. Can’t thank you enough. It looks so much better! Thanks for your time mrdirby and designsimply.

    #1395391

    oneequalstwo
    Member

    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!!

    #1395392

    mrdirby
    Member

    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.

    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.

    #1395400

    oneequalstwo
    Member

    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.

    #1395401

    mrdirby
    Member

    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.

    #1395402

    oneequalstwo
    Member

    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.

    #1395403

    mrdirby
    Member

    Yes you would change #eee to #f5f5dc.

    #1395404

    mrdirby
    Member

    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.

The topic ‘Remove box around 'search'’ is closed to new replies.