Comma-separated tag list (Solved)

[sally_maria]

The one thing I miss on Dreamwidth is that I really want my tags to display as a comma-separated list, rather than a cloud or a long list. I was able to do that on LJ with somebody else's custom CSS, but unfortunately I don't know enough to be able to adapt it.

I'm currently using a Crossroads theme and if I could get all the text to display the same size as the smallest for the cloud setting, that would be great.

Is there anyone who has done this, or would be able to help me set it up?

Thank you very much in advance.

Comments

[syntheid]

On the modules page, you can change the way the tags display from cloud to list?

[sally_maria]

Yes, that's what I was referring to as a long list - one tag to a line - which uses up an awful lot of screen.

What I have on LJ is like the cloud effect, with several tags to a line, separated by commas, but with all of them the same size. See the side bar on my journal.

Thank you for the thought, I'm sorry I wasn't clear enough.

[syntheid]

Ah, well then, once it's in the list, do something like .module-tags_list li { display: inline; } to get it all on one line. Not sure about the commas, though.

[sally_maria]

Thank you - that certainly helps.

I'm not that fussed about the commas themselves, as long as the underlines help distinguish one tag from the next, but I'd really like to get rid of the - x uses text between them.

[syntheid]

Oooooooooooooooooooor in the cloud I guess you could do .module-tags_cloud .module-list-item { font-size: 10pt !important; } (and replace the size with what you want), if I was being smarter.

[sally_maria]

That's much better. :-)

Thank you very much for your help. It's great not having to scroll down so far to see everything.

[jana]

To get the tag cloud to display as a comma-separated list, in addition to syntheid's solution, try this out (it works for me):

.module-tags_cloud .module-list-item:before{content: ", "; }
.module-tags_cloud .module-list-item:first-child:before{content: " "; }

[sally_maria]

Ooh, shiny, and even better. :-)

It would be even better if I could work out how to take out the space between the tag and the comma, so they didn't occasionally run onto the next line, but it still looks better with them there at all.

Thank you very much for your help.

[jana]

That should do it (use it instead of the other css you got from me):

.module-tags_cloud .module-list-item:after{content: ", "; }
.module-tags_cloud .module-list-item:last-child:after{content: " "; }

I'd copied the other css from a different layout (not on DW) where I use it as a workaround, but this solution here makes much more sense. And it works too :)

[sally_maria]

It does. :-)

Thank you again for your help - it's just these little tweaks that let me go from pretty happy with my layout to really happy. :-)