Indexed II

[syntheid]

Theme name/layout: "spot color" / INDEXED
Author: penemue (syntheid)
Layout info: Source / Preview
Image info: Three images, created by me for this layout.
Additional info (for layouts): It's a three-column layout with (currently) no options for two- or one-column versions, though all the modules should be able to be moved around from either sidebar. Looks better if you have the "tertiary" sidebar longer than the "secondary" sidebar, though.

Version two of my previous attempt that I'm (finally-- I'm so slow) ready to look into converting. Would anyone be able to help walk me through that? I keep getting kind of confused by the process, but I'd like to know how to do it myself, if possible, so I can do it in the future.

Hopefully I'm submitting this correctly.

Comments

[ninetydegrees]

The preview looks really good to me (Firefox, kinda big font, 1440x900).

Your layers aren't viewable: you need to add this line to change that:

layerinfo source_viewable = 1;

As for conversion, feel free to ask me any question either here or via PM. You can also post to this community and have more people be able to answer you. :)

[syntheid]

Whoops, thought I had added that. Fixed now.

[ninetydegrees]

All right, now that I can see your layers, I think I can walk you through this. First you need to use properties for fonts and colors instead of hard-coding them into your stylesheet. Secondly, you need to remove redundant code from your stylesheet.

Let's take your body class:
body { margin-top: 0; padding-top: 0; padding-left: 23.5em; font-family: arial, sans-serif; font-size: 70%; background-color:#111; }

See, you've hard-coded font-family, font-size and background-color. You should use properties instead. Plus, Tabula Rasa ((http://www.dreamwidth.org/customize/advanced/layersource?id=551) already has code for padding:0, font-family, font-size and background-color so these are redundant.

Let's start with the properties first:

For example the base font is set with:
set font_base = "Arial";

The fallback generic font-family is set with:
set font_fallback = "sans-serif";

The body background-color is set with:
set color_page_background = "#111";

As for the font size, DW prefers to have all base fonts coded to 1em/100% so we'll forget about that part.

That leaves you with this CSS for body:

body { margin-top: 0; padding-left: 23.5em; }

and the three properties I've mentioned above:
set font_base = "Arial";
set font_fallback = "sans-serif";
set color_page_background = "#111";

See what I mean?

All the properties you can use are found in http://www.dreamwidth.org/customize/advanced/layersource?id=550.

[syntheid]

Super belatedly, I just started looking at this and it will probably take me a while to fix my stylesheet (the way I set everything up to work on was kind of... ridiculous in light of this process), but I wanted to say thank you, this is very helpful. :)

[ninetydegrees]

You're most welcome. You know where to find me if you need more help. ;)