Customise Search Bar

  • Author
    Posts
  • #605560

    stampthewax
    Member

    I’d like to delete the bold SEARCH word and red line that hovers above the search bar on my page. I’ve tried using display none but it selects the whole widget. I’d also like to change the colour of the search button itself. Is this possible?

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

    #605725

    The first part targets just the title of the search widget so that other widgets can have titles. The second bit is where the color for the search button is declared.

    #search_main h3 {
    display: none;
    }
    
    input.submit {
        background-color: #F3686D;
    }
    #605726

    You might also think about going just a little darker on the body text. The grey would be a little difficult to read for some.

    body {
    color: #7A7A7A;
    }
    #605747

    timethief
    Member

    ~~TSP
    My feedback as a visually challenged person is that the combination of the image background and gray colored text makes reading this blog a HUGE challenge when it comes to readability.

    #605752

    Yeah, changing the color of the text to black would help a lot.

    #606066

    stampthewax
    Member

    I changed the colour to black, should stand out alot more now. Thanks for the advice guys. Also sacred, I have just downloaded firebug and am gradually learning how to use CSS

    #606067

    timethief
    Member

    My feedback is that it’s better with black font but that gray smeary background is distracting and interferes with readability. If I were you I would get rid of it.

    #606068

    stampthewax
    Member

    ….(got cut off there)… on my own, it’s really fun. One thing I can’t get right is a little tech fault when I access the site with Internet Explorer. Two of the pag nav menu’s have drop downs to other pages. On mozilla you can hover over and then pick the one you want with ease. On IE, once you move your cursor off the the pag nav to choose from the drop down list, the list disappears (must be recognizing that the cursor has stopped hovering). It’s a tough one, but how can i tackle this. I noticed if you hover over the line that is underneath the word of the pag nav menu it works fine, so there must be a gap between the word and the line which is not there on Mozilla.

    I’ll be suprised if CSS can tackle this haa but yeah, any advice?

    #606069

    stampthewax
    Member

    thanks timethief,

    I shall work on it :)

    #606071

    There is what looks to be a 1px gap between the block that drops down and the bottom of the line below the top level menu item and if you move your mouse slowly to that 1px gap, the highlight on the top disappears and the sub menu block does not highlight right away. That I think is causing the issue, but I can’t seem to figure out how to move it up that 1px so that the highlight immediately moves to the submenu block.

    #606074

    stampthewax
    Member

    would changing fonts do anything?

    #606075

    No, there is some sort of padding or margin issue but I could not figure out where it is. It appears to be only a 1px gap. If the menus had a slight delay to them before the blinked away, that would likely fix it also, but that would have to be set in the theme files.

The topic ‘Customise Search Bar’ is closed to new replies.