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

[dreamatdrew]

*ticky*

[tyger]

....so what does it mean that you copy-paste one of the background image links into the 'background image' field and nothing happens?
This isn't the first time this has happened to me, so I know I can make it work if I scream at it long enough, but, well. I was kind of figuring this is just a 'click things and see what happens' kind of refresher, not a 'crib together some CSS that will probably work' sort of things, so, uh. ^^;;
Chose this as a background for Tranquility III, which other than moving modules around has been unaltered. Over on a brand-new RP journal: stay_classy_vanitas, if that helps.

[foxfirefey]

It means you get 10 DW points for finding a bug in Tranquility! You did everything right.

Basically what is happening here is: Tranquility is defining the image background for the body tag, but then redefines a background color for the #canvas div (if that doesn't make any sense yet don't worry), so the background color for the #canvas hides the image background on the main body of the page!

It will be easy to fix.

[tyger]

...oh. Huh!

And the #canvas overrides #body, because it's on top. Right. *nods*
Should I keep poking, then?

\o/ Easy to fix is good!

[foxfirefey]

Yeah, keep poking! Maybe try the background image thingie on another style, just to see what it does.

[tyger]

Can do! :D

[ninetydegrees]

It means you get 10 DW points for finding a bug in Tranquility!

Added to bug 3052. :)

[lilmoka]

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.

Holy cow, I'm seeing my journal naked! ''XD

[order_of_chaos]

So, if I assign two different modules the same number they fight it out and the loser vanishes in a puff of defeat? Interesting. I was expecting them to go one after the other.

[ninetydegrees]

Yeah, it's not that smart. :) There's a bug to implement a drag and drop system that would make enabling/disabling/reordering much easier and more intuitive, but I don't think it's going to be implemented any time soon.

[order_of_chaos]

....so what does it mean that you copy-paste one of the background image links into the 'background image' field and nothing happens?

Spice is doing the same thing to me.

[tree]

something odd i just noticed with the skittlish dreams layout: the default is for entry management links to be text-only, but this actually means text + icon because there are layout-specific icons used here. if you select icons as the preference for entry management links, you end up with both the layout-specific icons and the default dreamwidth ones. it looks very odd: interalia.

(also, for the entire time that layout has been available, i thought it was skittish. i never noticed the L. fail.)

[tyger]

\o/ I am not alooooone~~

[ninetydegrees]

Bug filed! Thank you!

[order_of_chaos]

*grins* I can just see my custom text and my archive playing rock-paper-scissors for the right to show up. Thanks for the info - drag and drop will be awesome, in the far future though it be.

[seleneheart]

I also have a community that I set up to test things on so that my main journal won't be all borked when I mess things up. If you plan on making more than one new layout through this class, it might be something to think about.

Result & Thank you

[chratz]

I don't really have any questions, but I wanted to comment, to let you know that I registered an account on your development server. Thank you very much. :)

I also posted the results of one layout to my journal and I thought I would link back here: click

[sunrisetr]

I... don't have any questions, but, oh my word. That Tic Tac Toe is amazingly nifty.

Re: Result & Thank you

[chratz]

actually I do have a question now, if it is no trouble. On my journal chratz I moved several things to the group one module and I thought that the whole part of the group one module would be displayed with the background colour that is used for modules, but only the navigation part of the group one module is displayed that way.
Is that wanted or not? what do I need to do to get the whole group one module in the wanted background colour?

I am using the journal style Brittle with the theme Certain Frogs

[foxfirefey]

Yup! What's more, it gives you a peek into the order all the different elements are in when they're not being positioned.

[foxfirefey]

10 points given for the bug finding, just like before!

[lilmoka]

It's really, really nifty.

[foxfirefey]

The base layout for Spice is "Fluid Measure" and you're right so 10 points--question is, which part of the background should have the background image applied to it, the top or bottom? Or maybe one option for each?

Re: Result & Thank you

[foxfirefey]

Questions are what the class is for!

And you're right, a lot of styles treat the navigation module differently than the other modules--it would be an easy fix with CSS but the Customization Wizard doesn't really handle that use case for that particular layout:

#secondary { background-color: #E1FFB3; }

Re: Result & Thank you

[chratz]

awesome. Thank you so much! works like a charm and I really like the result! :)