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 have just used flair in my blog with default theme but how can i change the background color....

This is what i used in blogger template,

<!-- Blog Header -->

<div id="header"> <div style="float:right; padding-top:20px;"> 
<iframe src="http://stackoverflow.com/users/flair/146857.html?theme=default"
marginwidth="0" marginheight="0" frameborder="0"  scrolling="no"
 width="210" height="60"></iframe></div><div>
share|improve this question

2 Answers 2

up vote 3 down vote accepted
+100

There are 4 default styles for SO generated flair:

  • default
  • clean
  • dark
  • hot dog stand

If you want to customize it, you'll include it using JavaScript (not an iframe), pass a theme of none and create a local CSS file.


On your site you'd have to add a custom CSS with something like this:

.valuable-flair
{
        background-color: #335577;
        font-family: Arial, Liberation Sans, DejaVu Sans, sans-serif;
        font-size: 12px;
        height: 50px;
        padding: 3px;
        width: 200px;
        color: #000000;
}
.valuable-flair .gravatar
{
        float: left;
}
.valuable-flair .gravatar img
{
        width: 50px;
        -ms-interpolation-mode: bicubic;
}
.valuable-flair .userInfo
{
        float: right;
        text-align: right;
        color: #000000;
}
.valuable-flair .userInfo .username
{
        line-height: 12px;

}
.valuable-flair .userInfo .username a
{
        color: #ffffff;
}
.valuable-flair .badge1
{
        color: #ffcc00;
        font-size: 120%;
        margin-left: 3px;
}
.valuable-flair .badge2
{
        color: #c0c0c0;
        font-size: 120%;
        margin-left: 3px;
}
.valuable-flair .badge3
{
        color: #CC9966;
        font-size: 120%;
        margin-left: 3px;
}
.valuable-flair .reputation-score
{
        color: #AABBCC;
        font-size: 120%;
        font-weight: bold;
        margin-right: 2px;
}
.valuable-flair .badgecount
{
        color: #aaaaaa;
        padding-left: 1px;
}
share|improve this answer

To customize the look and feel of your flair, it's slightly easier to use the java version

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

You'll notice that the theme is set to 'none'. But now you have total control, so you will have to define everything. Below is a sample css file. You would put this in notepad, and then save it as something like "flairstyle.css". Changing the value "background-color" in the ".valuable-flair" section to say "yellow" will make the background yellow.

.valuable-flair
{
        background-color: #f8f8f8;
        font-family: Arial, Liberation Sans, DejaVu Sans, sans-serif;
        font-size: 12px;
        height: 50px;
        padding: 3px;
        width: 200px;
}
.valuable-flair .gravatar
{
        float: left;
}
.valuable-flair .gravatar img
{
        width: 50px;
        -ms-interpolation-mode: bicubic;
}
.valuable-flair .userInfo
{
        float: right;
        text-align: right;
}
.valuable-flair .userInfo .username
{
        line-height: 12px;
}
.valuable-flair .userInfo .username a
{
        color: #0077CC;
}
.valuable-flair .badge1
{
        color: #ffcc00;
        font-size: 120%;
        margin-left: 3px;
}
.valuable-flair .badge2
{
        color: #c0c0c0;
        font-size: 120%;
        margin-left: 3px;
}
.valuable-flair .badge3
{
        color: #CC9966;
        font-size: 120%;
        margin-left: 3px;
}
.valuable-flair .reputation-score
{
        color: #aaaaaa;
        font-size: 120%;
        font-weight: bold;
        margin-right: 2px;
}
.valuable-flair .badgecount
{
        color: #aaaaaa;
        padding-left: 1px;
}

Once you have the style sheet built and save you have to link to it in your header. The below links to it if it's in the same directory. If it was in a subdirectory like style/ then you would need href="style/flairstyle.css".

<link rel="stylesheet" type="text/css" href="flairstyle.css" />

Then you just put the script section above wherever you want it to show up. Let me know which steps you need clarified.

share|improve this answer

You must log in to answer this question.

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