firecat

I've mentioned before that Dreamwidth has a set of emoticon-icons (there's probably an official term for these but I don't know what it is) that one can use with a comment. (In my DW style you get to them by clicking the smiley face to the right of the Subject field.)

DW user mm-writes figured out some CSS to add to make them show up without needing to click. mm-writes' journal is locked for security reasons so I'm copypasting the relevant part of the post here. (Any formatting errors are mine.)

===

Here's the CSS:

#subjectIconList table {display: block!important; margin-left: -.2em; margin-bottom: -2.5em;}

#subjectIconList table, #subjectIconList {border: 0!important; background: none; display: inline!important;}

#subjectIconList:before {float: left; margin-left: .1em; margin-right: 1em; content:" Click on any subjectline icon below to select it"; margin-top: .3em; font-size: 80%;font-weight :bold;}

Here's what that code does (all uses of !important are to override DW's default CSS):

#subjectIconList table {display: block!important; margin-left: -.2em; margin-bottom: -2.5em;} The icon table (actually, it's a blockquote but uses both table and text-list CSS!) is set to display: none unless you click on the lone greyed-out smiley face that's normally present on the "more options" comment form, then the entire table just drops out of nowhere like, "BAM! Need an icon table?". Setting this to visibly display at all times (which can be through an inline or block setting) fixes this.

#subjectIconList table, #subjectIconList {border: 0!important; background: none; display: inline!important;}For aesthetics I removed the border and background that are inherited from my custom .entry .blockquote CSS and set subject icons to display: inline.

#subjectIconList:before {float: left; margin-left: .1em; margin-right: 1em; content:" Click on any subjectline icon below to select it"; margin-top: .3em; font-size: 80%; font-weight :bold;} Here I used content:""; to add visible text that points you to the icons and tells you how to add them to your comments and floated it left.

To get the filled-circle backgrounds behind subject icon images on page replies I added: .comment-subjecticon {float: right; margin-top: -2em;} .comment-subjecticon img {width: 16px; height: 16px; border-radius: 100%; background: #333; padding: 5px;} I wasn't sure where to set the icon image because by default it lands top left and lays on top of my comment titles, so I pushed it right to get it out of the way and set it to line up with comment title text accordingly, then added a background color and border-radius.

===

To implement this, go to http://www.dreamwidth.org/customize/options?group=customcss and paste the code into the "Use embedded CSS" field. You might need to have a paid account to use this, I'm not sure.