Marathon terminals in DW posts: how to

[juzo_kun]

Ok, maybe I managed to get this working without too much fuss. Caveat: when writing the post, you'll need to use the HTML formatting rather than the Rich Text, the latter will mangle everything without recognition, and for this I haven't workarounds at this moment, sorry ^^;

text start here
Long long long long long long long long lines will wrap.
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG words too.
     Spaces   will   get   rendered  .
           

Multiple line breaks too.

Image must be square, or as squarish it can be, it will adapt width and height.
On small screens the terminal will lose proportion but will still be somewhat readable.
text end here

I have a higly customized theme, and I apologies for the Italian names in classes but that's the only way I have to be sure it doesn't clash with the one of the main themes. But you won't need to use that, anyway :)

You will need two parts: the Style code (a.k.a. the CSS) and the HTML code (the structure).

Part one:

• 1) Go to your profile
• 2) Choose Organize -> Customize Style in the main menu bar (horizontal right below the header in the standard DW theme, might be at the left in other variants)
• 3) On the "Customize your theme section" the last entry on the left-side list should be Custom CSS
• 4) Copy the CSS and paste into the large text area in the Use embedded CSS area
• 5) Save changes!

this is the CSS to copy and paste (be sure to copy everything, it's a bunch of stuff)

.term { width: 100%; max-width: 600px; background: #000; color: #fff; font-family: Courier, monospace; font-size: 13px; margin: 0 auto; } .term pre { font-family: Courier, monospace; font-size: 13px; margin: 0 auto; width: 100%; white-space: pre-wrap; word-wrap:break-word; } .term .barra { background: #400; color: #f00; padding: 3px 6px; } .term br { display: none; } .term p { margin: 0; } @media only screen and (max-width: 640px) { .term pre { font-size:11px; } .term .barra { font-size:9px; } } .term .barra span { float: right; } .term .barra.su:after { content: "UESCTerm 802.11 (remote override)" } .term .barra.su span:after { content: "1337 05.10.2337" } .term .barra.giu:after { content: "PgUp/PgDn/Arrows to Scroll" } .term .barra.giu span:after { content: "Return/Enter to Acknowledge" } .term .centro { margin: 5px; color: #0f0; overflow: auto; } .term .colonna.sx { width: 45%; max-width: 45%; float: left; background: #333; } .term .colonna.sx img { max-width: 100%; height: auto; line-height: 0; display: block; } .term .colonna.dx { float: right; width: 54%; }

Part two

Copy and paste this code where you normally write your entry. As I said before this has a chance to work if your editor is in HTML mode, while I don't have tested how the Rich Text one will react (if needed I can check but for how anyone speaks about the Rich Text mode I'm not having my hopes up)

<div class="term"><div class="barra su"><span></span></div><div class="centro"> <div class="colonna sx"><img src="http://placekitten.com/g/300/300"></div> <div class="colonna dx"><pre>start to write text here </pre></div></div><div class="barra giu"><span></span></div></div>

In this code, replace the http://placekitten.com/g/300/300 with the URL of your image (the more square the proportions, the better) and write your text between the <pre> and </pre> code.

fun stuff

The terminal writings in the dark red bars are hardcoded in the CSS. This is for avoiding having garbled text if someone look at your posts from his own reader lists, they will see only the image and a standard formatted text right under.

If you feel like changing these lines too, locate these parts in the CSS

.term .barra.su:after {
  content: "UESCTerm 802.11 (remote override)"
}
.term .barra.su span:after {
  content: "1337 05.10.2337"
}
.term .barra.giu:after {
  content: "PgUp/PgDn/Arrows to Scroll"
}
.term .barra.giu span:after {
  content: "Return/Enter to Acknowledge"
}

and replace the bolded strings accordingly, keeping them between quotes (but not too long phrases, otherwise they will overlap or stretch the space).

Also, stick to strict alphanumeric and avoid quotes, double quotes, asterisk, mathematic signs and other stuff, especially if seems code: the parser used by Dreamwidth to show user CSS has a function that disallows and deletes certain character clusters (it's an automated security thing).

Said that... feel free to ask question if any of this is not clear... explaining stuff is not my strong point ^^;

Comments

[hokuton_punch]

Thank you so much for sharing this! :D It would be really fun to try writing a Marathon fic on DW where I could put all of Durandal or Leela or Tycho's dialogue as actual terminals...

[general_radix]

Go it copied/loaded; thanks for sharing this! :)