Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 158 Stack Exchange communities.

What is meta?
Here's how it works:
  1. Any Stack Exchange user can ask a question
  2. The community provides support, votes on ideas, and reports bugs
  3. Your voice helps shape the way Stack Exchange operates

I am trying to include the "flair" in my website. One problem I face is that I cannot change the background color. I went to the flair page and saw that I should use the css style to change. I am very poor in CSS. I have my domain in blogger. So it would be really helpful if someone could tell me how to do it.

This is what I've done which is not working

<script style="background-color:grey" 
  src="http://stackoverflow.com/users/flair/252398.js?theme=clean" 
  type="text/javascript"></script>
share|improve this question

migrated from stackoverflow.com Apr 10 '10 at 7:19

This question came from our site for professional and enthusiast programmers.

    
    
@Jon: Yeah I tried it. I used the theme "clean" but I cannot change the background color – bragboy Apr 9 '10 at 19:21
    
Scroll down the page, it shows how to customize the CSS. – Jon Seigel Apr 9 '10 at 19:25
up vote 3 down vote accepted

One thing wrong with this. :)

Styles go inside style tags, like so:

<style>
    .valuable-flair { background-color: gray !important; }
</style>

Make sure that goes in between the <head> tags. !important makes sure that style overrides the one specified in the Javascript. You should put that under this revised line:

<script src="http://stackoverflow.com/users/flair/252398.js?theme=clean" type="text/javascript"></script>

And you should be fine.

You can only apply styles like that to tags inside the <body> tag, although that's bad practice. One better would be to put it between <style> tags, the other would be to put it all in a separate stylesheet and link to it using a <link rel="stylesheet"> tag.

share|improve this answer
    
Thank you very much!!! – bragboy Apr 9 '10 at 19:53
    
technicalypto.com If you see the page, the box is kind of cut in the bottom. Any idea why ? – bragboy Apr 9 '10 at 20:02
    
The CSS is restricting .valuable-flair's height to 50px. To that .valuable-flair rule, make sure to add height: auto !important; again, to make sure it overrides the Javascript's version. (Just a note that !important should be used sparingly, we're just using it a lot here because we're importing a CSS file via JS.) – Bryan Veloso Apr 9 '10 at 20:12
    
Thank you thank you .. – bragboy Apr 9 '10 at 20:14

Add this to your page. Css is not an attribute for the script tag.

<style>
.valuable-flair
{
        background-color: grey;
}
</style>
share|improve this answer

http://meta.stackoverflow.com/users/flair/YOURUSERID.js will produce the flair, which you can customize with CSS.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .