S2 Background and the Customization Wizard

[foxfirefey]

Class Notes

As of this writing, around 118 of you have signed up for a layout making track--84 of you for the S2/CSS track--and I made sure to say hi to everybody that commented to introduce themselves! I also noticed a lot of you don't have very much CSS experience--and learning these skills is an important reason many of you are taking the course. I think this means I'll turn the next week's HTML and CSS overview; Examining with browser developer tools class into two weeks, so that I have enough time to cover the subject in more detail and give students more study time, as well as give some more time for mentors to answer questions that come up.

You can use the syllabus at any time to jump between lessons or see what's coming up. The previous class is the Class Intro.

S2 Background

S2 was created with a few objectives in mind:

• Styles that could be customized by a lay user without knowing CSS or HTML
• Security. Styles can't be used to server exploits to viewers, harm the servers, or access sensitive information. Javascript and unsafe HTML is stripped from an untrusted (that is, non-official) layer. Additionally, running the style is sandboxed. Styles can't access sensitive information on the server or overload it--any style code that runs for too long will be killed.
• Powerful for advanced users. Because S2 is actually a programming language, style makers can do almost anything they want with the presentation of their journal. Some people have even used S2 to make small games (look at this version of Tic-Tac-Toe made by exor674! Later on, I'll teach S2 students how to use a barebones layout skeleton to practice basic programming in S2 with.

S2 is built on top of something called a core layer that defines what functions and data are available to the style--we'll get more into the details behind that later. Dreamwidth has two core layers available:

• core1 -- inherited from the LJ, what people use when they import styles from LiveJournal. This has the downside of not being able to take advantage of styles development done just for Dreamwidth, like the modules system.
• core2 -- built just for Dreamwidth, what native Dreamwidth styles use

This class is going to deal with core2 styles.

The Customization Wizard

The first order of business in working with S2 is understanding the customization area. I want you to read this overview of the Customization Area.

One thing the Dreamwidth styles team has done a lot of work on (and continues to work on) is standardizing the options available for customization--for instance, right now ninetydegrees is working on standardizing options for scaling/not showing icons across the layouts.

So, it's important for layout makers to understand the Customization Area and the options it gives. For S2/CSS people, you're going to need to choose appropriate options to offer for your layout's users. For Simplified CSS and CSS only people, some of the options (like modules, page setup, and presentation settings) might also affect how you implement your CSS.

Exercises

Exercises for this class are all optional. They're tools to help direct you in your learning, but nobody is grading you on them!

Note: These exercises involve changing the display layout of a journal. If you don't want to do these exercises on your Dreamwidth account, you can create a temporary account on my development server for this purpose--just don't use the password you use for Dreamwidth. It won't be around when I set up the main installation for this class, though.

• Look through the Base layouts section of the customization wizard. Apply three different layouts. (Ignore Zesty, it's the odd one out of all the layouts.)
• For each layout you apply, change some options in the Customization Wizard Sections--especially from the Page Setup, Presentation, and Modules sections. Observe the effects.
• For at least one layout that offers it, use the Image section to set a page background image and a header. (I have some background patterns from dinpattern.com up here for you to use if you want.)
• Just for fun, turn off the layout's CSS in the Custom CSS function for a layout, and see what happens! You'll see quite a difference; all the effects of that layout have been created by CSS.
• Ask any questions you might have!

ETA: If you discover something in the customization wizard that isn't working as it should that somebody hasn't already reported in the comments, I'll give you 10 DW points!