Facebook like: font color

I using the like button found on the following page:

http://developers.facebook.com/docs/reference/plugins/like/

Is the开发者_Python百科re any way to change font color to white as black doesn't show up on my background.

thank you!

You can set colorscheme="dark" or data-colorscheme="dark". There is an option for color scheme when you generate the like button.

Overriding CSS styles can be done many ways, here's a short explanation of specificity from MDN:

https://developer.mozilla.org/en/CSS/specificity

Specificity is the means by which a browser decides which of the matching CSS rules for a given property is the most relevant.

Broadly speaking the rules are chosen in the following order:

• rules marked !important
• those attached to the element itself (i.e. <div style="color:red;">)
• the rules with more ids in the selector (e.g. "#foo #bar" beats "#baz")
• rules with more classes (e.g. ".x .y .z" beats ".a .b", but they are both beaten by "#a" from the previous rule)
• rules with more tags (e.g. "body div span" beats "p strong")
• rules that don't apply to the element in question but are further up its inheritance chain

And I might also add that a subsequent occurence of a rule overrides the first, so it's helpful to include your own CSS after your libraries, external resources, etc.

.rule { color: red; }
.rule { color: blue; }

Now you just need to study the element to find out what rules apply to it. Chrome's Inspect Element or Firebug in Firefox both have panels that show the CSS that has been inherited by an element.

In this case, I can see that the blue color comes directly from the .liketext class. So override it any way you can. The easiest is to redeclare the .liketext class to override just that one property with !important.

.liketext { color: white !important; }

If that doesn't immediately work, start applying the specificity rules:

.connect_widget_like_button .liketext { ... }
.connect_widget_like_button span.liketext { ... }