Place Admin tag to your Disqus comments.

Today i will show how to label your comments on your site with a style that will make your comments look different than other comments.

To do this we don't have to be an expert or don't need any complicated JavaScript , you would be thinking how will we enter strings in the comment with CSS, but CSS' content property will make it work. 


You need to add this CSS to create a label next to your comments. 

.dsq-moderator .dsq-commenter-name:after
{
    /**************************************
       From http://stramaxon.blogspot.com
       Designed by Deepak Kamat
    **************************************/
    content:" Admin";
    font-size:10px;
    bottom:5px;
    position:relative;
    font-weight:normal;
    padding-right:5px;
    text-transform:uppercase;
    color:black;
}
.dsq-moderator .dsq-comment-header {
    /********************************
     This CSS is for color highlight
     of your comment header
    *********************************/  
    background-color: aliceBlue; /* Change the color to fir your needs */
    border: 1px solid grey; /* You can change the values here too */
}

You can change the string, in the content propert, change the 'Admin' to anything you prefer, such as 'Administrator' 'Moderator' 'Boss of the site' or anything..

If you are on Blogger, check this guide on how to add CSS to your blog. 

One More Style

The previous style is good, but here's one more for you, this creates a huge admin text with curly braces,which make it look good. The CSS is different, procedure is same.

.dsq-moderator .dsq-commenter-bio:after
{

    /*************************************
       From http://stramaxon.blogspot.com
       Designed by Deepak Kamat
    *************************************/
    content:" {Admin}";
    font-size:20px;
    position:relative;
    font-weight:normal;
    padding-right:5px;
    text-transform:uppercase;
    color:black;
    left:140px;
    letter-spacing:15px;
    font-family:"Sorts Mill Goudy";
    text-shadow:1px 2px 1px white;
}
.dsq-moderator .dsq-comment-header {

    /********************************
     This CSS is for color highlight
     of your comment header
    *********************************/  
    background-color: aliceBlue; /* Change the color to fir your needs */
    border: 1px solid grey; /* You can change the values here too */
}

Now, if you want to make change, only change something if you have idea about what you are doing. Thanks for reading.

 By Deepak Kamat - Stramaxon - Blogger's Network