Changing the appearance of the SEARCH box Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    Changing the appearance of the SEARCH box

    pms solincia
    pms solincia
    Forumember


    Posts : 28
    Reputation : 0
    Language : english

    Solved Changing the appearance of the SEARCH box

    Post by pms solincia November 7th 2009, 2:21 pm

    I've found a way to change the background color of the SEARCH box on my forums,
    however, I was wondering if it was possible to change my SEARCH box to look like the one on this site: http://www.palm.com

    If there is, please let me know!

    I'm currently using a skin (heavily modified with icons and color) "Floral Effects".

    Thank you for your time!
    ankillien
    ankillien
    Energetic


    Posts : 5198
    Reputation : 129
    Language : English, XHTML, CSS, JS, PHP, SQL

    Solved Re: Changing the appearance of the SEARCH box

    Post by ankillien November 8th 2009, 3:25 pm

    Hello,

    You mean the black colored search bar on the top of that site?
    pms solincia
    pms solincia
    Forumember


    Posts : 28
    Reputation : 0
    Language : english

    Solved Re: Changing the appearance of the SEARCH box

    Post by pms solincia November 8th 2009, 4:14 pm

    Yes, that's the one. I like how it also has rounded edges... is there a way to do that?
    ankillien
    ankillien
    Energetic


    Posts : 5198
    Reputation : 129
    Language : English, XHTML, CSS, JS, PHP, SQL

    Solved Re: Changing the appearance of the SEARCH box

    Post by ankillien November 8th 2009, 5:23 pm

    Yes, you can.

    I can give you a code that will make the search bar look like that but I can't make it exactly the same.

    Go to Admin CP > Display > Colors > CSS.
    Add this code there and submit.

    Code:
    #search #keywords {
    -moz-border-radius : 5px 0 0 5px;
    -webkit-border-radius : 5px 0 0 5px;
    background : #000;
    border : 1px solid #666;
    color : #CCC;
    }

    #search .button2 {
    -moz-border-radius : 0 5px 5px 0;
    -webkit-border-radius : 0 5px 5px 0;
    background : #000;
    border : 1px solid #666;
    color : #CCC;
    }

    Hope this helps Very Happy
    pms solincia
    pms solincia
    Forumember


    Posts : 28
    Reputation : 0
    Language : english

    Solved Re: Changing the appearance of the SEARCH box

    Post by pms solincia November 8th 2009, 5:54 pm

    That is perfect! Thank you!

    Out of curiosity, do you know how to change the second SEARCH box that appears by my forum posts or how to eliminate the second SEARCH box altogether?

    Here's the image...

    Changing the appearance of the SEARCH box Screenshot
    ankillien
    ankillien
    Energetic


    Posts : 5198
    Reputation : 129
    Language : English, XHTML, CSS, JS, PHP, SQL

    Solved Re: Changing the appearance of the SEARCH box

    Post by ankillien November 8th 2009, 6:19 pm

    Yes you can do it.

    Put this code in you CSS and submit.

    Code:
    #search_keywords {
    -moz-border-radius : 5px 0 0 5px;
    -webkit-border-radius : 5px 0 0 5px;
    background : #000;
    border : 1px solid #666;
    color : #CCC;
    }

    input.button2 {
    -moz-border-radius : 0 5px 5px 0;
    -webkit-border-radius : 0 5px 5px 0;
    background : #000;
    border : 1px solid #666;
    color : #CCC;
    }

    Note : This code will not work for Internet Explorer users. It will work for other browsers like Firefox, Opera, Safari etc.
    pms solincia
    pms solincia
    Forumember


    Posts : 28
    Reputation : 0
    Language : english

    Solved Re: Changing the appearance of the SEARCH box

    Post by pms solincia November 8th 2009, 6:28 pm

    Thank you so very much! You're amazing!! It's perfect!
    ankillien
    ankillien
    Energetic


    Posts : 5198
    Reputation : 129
    Language : English, XHTML, CSS, JS, PHP, SQL

    Solved Re: Changing the appearance of the SEARCH box

    Post by ankillien November 8th 2009, 6:36 pm

    Glad I could help you Very Happy

    Topic Solved > Locked