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.

[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

[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.

[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.

[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.)

[ninetydegrees]

Bug filed! Thank you!

[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

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

[sunrisetr]

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

[theshadowpanther]

For the header, in order to have an image that doesn't tile, would you have to choose an image that would fit the header's configurations length-wise (as opposed to height-wise)? Or could you somehow configure your account to take an image and stretch it out to fill the header (or the other way around)?

[theshadowpanther]

Argh, can't edit the comment, so I'm linking to my (new!) temporary journal here. I had fun playing with the background images part, if you can tell. ^_^

[chomiji]

Hee, that was fun. I think I'll keep it the way it ended up for now!

So Colorside has controls for setting the appearance of the sidebar Tags in two places (Presentation and Modules)? And maybe the second one overrides the first? Because I couldn't get it to change until I changed it on Modules.

And on Noveau Oleanders - I couldn't seem to change the font size of the entry titles no matter what I did. I know I had the right section of the wizard because I could change the fonts - but the size simply wouldn't change.

[ninetydegrees]

The one in Presentation is for the tags page: http://chomiji.dreamwidth.org/tag/

Bug filed! Thanks. :)

[jest]

Hi, I was only planning to lurk but now that I'm playing with the blanket base layout and have found that there doesn't seem to be an option to add an image header, I suddenly want to know if I am doing it wrong. Thank you!

[chratz]

According to the Dreamwidth Style Browser the Blanket layout doesn't offer a background image header as one of it's features. If you are looking for a layout, where you can do that, then you should check out one of the following.

[veronicasleeps]

Is there any difference between a 'tiled' and a 'seamless' pattern?

Like, if I tile something you still can see the single tiles, yes? And if it's seamless then you don't?

[seleneheart]

'tiled' is how it is displayed. 'Seamless' has to do with how the graphic itself was made. A seamless pattern can be tiled.

[lurksnomore]

Wow. That was far more fun than I expected to have. The only thing I am not sure I figured out was how to change the font for the journal title/subtitle on my page; I'm now using Colorside with the Scattered Fields theme. I do have a question about the patterns from dinpattern.com that you pointed us to: I just copied/pasted the urls from the site, is there someplace local we should store them if we really, really like them and want to keep the new layouts? Will the owner of the patterns mind? They are lovely, and I would like to know how to credit the creator properly.

[foxfirefey]

Glad to hear you are having a good time!

You should be able to change the font face for your journal/title and subtitle in this section:

http://www.dreamwidth.org/customize/options?group=fonts

Look for "Preferred font for journal titles" and "Preferred font for journal subtitles".

I specifically linked to dinpattern.com because you can used them on your journal, the copy on the site says: "You may use these patterns for any personal or commercial web and screen use. If used, please link back to DinPattern and author credit would be appreciated. Also, feel free to leave a tip."

You probably do want to upload it somewhere else like Photobucket or LJ and not from dinpattern.com's site--we don't have image hosting yet on DW, but other places do.

[scribblingage]

Hey, this is fun!

In Additional Options on the Presentation page, there's this option: "Enter in a value twice that of any sidebars. Also ensure that the value is given in em or px." I don't understand what it does, or why the value should be twice that of the sidebars. I've been changing it to various values in both em and px and haven't seen any effect - could you give me any clues?

[ninetydegrees]

Isn't it? :)

This value is used when you have two left sidebars or two right sidebars, to make sure there is enough space for them and entries won't overlap. When you only have one sidebar or one sidebar on each side, it has no effect.

[rahirah]

OK, I went and switched back to the first style I tweaked for DW, Transmogrified. I haven't used it for awhile, and it seems to have gone all wacky. Some the graphics I made for it don't fit the module parts I made them for any longer, and the title font's gone all huge. Has the style actually changed? If not, what would cause that sort of thing?

The other thing I'm seeing is, I think, a Firefox specific issue: the background images aren't tiling correctly. I've noticed this happening in some other skins I've made (for eFiction, for example.) They look fine in IE, but in Firefox repeat-x appears to work but repeat-y doesn't.

[seleneheart]

Usually if you want something to tile across a whole element, you don't need to specify repeat-x and repeat-y, just use 'repeat'. x and y work if you want something to stack in a single row, either up/down or across, which is what it is doing at the moment. (It doesn't look right in Safari either).

The font size specified in the CSS is '4 em' which is really big. You have the ability to change that using the wizard.

[baggyeyes]

Using Bases. I had hoped to link to Google fonts, but I guess that isn't an option?

[ninetydegrees]

Here's a tutorial on embedding open source fonts from Google. Does that help?

[mojitochica]

Is the current page setup (3. Choose a Page Setup) supposed to reset after selecting a new theme?

When I changed my style from Spice by branchandroot for Fluid Measure to Burgundy by branchandroot for Basic Boxes, my page setup showed "2 Column (sidebar on right)" selected on the customize page, which is what I had selected for Spice. When I loaded my journal the theme displayed with all modules on the left except page generated and powered by Dreamwidth on the right.

When I reloaded the customize page the "3 Column (sidebars on either side)" page layout was selected.

[ninetydegrees]

Fluid Measure's default setup is 2 Column (sidebar on right) while Basic Boxes's default setup is 3 Column (sidebars on either side) so, yes, it's normal that this changed when you switched styles (the page setup would have stayed the same if you had switched themes). However, the page setup should reflect the change instantly when you switch styles but it's not smart enough yet. I've filed a bug to see if we can make that better.

[mojitochica]

Ok, this time I'm using the Atom ColorSide by branchandroot theme. What is "Show entry pages in my journal style rather than the site layout" supposed to do? It's under Presentation/Basic Options. I thought it would present a community or another journal in the Atom style when checked, but that didn't happen. Am I missing something?

[seleneheart]

It means that comment pages on your journal will be in your style instead of the basic Dreamwidth style, which is a sort of grey and red, like the homepage.

[mergatrude]

No questions, just YAY!

[foxfirefey]

Yay!

[kitters]

http://kitterstest.memewidth.homeip.net/ :D Thanks a lot for the development server!

I yoinked your #header CSS from the top of the page and I've kinda been adding on to the custom CSS...

#header {
background: url(http://i1232.photobucket.com/albums/ff374/ShapelessKitters/Photoshop/nm52-bt-16_1000x318.jpg) no-repeat center center;
width: 1000px;
height: 318px;
padding-top: 10px;
padding-left: 10px;
margin-left: 0px;
}

#content {
width: 855px;

}

#footer {
width: 1000px;
}

