Dreamwidth personalisation: Feed userpics and custom comment colours
I've got proper coding work to do, but my brain isn't working straight, so I've been hacking my layout again. Almost certainly Dreamwidth specific as they only work because the Devs put a lot of effort into Classes for CSS tricks within the base code.
Two little tricks, both done through the Customize Journal Style CSS page, dead easy.
Custom comment colours
First is to give a regular commenter a custom colour in the comments box. Can only be done for logged in DW users, unfortunately, an OpenID user has .s in their name and that breaks CSS, might get that fixed but it needs a change in the base code. So, if you want to give commenters their own custom appearance (this includes yourself, naturally) in your comments box, here's how:
Let's start with you, the entry author. This is a generic tweak, so can be done on a Community as well. Simply put the following code in at the bottom of any other CSS you have there:
.entry-author .comment,.entry-author .comment .header {
background-color: #160018;
color: #fff;
border: solid 1px #ee5;
}
The first line says who gets the tweak, that's the entry author, and it should apply for both comments and headers. The next line sets a backbground colour, you'll probably want to change the colour to suit you. The third line defines the font colout, quite important to do this if you're using a background colour that varies significantly from your main color. The last line defines how the border should appear (solid line, 1 pixel wide) and it's colour (yellow). You could make it dotted, or wider, or a different colour, easily.
Now, for other people, slightly different code needed. Everyone that comments gets their own Class, which is their username. So, given that
freddiefraggles has a purple layout, I've given her a purple comment background:
.poster-freddiefraggles .comment, .poster-freddiefraggles .comment .header {
background-color: #663399;
color: #fff;
border: solid 1px #9966cc;
}
Nice and easy. Now, naturally, Jennie gets a little bit more attention; for her, I've used the background image from her journal:
.poster-miss_s_b .comment {
color: #d3afec;
background: url(http://pics.livejournal.com/snapesbabe/pic/000drw64.jpg) repeat top left;
background-color: #160018;
border: solid 1px #444444;
}
As you can see, the colours all translate across, the font colour is set to contrast with the background image, and there's a different background colour in case the image doesn't load.
Sorted.
Feed icons on Reading page
On a reading page, an icon only displays for accounts and journals that use userpics--feeds, having no userpic, get nothing displayed. That's fine, except I like the visual trigger if I'm scanning, so I've figured out how to get the feed logo to display in place of a userpic:
.journal-type-Y .userpic {
background: url(http://s.dreamwidth.org/img/feed100x100.png) center no-repeat;
width:100px;
height:100px;
background-color:#000;
}
Journal type y is a feed journal, the rest is fairly obvious. Now, of course, the URL can be for any image you like; I picked one of standard userpic size from the DW icon repository. But, here's the cunning bit, you can also do one for separate feeds if you want to. Here's one for
lib_dem_voice_feed
.journal-lib_dem_voice_feed .userpic {
background: url(http://www.libdemvoice.org/wp-content/authors/TheVoice-93.png) center no-repeat;
width:82px;
height:82px;
background-color:#000;
}
Replace the feedname after .journal- for any other feed. The 'journal- bit is important and it won't work if it's not there--guess how many page reloads I did before noticing I'd missed it on my second one? Note, this code has to go below the generic feed code (a Cascading Style Sheet works on a cascade principle, last in gets priority). The background colour (black) suits me, you may prefer white or something that works for your layout. I'm using the image that they use for 'the voice' posts there, and directly hotlinking, ideally you should host the image yourself, mostly because they might delete or change it.
For those interested, I also did code for
leftfootforward_feed and
liberal_conspiracy_feed:
.journal-leftfootforward_feed .userpic {
background: url(http://profile.ak.fbcdn.net/profile-ak-snc1/object3/1151/24/q119855314479_7613.jpg) center no-repeat;
width:52px;
height:52px;
background-color:#000;
}
.journal-liberal_conspiracy_feed .userpic {
background: url(http://a3.twimg.com/profile_images/63393763/Picture_5.png) center no-repeat;
width:46px;
height:46px;
background-color:#000;
}
All straightforward hackery, typing it all up took longer than actually doing it. An example of the comment colours in action can be found here. Next up on my layout posts should be a tutorial for the 'sharethis' widgets, but that'll take a bit more time and screenshotting, so don't hold your breath. Linkspam post may follow later, but I have a bath to get into.
comments on the original post on Dreamwidth. I'd prefer it if you comment there[1] if you are able to keep the discussion together. [1] If you are reading this, you very likely have an OpenID.
Two little tricks, both done through the Customize Journal Style CSS page, dead easy.
Custom comment colours
First is to give a regular commenter a custom colour in the comments box. Can only be done for logged in DW users, unfortunately, an OpenID user has .s in their name and that breaks CSS, might get that fixed but it needs a change in the base code. So, if you want to give commenters their own custom appearance (this includes yourself, naturally) in your comments box, here's how:
Let's start with you, the entry author. This is a generic tweak, so can be done on a Community as well. Simply put the following code in at the bottom of any other CSS you have there:
.entry-author .comment,.entry-author .comment .header {
background-color: #160018;
color: #fff;
border: solid 1px #ee5;
}
The first line says who gets the tweak, that's the entry author, and it should apply for both comments and headers. The next line sets a backbground colour, you'll probably want to change the colour to suit you. The third line defines the font colout, quite important to do this if you're using a background colour that varies significantly from your main color. The last line defines how the border should appear (solid line, 1 pixel wide) and it's colour (yellow). You could make it dotted, or wider, or a different colour, easily.
Now, for other people, slightly different code needed. Everyone that comments gets their own Class, which is their username. So, given that
freddiefraggles has a purple layout, I've given her a purple comment background:
.poster-freddiefraggles .comment, .poster-freddiefraggles .comment .header {
background-color: #663399;
color: #fff;
border: solid 1px #9966cc;
}
Nice and easy. Now, naturally, Jennie gets a little bit more attention; for her, I've used the background image from her journal:
.poster-miss_s_b .comment {
color: #d3afec;
background: url(http://pics.livejournal.com/snapesbabe/pic/000drw64.jpg) repeat top left;
background-color: #160018;
border: solid 1px #444444;
}
As you can see, the colours all translate across, the font colour is set to contrast with the background image, and there's a different background colour in case the image doesn't load.
Sorted.
Feed icons on Reading page
On a reading page, an icon only displays for accounts and journals that use userpics--feeds, having no userpic, get nothing displayed. That's fine, except I like the visual trigger if I'm scanning, so I've figured out how to get the feed logo to display in place of a userpic:
.journal-type-Y .userpic {
background: url(http://s.dreamwidth.org/img/feed100x100.png) center no-repeat;
width:100px;
height:100px;
background-color:#000;
}
Journal type y is a feed journal, the rest is fairly obvious. Now, of course, the URL can be for any image you like; I picked one of standard userpic size from the DW icon repository. But, here's the cunning bit, you can also do one for separate feeds if you want to. Here's one for
lib_dem_voice_feed
.journal-lib_dem_voice_feed .userpic {
background: url(http://www.libdemvoice.org/wp-content/authors/TheVoice-93.png) center no-repeat;
width:82px;
height:82px;
background-color:#000;
}
Replace the feedname after .journal- for any other feed. The 'journal- bit is important and it won't work if it's not there--guess how many page reloads I did before noticing I'd missed it on my second one? Note, this code has to go below the generic feed code (a Cascading Style Sheet works on a cascade principle, last in gets priority). The background colour (black) suits me, you may prefer white or something that works for your layout. I'm using the image that they use for 'the voice' posts there, and directly hotlinking, ideally you should host the image yourself, mostly because they might delete or change it.
For those interested, I also did code for
leftfootforward_feed and
liberal_conspiracy_feed:
.journal-leftfootforward_feed .userpic {
background: url(http://profile.ak.fbcdn.net/profile-ak-snc1/object3/1151/24/q119855314479_7613.jpg) center no-repeat;
width:52px;
height:52px;
background-color:#000;
}
.journal-liberal_conspiracy_feed .userpic {
background: url(http://a3.twimg.com/profile_images/63393763/Picture_5.png) center no-repeat;
width:46px;
height:46px;
background-color:#000;
}
All straightforward hackery, typing it all up took longer than actually doing it. An example of the comment colours in action can be found here. Next up on my layout posts should be a tutorial for the 'sharethis' widgets, but that'll take a bit more time and screenshotting, so don't hold your breath. Linkspam post may follow later, but I have a bath to get into.
comments on the original post on Dreamwidth. I'd prefer it if you comment there[1] if you are able to keep the discussion together. [1] If you are reading this, you very likely have an OpenID.