muselist: musebucket

[transilience]

Muselist

Character Name
username
Fandom

PB: P. B. Name

Second Character
journal
Fandom: The Series

PB: Name O'Person

Shortname
username
Fandom II: 2 Long 2 Fandom

PB: P. B. Name

Very Long And Elaborate Character Name
journal
Fandom Returns

PB: Name O'Person

Your Name Here
username
Original Character

PB: P. B. Name

Another Excessively Long Name
journal
Revenge of the Bride of Fandom

PB: Name O'Person

Character Name
username
Fandom (OC)

PB: P. B. Name

Another Character
journal
Fandom (bookverse)

PB: Name O'Person

Character
username
Game of Fandoms

PB: P. B. Name

Name
journal
Coffee Shop AU

PB: Name O'Person

notes

okay, this one requires a little explanation.

see, dreamwidth doesn't play nicely with the photobucket hotlink fix, at least not for me - it tries to turn every photobucket-hosted <img> into a dreamwidth-hosted URL, which... doesn't work. BUT if the image is set as the background of a <div> (and you have the hotlink fix extension working already), it'll show up.

it's possible that literally no one else has had this problem, but I'm reasonably pleased with the code anyway, so: have a fairly basic muselist/roster/whatever that Avoids That.

caveats: 1) this code does not replace the hotlink fix extension, it just makes the extension work properly on DW if it wasn't already. 2) it will look wonky at very narrow widths (~600px or less). you can alleviate this by reducing the number of autos in grid-template-columns: auto auto auto auto auto;. or change other stuff! I'm not your boss.

it will, obviously, work even if your images are hosted with someone other than Satan.

copy & paste

<div style="display: grid; grid-template-columns: auto auto auto auto auto; grid-gap: 10px; padding: 10px; background: #ddd; width: 80%; margin: auto; font-family: sans-serif; text-align: center; font-size: 12pt;"> <!-- HEADING LINE: you can duplicate this to create a new section anywhere in the list --> <div style="grid-column: 1 / span 5; background: #999; color: #fff; font-size: 16pt; text-transform: uppercase; letter-spacing: 5px; padding: 10px; padding-left: 15px;">Muselist</div> <!-- CHARACTER BOX BEGIN --> <div style="background: #eee; color: #333; border: 1px dotted #333; text-align: center;"> <div style="width: 100px; height: 100px; margin: 10px auto; background-image: url(ICONURL); background-size: cover;"> </div> <div style="padding: 10px; line-height: 150%;"> <b style="text-transform: uppercase;"> Name</b> <br><a style="color: #c00; text-decoration: none; font-style: italic;" href="http://USERNAME.dreamwidth.org/">USERNAME</a> <br>FANDOM </div> <div style="padding: 10px; font-size: 8pt; text-transform: uppercase;letter-spacing: 2px;padding-left:12px;">PB: PBNAME</div> </div> <!-- CHARACTER BOX END --> </div>

find & replace

main background: #ddd • heading background: #999 • heading text: #fff • box background: #eee • box text & border: #333 • links: #c00

Comments

[laurapalmer]

Thank you! Using this for a comm!