Basic core2 CSS Strategies

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

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