Custom CSS; The formation of a Style and Using the Advanced Customization Area

[foxfirefey]

Class Notes

So, I really struggled on what I wanted to say for last week's class and this is pretty much all I came up with so far, and I'm not sure there's enough there to make a whole class out of anyway. If you have any questions about that topic, let me know--maybe I can fill it in some.

You can always look at the syllabus to see where we are. Our previous class was on Finding Resources. Next week, we will talk about Basic Core2 CSS Strategies.

Lesson Readings

Custom CSS

Alright, CSS folks, the Custom CSS area of the customization wizard is where you'll be working. You can read some details of the Custom CSS area here. One main restriction you'll run into: no @import statements.

It's pretty simple, but if you have questions, ask away.

Advanced Customization Area

Alright, S2 folks, your reading for the week is this Style System Overview. You should learn the following topics:

• What a layer is
• What the differences are between core, layout, theme, and wizard layers is
• How to create and manage layers
• How to use the layer editor to make changes to a layer
• How to use layers to make a new style
• Layerinfo settings

Exercises

Custom CSS folks: put some CSS into the Custom CSS area of a layout, if you've never done that. If you're going to be doing a CSS style from scratch, pick a base layout to build off of and see what it looks like with the default stylesheet turned off. That's what you'll have to work with! As an alternative, you can use the plain theme of Tabula Rasa--it's CSS is minimal and mainly aims at making the various columns mode and wizard options like fonts, images and colors work, and preventing a few display issues. The rest is up to you. It can be useful and easier to keep its stylesheet.

S2 folks:

• Make a new layout layer and put in the S2 Testbed Layout. If you don't have a paid account or don't want to use up a layer on your Dreamwidth account, remember that you can make a test account on my dev server. Use layerinfo settings to make the source viewable and the layer public.
• Comment and try to explain to us, in your own words/diagrams/however, what the core/layout/theme/wizard layers are for and the order they go in. If you can't do this, then ask questions about what confuses you!

Comments

[seleneheart]

This is perfect timing since S2 was what I was wanting to do and my massive test is over and done with, so I have the time to work on some creative things.

[foxfirefey]

Yay! I did try and aim it so that the main bulk of the class happened AFTER finals for most people.

[ninetydegrees]

Custom CSS folks: put some CSS into the Custom CSS area of a layout, if you've never done that. If you're going to be doing a CSS style from scratch, pick a base layout to build off of and see what it looks like with the default stylesheet turned off. That's what you'll have to work with!

Exception to that rule: Tabula Rasa. Tabula Rasa's CSS is minimal and mainly aims at making the various columns mode and wizard options like fonts, images and colors work, and preventing a few display issues. The rest is up to you. It can be useful and easier to keep its stylesheet.

[foxfirefey]

I will put that in the lesson!

[snakeling]

Best explanation of layers I've read by kentucka.

Also, style I'm going to be prettying up in future lessons. The layer is #199955.

[liv]

Wow, that explanation of layers is really great, thanks for linking!

[foxfirefey]

Sweeeeet!

I'll note for everybody reading this that DW is NOT as restrictive as LJ on layers--even free users get access to one layer of each type and one custom style.

Also, we call the user layer the "wizard layer"--and both on here and LJ, it's proper place is really after the theme layer, not before!

[tyger]

I've done enough CSS modding I'm going to skip this week's exercises~~

S2: are we supposed to be making a top-level or layout-specific layer?

And okay, so, as I understand it:
the core layer is pretty much defining what's what, kind of like the programming language?
The layout layer is the base of what it looks like, kind of like the OS - there're things here that can be messed with until they're unrecognisable, but it still... defines the bones, I guess?
The theme layer is whatever custom S2 mods you're putting in...
And the wizard layers are the things you've messed with in the wizard! Including the CSS.

[foxfirefey]

You can do either, if you like, depending on what you want to do. If you're doing a layout specific layer (aka a theme with a lot of modification), you'll need to pick a layout base.

I think your descriptions are pretty good!

[tyger]

Hmmm.
What I'm kind of thinking (now, at least, this is an ever-evolving thing) is maybe get a layout I like set up - modules and all - and then just make it easy to change the banner-image and colour palette. Do you think that'd be easier (to implement on the user-end, not code) if it's a layout layer/layout-specfic layer, or a layout-specific/CSS combo? (Or is one [or both!] ways impossible?)

Yay! \o/

[foxfirefey]

Both ways are possible. I think it depends on how closely your color palette follows the color palette of an existing layout. If you make a new layout, then you can specifically state which variables you want to show up in the customization wizard--so you won't have extras, and you can add more. If you make a new theme, those variables have already been chosen--which isn't a problem if it's a set of variables you wanted to use anyway!

[tyger]

Huh! That's kind of cool.

*ponders* Maybe I should see how much work getting the layout how I want it to go is? 'Cause I don't think it'll be super different to most layouts! But on the other hand I know I want to mess with the modules at least a bit - I'd really like a login one, which I know you could at least make work on LJ, 'cause I found some code to make one in a layout I made over there once. 'Cause I guess if that makes the code super hard to compile the first time I wouldn't want to ever do it again, so layout would probably be best. And then if I want to mess with it in a way CSS can't do later I still have a theme layer.

HMMMM.

But on the other hand I'm mostly fond of the banner up top/ sidebar/a few nav links under the banner trio, and that's been done kind of a lot, so.

[samjohnsson]

Huh. I made all the custom layers, though I've no code on them, and for some reason, my journal (which is still set to a Minimalism theme) has decided to stop allowing cut tags to be displayed as pulldowns. Where might I have broken something?

[foxfirefey]

Question: are you using Beta?

I just got the chance to look further into this: my guess is that you've run afoul of a DW bug with the JS beta that has a fix committed but not pushed to live yet. It has nothing to do with your style--your pulldowns won't work in anybody's style. It has to do with the username in the subject of this post, I think:

http://samjohnsson.dreamwidth.org/108640.html

Which isn't doing anything wrong, and will be fixed next code push.

[samjohnsson]

Yeah, I kinda discovered that, since I crosslisted this in the recent beta thread and got a "me, as well" over there. (Didn't know user tags caused that ;; ) And yeah. I am a beta fanatic.

[foxfirefey]

Being a beta fanatic is good! But it does mean running into glitches like this, apparently. It's not the user tags causing it--it's a bug in the contextual hover JavaScript. It hits an error and then doesn't execute other JavaScript, like that needed to make the cut expander.

[samjohnsson]

Cool - I had posted in both places, since I wasn't sure where teh bug was.

[boundbooks]

Just wanted to say that I'm totally excited to begin using all of your style making class posts as references. I finally have some time to do this, and I'm thrilled that you've got such a great series of posts available for us all. :)

[foxfirefey]

squee!

[charlottetoolan]

Just checking off the box to mention that I've completed using custom CSS in the Custom CSS area of a layout.