Vigils

Tutorial/Snippet: Responsive comments for Dreamwidth.

Tue, 03 Mar 2020 19:25:24 GMT

Posted by: terra

One of my long-term frustrations with the Dreamwidth commenting system is that it nests forever, which works nicely for shorter comment threads but terribly for long roleplay exchanges that extend forever and break the page. Happily Dreamwidth introduced a fix for this a while ago, and this is a brief tutorial to show you how to enable the responsive comment feature.

( instructions and a snippet under the cut )

comments

Responsive Web Design for Dreamwidth, Pt. II

Wed, 17 May 2017 10:14:20 GMT

Posted by: terra

This is part two of a series on responsive layouts for dreamwidth. Be sure to read part one first, because the stuff I am going to be talking about here won't work very well by default. This is also going to be a little different than my other tutorals, because there's no magic code you can copy and paste to make your layout work better on mobile. Instead, this post is aimed at explaining the basic CSS tools that you need in order to customize your layout.

Once you've configured your viewport, mobile devices will display full-sized layouts instead of zooming out in order to shrink them into a smaller screen. This is good, because it can make text more legible. But it's also bad, because screens are so small, and if you have any large images or absolute positioning, things will break. Luckily, images have a pretty simple fix:

img {max-width: 100%; }

Just copy and paste that into your CSS and all of your images will scale automatically.

( divs are more complicated )

comments

Responsive Web Design for Dreamwidth, Pt. I

Wed, 26 Apr 2017 04:22:25 GMT

Posted by: terra

More and more people are using their phones and other mobile devices to access their journals, but dreamwidth doesn't support the most common method of making websites responsive: CSS media queries.

By default dreamwidth doesn't configure the viewport. This means that on most mobile devices, instead of displaying a full-size layout, what you see is a a shrunk down version of what you'd see on a desktop, which is often too tiny to navigate, even if your layout was designed to work well on mobile browsers. To change this behavior, you have to add a meta tag to the <head> section of the code:

<meta name="viewport" content="width=device-width, initial-scale=1">

Simple, right? The trouble is that to add this line of code to the <head> section, we're gonna have to venture into the somewhat arcane S2 system.

( Further instructions )

comments

tutorial: css font properties and the font: shortcut

Sun, 25 Mar 2012 17:37:41 GMT

Posted by: terra

So yesterday I wrote some code out because I despise the font tag, and today comes a more in-depth look at font properties in CSS.

( Cut for length and formatting )

comments

tutorial: <span>, inline css, and you

Sun, 25 Mar 2012 02:45:13 GMT

Posted by: terra

One of the main differences between LJ and DW and how they let you code is that DW allows inline CSS in comments. This is a wonderful thing that can make your comment formatting much more elegant, because you can handle all of your formatting with a single string of code instead of using a string of <font><b><i>!

( a write-up and some code snippets )

comments