r/cssnews • u/chromakode • Nov 08 '12

CSS Howto: customizing comment gilding

We just released a new feature in today's gold update that allows people to buy a comment author a month of gold as thanks for an awesome comment.

While we hope that comment gilding will be useful in many different types of communities, if it isn't right for your community, we encourage you to customize it. Here's some tips!

To change the display of gilded comments, you can style them using this selector:

.comment.gilded { ... }

To change the icon displayed next to gilded comments:

span.gilded-comment-icon { background-image: url(...); }

If you wish to hide the gilding icon completely, simply add this CSS rule to your subreddit stylesheet or user style:

span.gilded-comment-icon { display: none; }

You can also remove the "give gold" button with:

.comment .give-gold { display: none; }
31 Upvotes

87% Upvoted

View all comments

Show parent comments

7

u/Jo3M3tal Nov 08 '12

The downside with that is when you move the mouse over to reply to someone's comment, it puts "give gold" in the why of where you are moving. Of course that is a big no-no when it comes to ui design, but I don't have a solution (yet) on how to deal with it

2

u/chromakode Nov 08 '12

Yep -- that's why we didn't go with that approach. However, there's plenty of room for experimentation in subreddit stylesheets!

8

u/eoin2017 Nov 09 '12

You could just swap the order from ['give gold' 'reply'] to ['reply' 'give gold']. That way 'reply' won't jump when 'give gold' appears.

1

u/V2Blast Nov 12 '12

Or move "give gold" to the right of the post time or something.