FanPost

Customize Rec'd Viking Style

*Click Images to enlarge.

Since I'm a pretty CSS and HTML (Web Designer) savy person, I've decided to share with you on how to customize the Rec'd Comments from:

2n1rupc_medium

to

260c0_medium

As of Right Now, I've Only Figured how to make this work in Google Chrome Web Browser. I don't use Firefox or IE as much, so I will Update this article if or when I find a way to make this work in other Browsers. To download Google Chrome, click here.

STEP 1:

Open or install Google Chrome.

STEP 2:

Click this link and install the Google Chrome Extension. (Stylebot)

STEP 3:

Restart Google Chrome.

STEP 4:

Look for this newly installed Extension on the far right hand of your address bar.

25i81s6_medium

STEP 5:

Click over the CSS icon and select open Stylebot.

If it doesn't open an alternative way is to click the Icon beside the CSS icon, then hover over tools, then select "Extensions". When the Extensions page opens, you should see the Stylebot extension. Simply click on the "Options" link.

STEP 6:

Once on the Options Page, you should see this:

2mzb03p_medium

If the "Styles" Tab isn't selected, click on it. Now Click the "Add New Style" button.

STEP 7:

Once the New Style sheet is open, type in http://www.dailynorseman.com in the URL box as so:

3539t8p_medium

STEP 8:

Copy and paste the following code into the big box, and press the Add button:

.citem.recommended .comment {

/*This is the actual color of the Comment. It's based on the HTML Color Code Chart*/

background-color: #A58ED2;

}

.citem.recommended .title {

/*This is where the Original Thumbs Up Icon Was Placed. You can change this image as well by copying and pasting a link in the parenthesis.*/

background: transparent url(http://www.saltycajun.com/forum/images/teams/Minnesota%20Vikings.gif) no-repeat 0 0;

height: 50px;

/*This is how far you push the Wording of the Comment Title away from the Left Margin*/

padding-left: 55px;

}

.citem .title {

font-family: "Gotham SSm A","Gotham SSm B",Arial,sans-serif;

margin: 0 0 5px 0;

font-weight: bold;

font-size: 13px;

line-height: 17px;

cursor: pointer;

overflow: hidden;

}

.citem .meta {

/*This is the color and font-size of the "by user_name" under each comment*/

color: #F8CE00;

font-size: 12px;

margin-top: 12px;

}

STEP 9:

Return to DailyNorseman and Enjoy!

You can also edit the code above to change the Viking Icon, Rec'd Color, Font size, Font-Type, and more. I added a few comments beside the areas that's simple to edit.

Post your screenshots of how your DN Comments look when you're done!

Any issues? Tell me in the comments.

...

This FanPost was created by a registered user of The Daily Norseman, and does not necessarily reflect the views of the staff of the site. However, since this is a <em>community</em>, that view is no less important.

X
Log In Sign Up

forgot?
Log In Sign Up

Forgot password?

We'll email you a reset link.

If you signed up using a 3rd party account like Facebook or Twitter, please login with it instead.

Forgot password?

Try another email?

Almost done,

Join Daily Norseman

You must be a member of Daily Norseman to participate.

We have our own Community Guidelines at Daily Norseman. You should read them.

Join Daily Norseman

You must be a member of Daily Norseman to participate.

We have our own Community Guidelines at Daily Norseman. You should read them.

Spinner

Authenticating

Great!

Choose an available username to complete sign up.

In order to provide our users with a better overall experience, we ask for more information from Facebook when using it to login so that we can learn more about our audience and provide you with the best possible experience. We do not store specific user data and the sharing of it is not required to login with Facebook.

tracking_pixel_9341_tracker