foxfirefey: Dreamwidth: social content with dimension. (dreamwidth)
[personal profile] foxfirefey

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

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 )


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

foxfirefey: Dreamwidth: social content with dimension. (dreamwidth)
[personal profile] foxfirefey

Class Notes

So, I really struggled on what I wanted to say for last week's class and this is pretty much all I came up with so far, and I'm not sure there's enough there to make a whole class out of anyway. If you have any questions about that topic, let me know--maybe I can fill it in some.

You can always look at the syllabus to see where we are. Our previous class was on Finding Resources. Next week, we will talk about Basic Core2 CSS Strategies.

Lesson Readings

Custom CSS

Alright, CSS folks, the Custom CSS area of the customization wizard is where you'll be working. You can read some details of the Custom CSS area here. One main restriction you'll run into: no @import statements.

It's pretty simple, but if you have questions, ask away.

Advanced Customization Area

Alright, S2 folks, your reading for the week is this Style System Overview. You should learn the following topics:

  • What a layer is
  • What the differences are between core, layout, theme, and wizard layers is
  • How to create and manage layers
  • How to use the layer editor to make changes to a layer
  • How to use layers to make a new style
  • Layerinfo settings


Custom CSS folks: put some CSS into the Custom CSS area of a layout, if you've never done that. If you're going to be doing a CSS style from scratch, pick a base layout to build off of and see what it looks like with the default stylesheet turned off. That's what you'll have to work with! As an alternative, you can use the plain theme of Tabula Rasa--it's CSS is minimal and mainly aims at making the various columns mode and wizard options like fonts, images and colors work, and preventing a few display issues. The rest is up to you. It can be useful and easier to keep its stylesheet.

S2 folks:

  • Make a new layout layer and put in the S2 Testbed Layout. If you don't have a paid account or don't want to use up a layer on your Dreamwidth account, remember that you can make a test account on my dev server. Use layerinfo settings to make the source viewable and the layer public.
  • Comment and try to explain to us, in your own words/diagrams/however, what the core/layout/theme/wizard layers are for and the order they go in. If you can't do this, then ask questions about what confuses you!

foxfirefey: Dreamwidth: social content with dimension. (dreamwidth)
[personal profile] foxfirefey

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.


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.

foxfirefey: Dreamwidth: social content with dimension. (dreamwidth)
[personal profile] foxfirefey

Class Notes

I haven't heard from a lot of you! I'm hoping that all of you who are new to HTML and CSS are doing okay. Please make sure to ask questions you might be having. Remember, I split this lesson up over two weeks, to make sure to give people new to CSS some breathing room to learn!

You can always look at the syllabus to see where we are. Our previous class was the first part of the current lesson, HTML and CSS overview; Examining with browser developer tools.

Lesson Readings

For quick reference, these are the lesson readings from last week:

And here are the annotated stylesheets by [personal profile] seleneheart:

Exercise Answers )


I'm still working on these, so watch this space, and make requests if you like!

  • CSS3 Tutorial -- For people who already know CSS2, these might be interesting to explore. Keep in mind that browser support has changed some since it was written--recent versions of Firefox, for instance, no longer require the -moz prefix.
foxfirefey: Fox stealing an egg. (Default)
[personal profile] foxfirefey

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:

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.


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.

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

foxfirefey: Dreamwidth: social content with dimension. (dreamwidth)
[personal profile] 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 ) The Customization Wizard )


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 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!
foxfirefey: Dreamwidth: social content with dimension. (dreamwidth)
[personal profile] foxfirefey

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 [community profile] 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

foxfirefey: Dreamwidth: social content with dimension. (dreamwidth)
[personal profile] foxfirefey

Okay, folks, I am going to post the Class Intro next Monday; afterwards, class lessons will be posted on Fridays. This is the tentative syllabus and is subject to change--class mentors and potential students, please review and tell me what you think! I focused on giving everyone a lot of breathing room and a leisurely pace, so that people who aren't as familiar with web design have the time to learn and people who are trying to take their skills to the next level have time to explore.

If you haven't already marked yourself as interested in the class poll, please do so!

Tentative syllabus )
foxfirefey: Dreamwidth: social content with dimension. (dreamwidth)
[personal profile] foxfirefey
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!)

Poll #6433 Head count!
Open to: Registered Users, detailed results viewable to: All, participants: 156

Would you want to participate in something like that?

View Answers

Yes, I want to be a student!
155 (99.4%)

Yes, I want to be a mentor!
7 (4.5%)


Dreamwidth style system discussion

August 2017



RSS Atom

Style Credit

Expand Cut Tags

No cut tags
Page generated Sep. 22nd, 2017 03:26 pm
Powered by Dreamwidth Studios