Hey there. I did this demo in a few hrs, and I thought it would be a nice way to display info. I guess this will have a use to somebody in the future, so this is my attempt at making a 'dialoguelog' as it is shown. Based on Homestuck, with font to match.
Yes, it's not exact. But I think there's enough improvements in there to warrant release.
Demo
Open/Close Pesterlog
-- turntechGodhead [TG] began pestering ectoBiologist [EB] at 16:13 --
TG: hey so what sort of insane loot did you rake in today
EB: i got a little monsters poster, it's so awesome. i'm going to watch it again today, the applejuice scene was so funny.
TG: oh hell that is such a coincidence i just found an unopened container of apple juice in my closet it is like fucking christmas up in here
EB: ok thats fine, but i just have one question and then a word of caution. have you ever seen a movie called little monsters starring howie mandel and fred savage?
TG: but
TG: the seal on the bottle is unbroken
TG: are you suggesting someone put piss in my apple juice at the factory
EB: all im saying is don't you think monster howie mandel has the power to do something as simple as reseal a bottle?
EB: try using your brain numbnuts.
TG: why did the fat kid or whoever drank it know what piss tasted like
TG: i mean his reaction was nigh instantaneous
EB: it was the 15th day in a row howie mandel peed in his juice.
TG: ok i can accept that
TG: monster B-list celebrity douchebags are cunning and persistent pranksters
TG: also fred savage has a really punchable face
TG: but who cares about this lets stop talking about it
TG: did you get the beta yet
EB: no.
EB: did you?
TG: man i got two copies already
TG: but i dont care im not going to play it or anything the game sounds boring
TG: did you see how it got slammed in game bro????
EB: game bro is a joke and we both know it.
TG: yeah
TG: why dont you go check your mail maybe its there now
EB: alright.
Implementation
Okay, first you paste this line of code in your blog entry (make sure you switch to HTML mode, not WYSIWYG mode).
<style>summary{text-align:center;border:1px outset #000;border-color:#eee;width:fit-content;padding-left:8px;padding-right:8px;margin:auto;border-radius:2px}summary:active{transform:translate(0px,2px);background-color:#ccc}summary:hover{border-style:inset;background-color:#ddd}details{width:85%;margin:auto;padding:6px;background-color:#eee;font-family:"Courier New",monospace;font-weight:700;font-size:14px}</style>
Now that you've done that, paste in the <details> tag (this is the entire section) and nest a <summary> tag (this is the open/close text) inside of it. It usually looks like this:
<details>
<summary>Open/Close</summary>
blah blah feedle dee
</details>
Okay, that's just about it. Have fun with your new toy.
Comments
Displaying 2 of 2 comments ( View all | Add Comment )
Squid Died
yo this is cute as hell
Report Comment
rlly good work ^^
by Squid Died ; ; Report
wow thanks!!
by THE ▌ᴀᴛҠӀИԌ▐ OF SPACEHEY; ; Report
THE ▌ᴀᴛҠӀИԌ▐ OF SPACEHEY
Expanded CSS style for edits:
<style>
summary {
text-align: center;
border: 1px outset black;
border-color: #eee;
width: fit-content;
padding-left: 8px;
padding-right: 8px;
margin: auto;
border-radius: 2px;
}
summary:active {
transform: translate(0px, 2px);
background-color: #ccc;
}
summary:hover {
border-style: inset;
background-color: #ddd;
}
details {
width: 85%;
margin: auto;
padding: 6px;
background-color: #eee;
font-family: "Courier New", monospace;
font-weight: bold;
font-size: 14px;
}
</style>
Report Comment