Changing font color -- this should be easy but I can't do it!

Hi

I've wasted enough time with Firebug, and need help with this simple request.

Please go to this page:  Search box

I'm trying to change the color for the word "Search..." in the upper right search box.

Maybe my eyes are sleepy but I cant' get firebug to help me change the color of the text to any color.  White will do.

Also, part "B" to this question. If you look at the page in Chrome the upper right brown area containing the search box and Social Media icons and the "Sign In" text look fine  But in Firebox, the search icons and "Sign In" are too low and are partially below the brown area..   Any way to keep those consistent?

Looking for your help! ;)

Thanks,

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

srihari chanderSoftware EngineerCommented:
Hi,
      The color of search can be changed, by adding the color tag to this css class.

Do the below changes in your styles.scss.css file.

input.search_box {
color: #fff;   /* The Required color code... */
}
Rowby GorenAuthor Commented:
Hi srihari,

Thanks for helping me on this.

I added the following, and I see it in firebug.  Howevever the color of the font is not changing.

input.search_box {
    padding: 9px 9px 9px 28px;
    background: #C19165 url(//cdn.shopify.com/s/files/1/1137/1788/t/42/assets/search2.jpg) no-repeat 6px;
    border: solid 1px #d9d4a9;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 0px;
    font-family: 'Alfa Slab One', cursive;
    font-size: 16px;
    letter-spacing: 1px;
    color: #FF0000;
}

Open in new window


Link to site.

Strange!!

Rowby
Rowby GorenAuthor Commented:
Actually I think it's working in firefox.   Maybe I need to clear cache.

Stay tuned....
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Rowby GorenAuthor Commented:
Text color seems to be working in firefox.

However the beige background image in Firefox is about 10 pixels too low.

Any fix for this? too22.png
Brandon LyonSenior Frontend DeveloperCommented:
The placeholder text needs to have it's color specified too, not just the color of the input text.

.search_box:-ms-input-placeholder,
.search_box::-moz-placeholder,
.search_box::-webkit-input-placeholder,
.search_box:placeholder-shown {
    color:    #000;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Thanks Brandon,  

Add the code, and will of course be dividing the points accordingly.

Do either you or srihari know how to fix the  issue with "beige background image in Firefox is about 10 pixels too low"

Or should I make that a different question.

Best

Rowby
Brandon LyonSenior Frontend DeveloperCommented:
In Firefox, the objects within the brown box are appearing larger than the other browsers. Since the background has a position center the background is moving down from the top. If the items are switched to vertical-align: top, then they will be top aligned and the box will be sized appropriately. This will cause other issues with the spacing of the items though.
Rowby GorenAuthor Commented:
Hi

Thanks. I made some little tweaks and now it's  looking good on Firefox and Chrome and EE.

Hard to award the points, but I did the best I can do.

Rowby
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.