terra: fandom » marvel, i'm just shocked (is that all?)
[personal profile] terra

The default Dreamwidth navigation module has a lot of stuff in it that might not be relevant to how you use the site and your journal. While it is pretty easy to remove individual items using CSS, you can also customize your navigation menu using the S2 system, which allows you to add new links or change the order of the existing ones.

code and breakdown behind the cut )

This code is borrowed from [personal profile] ninetydegrees, and the original can be found here.

terra: (pic#2180719)
[personal profile] 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 )
terra: fandom » ffvi, not an endorsement of dissidia (imperial witch)
[personal profile] 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 )
terra: fandom » ffvi, elegant amano terra (Default)
[personal profile] terra

This layout is basically a tweak on a Blacklettered which is itself based off Central. It is very simple and minimal and sans-serif.

CSS under the cut )

Please credit to [personal profile] terra or [community profile] vigils. Feel free to modify/redistribute however you like! You an see some tweaks I've made to the CSS shell (and a header image without the text) here. This layout uses a few icons by Paul Armstrong.


This is the icon/coding/&c. workshop of [personal profile] terra/[plurk.com profile] lightfellows. The layout is a self-made edit of Five AM by [personal profile] winterfish. The design incorporates Swan No 17 (1914-15), by Hilma af Klint. Fonts used are Vollkorn and Varela Round.

The name “vigils” is a joke about staying up too late.

Buy Me a Coffee at ko-fi.com

Other Vigils