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!

Comments

[lurksnomore]

Yeah, that's where I finally changed it. There was a character limitation going on, so I couldn't specify "Lucidia Sans Unicode"--it cut me of at Un, so I just used another font.

The other thing I find interesting is that font and font color are separate. I get why, and why they can't be in two places. It's just interesting.

I was wondering if there is a way to credit in the "Powered By" box? That seems to me to be the best place for credit; where do folks put that sort of information, generally? Is there an accepted location?

Thanks for teaching and answering what must seem to be awfully newbie-ish questions!

[ninetydegrees]

There was a character limitation going on, so I couldn't specify "Lucidia Sans Unicode"--it cut me of at Un, so I just used another font.

Weird. We allow for 25 characters in that field but the field itself shows with a length of 15 characters so it seems you hit this limit as if it was the 25-character one. It looks like a bug. May I ask which browser and which version of this browser you're using?

I was wondering if there is a way to credit in the "Powered By" box? That seems to me to be the best place for credit; where do folks put that sort of information, generally? Is there an accepted location?

Well style credit goes into "Style Credit" ;) but neither this box nor the "Powered By" one are editable via the wizard for now so you're left with the Custom Text box. A lot of people use their profiles instead, though.

[lurksnomore]

I am using Chrome 10.0. I didn't check it in the other two or three browsers, I have on here. Would you like me to?

[ninetydegrees]

Yes, please, especially since I couldn't reproduce this with Chrome.

[lurksnomore]

Well. That was interesting. I found that if I type out Lucida Sans Unicode, I can fit the whole thing, but I can not specify an alternate font because there isn't enough space in there. This is true no matter what browser I tried, so the character limit is is five or six more than Lucida Sans Unicode. So, its not a bug, its just me. Thanks for all the help!

[ninetydegrees]

You're welcome. If you think this field should be wide to allow for just what you explained, you want want to suggest it .

[foxfirefey]

Eh, it really sounds like it should be wider. I'm perfectly comfortable with making an executive styles decision and just filing a bug on this.