Search button customization

Home Pootlepress Academy Support Forums Academy Support Forum Misc Search button customization

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #23365
    Victoria Vinton
    Participant

    Here’s a link: http://www.uxbootcamps.com

    My nav bar is black with white text. The search icon on the right of the nav bar is a white icon, which is fine, but when I click in it, I get a drop down which has a black background and hardly readable text. I’d like the search field to be white in the drop down box so it’s easier to read.

    Thanks as always for your help. You guys are amazing!

    #23375
    Juliet Lynn
    Participant

    I have the same problem here: http://andfis1.jlclient.com/ and would love help on this!

    #23438
    Jamie Marsland
    Keymaster

    Hi Juliet,

    Check out my css tutorial as this will show you how to do it.

    Also here is a really useful plugin that will help https://wordpress.org/plugins/so-css/

    Jamie

    #23482
    Juliet Lynn
    Participant

    Hi Jamie

    I’ve installed the Siteorigin CSS plugin and it’s great – has enabled me to make lots of CSS changes I was struggling with. However, I have tried everything and I still cannot make the search box in the Navigation Bar appear in White. I have made the following css changes but the color remains the same:

    #s {
    color: #fff;
    }

    input {
    color: #fff;
    }

    #searchform input#s {
    color: #ffffff;
    }

    form#searchform input#s {
    color: #ffffff;
    }

    I would really appreciate you taking a look at this for me. The website is: andfis1.jlclient.com.

    Thank you very much!

    Juliet

    #23483
    Juliet Lynn
    Participant

    PS: I have also watched your CSS for beginners tutorial which was very helpful!

    #23709
    Juliet Lynn
    Participant

    Victoria – have you managed to sort this problem out yet?
    Juliet

    #23749
    Jamie Marsland
    Keymaster

    Hi Juliet,

    Try this below (color is the text colour, background is the background colour – so replace with the colours you want)

    #navigation ul.nav-search .searchform input.s {
    color: red;
    background-color: white;
    }

    #23766
    Juliet Lynn
    Participant

    Hi Jamie – I really appreciate that help, it’s almost there now. The font colour in the search box is now white, but the submit magnifier button is still unchanged. Using Siteorigin CSS editor I thought I had tracked it down and I made the following change:

    #navigation ul.nav-search .searchform .submit {
    color: #ffffff;
    }

    but this has not made any difference . Can you advise again please?

    Thanks, Juliet

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