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

[tyger]

So would you theoretically be able to have a different header image for each layout type? (I'm mainly thinking about width, here. Which doesn't help re: browser width, but that's always going to be a compromise, so! But you can assume that someone with a three-column browser will have a window on the larger side; I try and do that and entries are like three words wide, max. *laughs*)

Body tag classes: page-read two-columns column-left two-columns-left logged-in my-journal not-subscribed has-access no-navstrip
They are all pretty self-explanatory! :D

Entry-wrapper (this entry on my reading page) entry-wrapper entry-wrapper-odd security-public restrictions-none journal-type-C poster-foxfirefey journal-style_system has-userpic

So, it's an odd entry, public, all-ages (so to speak), posted by foxfirefey in style_system, with an icon.
Don't know what journal-type-C means, but I'm guessing it's either got to do with my layout OR the fact that you're a normal user (not a comm or staff).

NSFW icon: .subject (? That seems too easy...)
all icons (assuming you mean it in the same sense you used NSFW icon?): .icon-links, .ljuser (...LJ user, seriously?) or maybe .ljuser img, .access-filter (.access-filter img?), .restrictions (.restrictions img?)
(or, userpics): .userpic
Locked entries: .security-protected
Screened comments: .screened
Navigation links: .module-navlinks a
Calendar days with entries: .module-calendar .entry-day (I'm not seeing any td elements. Possibly because I have a horizontal-style calendar?)
Entry management links: .icon-links a

...hey! I think I got them all! :D

[ninetydegrees]

First, well done! I'm just going to comment on what you didn't get quite right:

Don't know what journal-type-C means, but I'm guessing it's either got to do with my layout OR the fact that you're a normal user (not a comm or staff).

The explanation's here.

NSFW icon: .subject (? That seems too easy...)

What you want here is the combination of the selector which applies to an NSFW entry and the selector for the icon container so something like .A .B

I don't think there's a subject class actually.

all icons (assuming you mean it in the same sense you used NSFW icon?): .icon-links, .ljuser (...LJ user, seriously?) or maybe .ljuser img, .access-filter (.access-filter img?), .restrictions (.restrictions img?)

I'd add the img selector yes but you forgot the second part of the exercise: on the recent page.

(or, userpics): .userpic

True but one tricky thing to remember is that most styles print this container even when there is no userpic so, depending on what you want to do, it may be safer to use more restrictive selectors (.module-userprofile .userpic and .has-userpic .userpic) or directly go for .userpic img. I've added this to the Wiki. Thanks for making me think about it. :)

Locked entries: .security-protected

Yep but Fey was speaking of private entries i.e. entries only the journal's owner can see.

Calendar days with entries: .module-calendar .entry-day (I'm not seeing any td elements. Possibly because I have a horizontal-style calendar?)

You supposed right. I'll add this to the Wiki too. Thanks again!

Entry management links: .icon-links a

You're very close but not quite there yet. This would select all links which are displayed as icons so entry links when they're icons, comment links when they're icons and module profile links when they're icons. Here Fey only wants icon links for managing entries so it's a bit more specific than .icon-links a.

[tyger]

The explanation's here.
...*facepalm* Duh. That was dumb.

What you want here is the combination of the selector which applies to an NSFW entry and the selector for the icon container so something like .A .B

Um... .header .restrictions? (I've got div class=subject as a (child of? Is that the term?) of .header, but the parent of .restrictions, so I just figured. ^^;;)

I'd add the img selector yes but you forgot the second part of the exercise: on the recent page.

...ack! .page-read in front of everything there?

Yep but Fey was speaking of private entries i.e. entries only the journal's owner can see.

Oh! Right. I've used that uh. Once, so I forget about it. .security-private

You supposed right.

Yay! *dance~!*

Here Fey only wants icon links for managing entries so it's a bit more specific than .icon-links a

.userlite-interaction-links .icon-links



...man, feedback is great! :D Thank you so much!

[ninetydegrees]

.header .restrictions

I've just realized we don't understand what Fey said the same way. I think she meant the userpic of an NSFW entry and not NSFW *or* 18+ entries or the actual NSFW icon. So for me this is .restrictions-NSFW .userpic while for you it's .restrictions indeed.

Let's wait for clarification.

.page-read in front of everything there?

You're so close! .page-read is not the recent page.

Oh! Right. I've used that uh. Once, so I forget about it. .security-private

That's it!

.userlite-interaction-links .icon-links

Right track again but not quite there yet. These are the interaction links found in the Profile module. And keep the a. It's good.

...man, feedback is great! :D Thank you so much!

You're most welcome!

[tyger]

...maybe .restrictions-NSFW .restrictions? Because she did specify it as the icon-containing div, where .restrictions-NSFW is the whole entry.

*facepalm* So apparently I couldn't read last night! .page-recent and .entry-management-links .icon-links a

Thank you again!

[silverflight8]

*runs in, panting* I'm still here, I'm just trying to catch up! May was busier than I thought :P

*runs back out again*

[foxfirefey]

Do not worry! I do not think it will be hard to catch up.

[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! :)