FanPost

Changing the look and color of the WAGNH comments section.

I'll be posting the code necessary to change the color of different parts of the comments section, with each section of code commented so you can change the color to something more to your liking.

Example: the following code changes the background color of recommended (starred) comments. To change it to a color of your choosing simply change the hexadecimal color code. You can get a list of available colors here: http://www.quackit.com/html/html_color_codes.cfm.

.citem.recommended .comment {
background-color: #4682B4 !important;
}


To use this code you'll need to edit your user.chrome file or use an add-on for your browser. I'm only familiar with Firefox, but it works in Chrome and Opera as well. Here are the steps to installing Stylish in Firefox:


1. Download Stylish Add-on for Firefox.
https://addons.mozilla.org/en-US/firefox/addon/stylish/

2. Open your Add-ons page. Select Stylish tab.

3. Create new Style (name it whatever you want) and copy-paste the following code into the body.

4. Save, and restart your browser. Done.

Helpful video: https://www.youtube.com/watch?v=Kg5wBDhPY-A


@-moz-document url-prefix("http://www.weaintgotnohistory.com/") {

/*BACKGROUND color of highlighted comments*/
.citem.recommended .comment {
background-color: #4682B4 !important;
}

/*Color of the HEADLINE of highlighted comments*/
.citem.recommended h2 {
color: #000070 !important;
}

/*Color of BLOCKQUOTES within highlighted comments*/
.citem.recommended .comment blockquote {
color: #DCDCDC !important;
}

/*Color of TEXT within highlighted comments*/
.citem.recommended .comment p {
color: #000000 !important;
}

/*Color of the SUBLINE of highlighted comments*/
/*example: by xxxxx on xxxx xx, xxxx | xx:xx xx*/
.citem.recommended div {
color: snow !important;
}
}


Here's what your comments section will look like using the above code.


I was asked if there's a way to change the "thumbs up" icon to a different color. It's possible, but requires a workaround. The icon itself is hosted on WAGNH, which means you can't edit the source. But you can save the icon to your hard drive and edit it using PhotoShop or GIMP then direct the CSS code to use that icon in its place. Or you can find an icon online and link to it as you do images to post inside of comments.

.citem.recommended .title {
background: url("http://cdn2.sbnation.com/images/icons/thumb-green.vaa5927d.png") no-repeat scroll 0 0 transparent;
padding-left: 20px;
}


Add that code inside your new Stylish style before the terminating curly bracket " } ", and change the address of the .png to either an internet address or a file address.

If there are any questions feel free to ask.

Two more quick points: this method can obviously be used to edit the color of any element on the website (you'll just need to figure out which code affects which element), and any SB Nation website as well (just change the first line of the code above and insert it into a new style). Lastly, there's a link at the top right of the start of the comments section with a bunch of quick tips and shortcuts that make reading the comments section much more enjoyable.

Enjoy.




This FanPost was contributed by a member of the community and was not subject to any sort of approval process. It does not necessarily reflect the opinions held by the editors of this site.

X
Log In Sign Up

forgot?
Log In Sign Up

Please choose a new SB Nation username and password

As part of the new SB Nation launch, prior users will need to choose a permanent username, along with a new password.

Your username will be used to login to SB Nation going forward.

I already have a Vox Media account!

Verify Vox Media account

Please login to your Vox Media account. This account will be linked to your previously existing Eater account.

Please choose a new SB Nation username and password

As part of the new SB Nation launch, prior MT authors will need to choose a new username and password.

Your username will be used to login to SB Nation going forward.

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,

By becoming a registered user, you are also agreeing to our Terms and confirming that you have read our Privacy Policy.

Join We Ain't Got No History

You must be a member of We Ain't Got No History to participate.

We have our own Community Guidelines at We Ain't Got No History. You should read them.

Join We Ain't Got No History

You must be a member of We Ain't Got No History to participate.

We have our own Community Guidelines at We Ain't Got No History. You should read them.

Spinner.vc97ec6e

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_9353_tracker