Dreamwidth personalisation: Feed userpics and custom comment colours

[matgb]

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

[foxfirefey]

It sounds like we need to use the ext-### format for the class for OpenID users. I imagine this'd be a pretty easy bug to fix.

[matgb]

My thoughts exactly, was going to submit it somewhere after I'd done it, took me ages bugchecking my code to figre why it wouldn't work, then I just looked at it and saw the dots...

[zaluzianskya]

Thanks for this guide; it's really useful!

I have a slight problem with specifying icons for feed journals, though. It worked for me when I was using a normal Dreamwidth layout, but I hacked together a Smooth Sailing layout from LJ and am using custom CSS on that, and the .journal-JOURNALNAME_feed .userpic thing no longer works. (As you can see here; there's an additional problem in that in this layout the username doesn't actually show up properly if there's no userpic, which is even more of a problem for not having the userpic appear!)

Is there any reason you can think of that this would be happening?

[matgb]

Ah, yeah, assumed knowledge in post. Will only work on DW/Core2 based styles, as LJ styles simply don't have any consistency to them.

Plus, can't actually look at your layout, you've defined a fixed width layout that's bigger than my normal screen.

Without looking at the S2 layer, I can't even guess, and even then, if it's based off Core1 I'm not sure I'll be much help, I never did manage to grok it properly, whereas Core2 is very well done.

My best suggestion is to do what I did, rebuild your preferred layout appearance using a Core2 style and CSS, I learnt a lot doing that and it was actually fairly easy; I've no gone back to LJ and redone my layout there because what I've got here is much better.

Now all I need to do is detach my preferred colour scheme to the actual layout, and it can be used officially, but I'm still learning that one.

I'm happy to help if I can, but given it's S2, I suspect it's beyond my ken.

[zaluzianskya]

Plus, can't actually look at your layout, you've defined a fixed width layout that's bigger than my normal screen.

Ack, sorry :x I'm so attached to the way this layout looks on my screen that I occasionally forget it looks terrible on other people's.

Yeah, it's based on Core1 so. I'll try to find someone who groks that better; hope I didn't bother you or anything!

[matgb]

Oh no, never a problem, I'll remember for future posts to put a footnote in, as most will be using a Core2 layout.

For your width, strong suggestion, replace width...

I just looked at your CSS source code, the designer of that layout needs to go get some basic lessons in web standards, especially accessiblity, fixing that to make it work as designed while not being awful for anyone but the perfect screen resolution will be difficult, gods knows what it looks like on a mobile browser.

Um, yeah, over to you, but I'd strongly recommend rebuilding from scratch.

[zaluzianskya]

*Sob* I'm terrible at this. Then again, maybe I should try building it from scratch and learn me a thing or two. Thanks for the advice!