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

Rowby Goren
Rowby Goren used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
srihari chanderSoftware Engineer
Commented:
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... */
}

Author

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

Author

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

Stay tuned....
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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
Web Developer/Designer
Commented:
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

Author

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 LyonWeb Developer/Designer
Commented:
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.

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial