What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

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

3 Answers 3

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 .