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. Let's say you wanted to replace the archive text link with an icon of a calendar. That's the effect we're after, the first step!

Second step: now you need to figure out the selector. There are a LOT of classes in that area, when you look at it with browser developing tools. Figuring out the best ones to use comes with experience. We want to pick the most unique but concise way to identify JUST the archive link. It's in the navigation module, and the link has its own class. Since we only want to select it when it's in the navigation module, we'll use the unique navigation module class: .module-navlinks. And since we only want the archive link, we use its unique class: .archive. So, our selector will be .module-navlinks .archive

The last thing to do is figure out the CSS rules to make the effect. This, too, is something that comes with experience. We can set the icon we want as the link's background to start with, so the image shows up.

background-image: url(http://skittisheclipse.com/layouts/icons/32x32/calendar.png);

We definitely don't want it repeating no matter what happens!

background-repeat: no-repeat;

Now, we want to set the dimensions of the link to be the same as the size of our calendar icon, but elements displayed inline like links won't let us do that. So we switch the display mode.

display: block;

Now we can set the dimensions:

width: 32px;
height: 32px;

One last thing: the text is still showing. One way we can keep it out of the element's area is to switch the height over to the top-padding property and set the height to 0px. Additionally.

height: 0px;
padding-top: 32px;

This way, the total height of the element is still 32px because of the padding, but the text doesn't have any room to show up inside the element itself. However, it still shows outside of the element's area, so we need to set overflow to hidden.

overflow: hidden;

So, in the end, here is our CSS rules for making our archive navigation link into an icon:

.module-navlinks .archive {
  background-image: url(http://skittisheclipse.com/layouts/icons/32x32/calendar.png);
  background-repeat: no-repeat;
  display: block;
  width: 32px;
  height: 0px;
  padding-top: 32px;
  overflow: hidden;
}

Now, let's say, hypothetically, you wanted this to happen ONLY on the archive page. (I know, I know, it doesn't make much sense. Just roll with it.) You'd modify your selector to include a class in an element above the element being selected for. In this instance, all the different page types are included as classes on the body element--which is the top element so you can select for ANY element on the page using them! The body class for the archive page is .page-archive so the selector is:

.page-archive .module-navlinks .archive

But if you wanted to include more archive type pages than the year, you'll need to use multiple selectors to cover all the different page types:

.page-archive .module-navlinks .archive,
.page-month .module-navlinks .archive,
.page-day .module-navlinks .archive

An alternative strategy is to only apply the image to the archive link when it is the current menu item. The current menu item link has a .current class as well as an identifying one. In that case, the selector is:

.module-navlinks .archive.current

Because the Archive navigation link is considered to be the current navigation link for all three different archive page types, this single selector works for them all.

I hope this example has given you a general outline of how to use core2 classes to select elements globally across a style as well as conditionally. I have a goal for filling up a S2 CSS Cookbook while we work our way through this class so people can have lots of different examples.

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.

Comments

[charlottetoolan]

Just commenting to thank you for a great primer to introduce people to both CSS and the S2 system. I think that this entry is the last of the lessons, so I'm going to start fiddling with CSS layouts on my own journal, using this knowledge. Thanks for a great series! :)