^What I have so far. Two questions:

1) How do I center the entire layout collectively? Header, content, sidebars, footer, etc. Everything included.

2) How do I move that annoying text on the header around? I want to have it above or below the header image, but just knowing how it can possibly be moved at all will also suffice.

[seleneheart]

2) The name of the journal is controlled by the title and subtitle code. You can play with the margins or the padding to move it around:

h1#title {
    font-family: Tahoma, Tahoma, sans-serif; font-size: 16px;
}

h2#subtitle,
h2#pagetitle {
    font-family: Tahoma, Tahoma, sans-serif; font-size: 15px;
}

[jesseofthenorth]

Well this had been a blast so far! I even got my custom header installed but I can't seem to get a background image in place in colorside.

[foxfirefey]

Looks like it worked, but you have it tiling horizontally in the center. Change it to "tile image" and "top left" and it will probably work much better!

[kitters]

Hmmm, so I've kind of decided I want to change the layout I'll be working with to Bases since it seems to have all the elements I like in the places I like them to start out with. But I really hope it's possible to "detatch" the header from the content and change the widths of everything...

[foxfirefey]

In Bases, just adding a margin-bottom will detach the header from the content, and the widths are definitely changeable with CSS, if that helps any.

[starr_falling]

Thank you for the layout tester! It is very useful. I've been having a lot of fun playing around.

The entry hover link color wouldn't work on the Basic Boxes layout. The hover link color worked fine on the modules, and footer, but I'm not sure about the page links because I'm not sure what the page links are.

[foxfirefey]

Hmm, page link colors are what will be used unless it's overridden later by some other color, like the module color. Looks like the link hover color you want is:

Entry hover link color

Try changing that color--I tested it and it seems to work!

[northern]

Hi! I'm using Transmogrify (Subtle Almond) and tried putting the image url to a header image I uploaded to my Picasa. It saves it, but then there's no header visible in my journal! Is that something that just doesn't work in Transmogrified, or did I do something wrong?

ETA: Clarifying - under Customize Journal Style, Images, Header.

[foxfirefey]

Hmm, I just tested and it's working so there could be some explanations:

* Picasa doesn't allow "hotlinking" aka the image won't load if the page you are viewing is not on their site
* Double check the URL to make sure it didn't get mangled somehow

You can test with this image if you like:

http://skittisheclipse.com/dw/styles/dinpattern/waves.gif

Or you can link me to your Picasa image and I can investigate.

[dchan]

Whee! Just went back to poke around with the wizard some more with my creative-stuff/testing community since I was on a bit of a roll making all of the header fonts in my regular journal all purty.

I noticed that when I tried to put a background on my community (which uses the White text on Black version of Sunday Morning) when I put a background image in it stops immediately after the end of the last entry on the page. Now this wouldn't be a bit deal if you have a lot of entries, but right now I've only got one short entry in there so the side bar continues down below the end of the background image on a blank black background. If I open the expandable cut tag so the entry is longer than the sidebar, then more background magically appears (at least until you run out of entry)!

Now I'm sure that if I was really all that bothered about it I could fix this with a simple CSS override (which is how I would usually do things), but the point of this exercise was to play with the options wizard, so...do I get brownie points for discovering a bug?

ETA: I realize I should probably give you the name of the community so you can look at the issue yourself. Here it is: rhythm_and_noise

[foxfirefey]

Yes you do indeedy! Points distributed.