A small step

[binidj]

So last night I stayed up until stupid o'clock futzing around with the CSS of my LJ style. You see there had been a couple of things which annoyed me about the way in which my journal style displayed certain elements and suddenly I discovered that you can add CSS code which overwrites the stylesheet of the style you're using ... woot! If only I hadn't discovered this just as I was about to turn the PC off and head to bed.

The most irritating thing for me was that journal entries were wrapping around the user-icon in a very unsatisfactory way, leading to all sorts of legibility and layout issues. So after a couple of hours of tinkering¹ I managed to force the text not to wrap around the icon but to float to the right of it.² this also works on the class "comment-even" but, for some reason, I can't get it to work on the "comment-odd" class ... it's as if I'm calling the wrong class but I've checked the spelling and it's correct.³ Ah well, I might come back to it in due course but for now I'm happy having a journal style that displays (for the most part) how I want it to ... I also made the header div a little wider so that all the regular links appear in one line now instead of the, rather odd, two lines it was using before.

So, all-in-all a triumph, albeit one tinged by a frisson of defeat.


¹ And thank the gods for Firefox's web developer toolkit.
² No, it wasn't that simple ... the solution involved playing around with padding and margins ... eventually.
³ Yes, I know they've actually used "comment-odd comment" but omitting the redundant "comment" works fine with comment-even so why not with comment-odd?

Comments

[wildwinter.livejournal.com]

Yep, I was quite impressed by how easy it was to customise. Odd layout language (why not use something that already exists?) but useful in the end.

[binidj.livejournal.com]

How do you mean odd? I just typed regular CSS into the editor.

[wildwinter.livejournal.com]

Ah - I'm talking about the language used to customise the layouts, not the CSS layer. i.e. the stuff that's used to generate the underlying HTML before you slap CSS on top.

[binidj.livejournal.com]

Good lord, I have no idea where that is ... mind you, I'm using an "off the shelf" S2 style.

[caddyman.livejournal.com]

This sounds fan-frikkin-tastic!

I don't understand a word of it.

[irdm.livejournal.com]

I've always thought it was a shame CSS didn't do inheritance and modification. e.g. class fred is class bill with these bits, or make the xyz setting in bill be this.
Oh and those what-overrides-what-and-when rules!...

FF web dev toolbar is The Best!!!
The on the fly validator is handy as well.

[irdm.livejournal.com]

wrt your note 3, perhaps cos not all browsers (points at IE, obivously) take multiple names in the class attribute.
Or used not to.

[binidj.livejournal.com]

Tested using Firefox though, and the even comment class was identical: "comment-even comment" yet was recognised.

[furzepig.livejournal.com]

This may not be your problem, but I *think* this may need a comma:
.comment-odd .user-icon { STUFF }

Should be...

.comment-odd, .user-icon { STUFF }

At least, I think so. Not been able to find a conclusive answer in a brief search. This is assuming you're trying to apply the same bit of CSS to two different class names.

[binidj.livejournal.com]

Nope, it's defining behaviour that only applies to the class user-icon when it appears inside the class comment-odd. I had to do it that way so that the rest of the behaviours I'd applied to user-icon wouldn't be futzed.

[furzepig.livejournal.com]

Gotcha. I didn't know you could apply it to a class within a class; only ever used that method with a tag within a class (e.g. .blah A { STUFF } ). I haven't been able to get it to work any other way, but I was probably missing something.

[binidj.livejournal.com]

As I understand it, a class is really just a user-defined tag so there should be no difference in behaviour between the two.

[furzepig.livejournal.com]

You've got me hooked on it too. I had to test it, and you're right.

Also - multiple class declarations are fine for IE/Mozilla. I use them all the time.

Isn't that fixed now? It looks right from here.

[binidj.livejournal.com]

Yes it is *beam* I tried changing the behaviour of a different class (comment-meta) instead of comment-even and comment-odd and that sorted everything.

[furzepig.livejournal.com]

Woo hoo! Well done. It is a big improvement to my eye. CSS can be very annoying sometimes, though I love it dearly.

[furzepig.livejournal.com]

Annoying wrappage - I see what you mean. :-)