Dreamwidth style system discussion

Class Notes

This week is a time to get used to the overall way you can use the classes built into S2 to apply CSS to a style.

You can always look at the syllabus to see where we are. Our previous class was on Custom CSS; The formation of a Style and Using the Advanced Customization Area. Next week, we will talk about Basic S2 Strategies.

Class Reading

Okay, class! So, in core2 there are a bunch of CSS classes. Some are constant--they always appear in the same places for the same containers. (Example: all entries have an .entry-wrapper div around them.) Some are conditional--they appear or change according to different circumstances or situations. (Example: entries that are public have a .security-public class in their .entry-wrapper, but that class isn't on entries that are access only.)

• S2 CSS -- this is the overall guide. I'll be making sure, as classes go by, that any missing parts are filled in, but it's pretty complete as is. Of especial interest for this class are the body classes
• Style flairs you can do with core2 CSS classes -- this isn't a guide so much as a listing of possibilities S2 CSS classes enable

So, overall when you're doing CSS styling, there's a few steps you're going to do over and over again.

• Figure out an effect you want to apply to items on the page.
• Figure out how to select those items. (This is made much easier with Browser Developing Tools!)
• Figure out the CSS to apply to those items using that selector.

Core2 S2 has a lot of built in classes to help you select certain items.

( So here is an example )

Exercises

• Look at the source of a journal page, any journal page of anybody's, in a core2 S2 style. Find the body tag and look at the classes it has there. Do you know what they all mean?
• Find an entry on your journal or reading page in a core2 S2 style. Find the .entry-wrapper class and look at the classes that accompany it. What do they tell you about the entry?
• CSS selector practice: how would you select the following
• The icon containing div of a NSFW entry.
• All icons on the recent page. (shoot for the img element)
• Private entries on a page (shoot for the entry wrapper div)
• Screened comments (shoot for the comment wrapper div)
• Links in the navigation module (a elements)
• Days with entries in them in the Calendar module (td elements)
• Entry management links in icon form (a elements)

Now, in two weeks we're going to start on doing the main structure of the journal layout! So another thing to make sure you do before then is to figure out what kind of structure you want--one column, two column, three column? More than one type? Then, find out what CSS strategies you're going to use to create that structure. Then, when the class comes around, you'll be ready to implement it. You'll also want to have your color scheme all ready!

Additionally, this is a warning that my dev server is going to be going through a reinstall after next week, to get it sparkly for the main body of the class. (It has some...lingering issues I want to erase.) Thus, make sure you save anything you have put onto that server that you want to keep! I'll save the database so we can retrieve things if we absolutely have to but hopefully that won't be necessary. You're still free to create test accounts there as you please, though.

Class Notes

Class has still been pretty quiet on the CSS learning front, but it's time to move on.

You can always look at the syllabus to see where we are. Our previous class was the second part of the lesson HTML and CSS overview; Examining with browser developer tools. Next week, we will review the foundation of core2 layouts.

Lesson Readings

So, this week I want you to find some resources you might want to use for your layout. There's a list started here:

Style Making Resources

Feel free to suggest your favorites--for instance, I'm not sure what the landscape of image hosting is currently like since I have my own webhost.

Exercises

I want you to think about the following:

• The color scheme for your layout. You'll need foregrounds (for text), backgrounds, and accent colors for things like links. If you are making an S2 layout, I recommend two sets of color schemes: one dark on light and one light on dark, to give you the best base to work from.
• Graphics you might want to use--backgrounds, accents, etc
• The positioning of layout elements you want to aim for--sidebars, no sidebars? What's in the header?

I totally recommend you chatter in comments about things you're thinking about and what you find that you like, along with giving your favorite resource recommendations.

Class Notes

For people who participated in last week's exercises, thank you so much. Anybody who discovered options not working the way they should be got 10 DW points.

You can always look at the syllabus to see where we are. Our previous class was on S2 Background and the Customization Wizard.

Reading for the Week

This week's class is a day late, because I've been working on filling out the following reading aimed at people who need to learn the basics of CSS and HTML:

• HTML Primer
• CSS Primer
• Browser Developing Tools

They are still not complete yet, in my opinion, and I'll be completing them as people start asking questions and needing guidance. I hope that we can work together on this, since I've never taught HTML/CSS from scratch before--if you have something you feel should be added, feel free to edit the wiki pages. Because so many of you are new to this, this portion of the class will span two weeks (as stated last week). This week, let's concentrate on getting a grasp on the basics of HTML and simpler CSS declarations, for those who don't know it yet. Next week, we'll go more in depth on topics that people ask about or need this week, and possibly throw in some bonus teachings on interesting new CSS3 rules.

Exercises

Okay, for those of you who need a little crash course in HTML and CSS, CSS Lesson 1. It's a little bundle of files. When you unzip the folder, you'll find:

• examples.html -- The HTML file to work with.
• css/examples.css -- Edit this file in order to change the styling in the HTML file.
• exercises.txt -- Has a list of exercises for people new to CSS to try. Note: centering the bigger image might be a little tricky if you're new to CSS, so don't be ashamed. I'll give solutions (and new exercises) next week.

If you are already pretty proficient with HTML and CSS, please get some practice with Browser Developing Tools if you don't know how to use them! Play around with exploring your journal and its current HTML/CSS. Test making out on-the-fly changes.

seleneheart has also prepared something very nice: an annotated version of the CSS for two different layout themes.

• Bases - Steele
• Blanket - Autumn Clouds

Welcome to the DW Styles Class! From the number of people answering the poll, this is going to be a fairly large class, even if a lot of you can't make it. Lurking is, of course, okay! I do want to encourage lurkers to ask questions if they have them, however--you don't have to stay out of sight.

This class is geared around learning by doing. The main project of the class is to create a style of your own! The lessons are tools to help you along the way, so the syllabus is subject to change if I feel we're going over a subject too fast and people need more time to adjust. At the end, I'll have treats for people who share layouts with others at dreamwidthlayouts.

( Read on to find out more! )

Alright students, as your first exercise I would like you to:

• Say hi, and greet others! Also ask any questions you would like to know before Friday's class on "S2 Background and the Customization Wizard".
• Fill out this poll--it will help me know who has what experience level, and the different reasons people are taking the course for.
• Think about what you want your style to look like, if you'll be making a style for the course!

And now, I'm going through and checking to make sure that all people who answered the original interest poll and don't already subscribe get a reminder to watch this community (unless they have different methods of keeping track)! Hope to hear from you all!

---

Previous: Syllabus

The class has started! Class syllabus and intro/registration.

---

So, is there any interest from people for a DW styles making course, run in this community? Basically, a series of lessons/projects spread over weeks that works on teaching you the ropes one by one, designed for people of multiple experience levels, with the goal of everybody at the end having created their own native DW core2 layout and having a solid understanding of how the S2 system works.

You could do only CSS portions (since DW layouts are designed to be very flexible with just CSS), or tinker with the S2 parts, too. While we go along, we can help each other as a group with questions on how to do X or Y for our layout. Experienced CSS people or style makers, even if they're not taking the course, are encouraged to poke their heads in and assist students. I'd also like for at least one or two experienced style people to be my betas for lesson plans and dedicated mentors for the students. (And mentors can be students, too, if they want to work on their own layout projects alongside the class--I plan on doing all the lessons myself, making me a student as well!)