BlogHer - Which Blogger template CSS rule controls each part of your blog? - Comments

Developers tools

go-gulf — Wed, 20 Aug 2008 12:51:27 -0500

I think if you are good developer you didn't need any development tool to develop anything. I think if we search devloper tools we can find better and advance tools to help us. But Firefox is far better them all and keep updating himself.

GO-Gulf.com | web technologies

hahaha

Denise — Wed, 11 Jul 2007 14:06:23 -0500

Thank you Virginia! (Now I promise we'll take our little family disagreement away from your lovely blog post!)

~Denise
Fast Times @ Homeschool High & Flamingo House Happenings

The best way to learn

Virginia DeBolt — Wed, 11 Jul 2007 13:55:03 -0500

TW, I"m not sure if this is what you are talking about, but the best way to learn is by hands-on experience. There's no substitute for learning from your own mistakes and successes. So, if the goal is to learn CSS, then getting into the actual details of it is the way to go.

http://www.webteacher.ws/
http://first50.wordpress.com/

HMPH

TW — Wed, 11 Jul 2007 10:29:09 -0500

You know you would save a lot of time, maybe enough time to dust the clock in the bedroom if I just did it. ~TW

No actually, I do not!

Denise — Wed, 11 Jul 2007 10:25:38 -0500

I hate people reading over my shoulder, particularly you. And I also hate it when you say "Hand that here and I will fix it" when I am still working on fixing it myself! You should wait til I screw it up and am ready to give up on it, and then offer to help.

I'm sure Virginia would agree with me, completely.

~Denise
Fast Times @ Homeschool High & Flamingo House Happenings

No She wouldn't

TW — Wed, 11 Jul 2007 10:24:01 -0500

Because what you didn't say is that while you know enough to get you in trouble, your gf the webmaster knows enough to get you out, and that is all you really want to know. Especially since I think you like me reading over your shoulder and saying HAND THAT HERE and I will fix it.
~TW

I hear that

Virginia DeBolt — Tue, 10 Jul 2007 20:41:22 -0500

Maybe I'll find 6 more for myself, too, when I search out those 6 for you. Wonder if there's a blog for that?

http://www.webteacher.ws/
http://first50.wordpress.com/

Well ummm sure but

Denise — Tue, 10 Jul 2007 18:21:23 -0500

You'll have to also find about 6 more hours in the day for me. I can't even get my laundry done most of the time. ;-)

~Denise
Fast Times @ Homeschool High & Flamingo House Happenings

I can recommend some good books

Virginia DeBolt — Tue, 10 Jul 2007 17:53:20 -0500

that would help you learn all about CSS and be good for home schooling, too. There's mine of course (grin) and a bunch more that you can find on my recommended list at Web Teacher.

http://www.webteacher.ws/
http://first50.wordpress.com/

Firefox

Virginia DeBolt — Tue, 10 Jul 2007 17:49:48 -0500

Other browsers have web developer tools, too. Each has it's own merits, but I think Firefox covers all the bases in a neat and easy to use package.

http://www.webteacher.ws/
http://first50.wordpress.com/

This is excellent help, Virginia

Denise — Sun, 08 Jul 2007 06:43:35 -0500

I have not kept up properly with coding for the last few years and my CSS knowledge is shoddy. I know just enough to get me into trouble. I appreciate this piece, it might just keep me from turning my entire blog pink when all I really wanted was a pink vlink hover or something like that. ;-)

~Denise
Fast Times @ Homeschool High & Flamingo House Happenings

Get the ball rolling

Lia — Sun, 08 Jul 2007 05:12:24 -0500

Thanks for the tips. I've been wanting to make some changes to my blog layout for a while now. Perhaps with the help of the Firefox developer toolbar, I can finally get the ball rolling.

lia from luebeck, germany

Author of the media safe 101 page on the Red Tent Blog and the personal yum yum cafe

Which Blogger template CSS rule controls each part of your blog?

Virginia DeBolt — Sat, 07 Jul 2007 09:55:54 -0500

Having trouble figuring out which particular rule in the styles for your Blogger template actually controls the appearance of a particular bit of your blog? Blogger templates put the styles in the document head. You can customize any style by signing on to Blogger and working in the Template window. But how do you decide which style you want to change?

Most templates have comments in the CSS that help you figure out what the rule is doing. Some of the comments are minimal but effective, such as,

/* Posts------------------------------------ */ .date-header { margin:1.5em 0 .5em; }

The comment tells you the rule applies to posts. The well chosen .date-header class name is pretty clear about being for the date that heads each post. This rule puts a margin on a date-header. That's helpful, but it isn't the complete story. To get the complete story, you often have to look at View Source in the browser.

Any browser will let you view page source. Source or Page Source is often found in the View menu. But the Firefox browser with the Web Developer Toolbar installed is the best browser for this type of work. You'll find out why in a moment.

To see where Blogger applies this CSS rule, use View Source to find the spot in the HTML where it's actually used. Here it is:

<h2 class="date-header">February 04, 2007</h2>

Once you know where this rule goes into the HTML, you can look at your blog normally in the browser and see how it looks. In this example, here's what you see rendered in the browser:

Maybe you're noticing a few things about the date that aren't covered by the margin rule in the class applied to it. For example, you saw in the HTML that it's an h2. It appears in all caps, and a light gray color. Where did those parts of the rendering come from?

If you go back to the blog template window and look at your CSS again, you may find a rule for h2. I found this one for my blog:

/* Headings---------------------------------- */ h2 { margin:1.5em 0 .75em; font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#777; }

Aha! That is where the uppercase and the gray color are set. And margin again. By looking at the order of the rules in the entire stylesheet (the cascade), I can see that the .date-header rule comes after the h2 rule in the cascade. So the margin in the class rule will determine the display of this particular h2.

I got lucky with this one, and the problem is solved. I know where to change the CSS. But sometimes you need to search a bit more. That's where the Firefox Web Developer Toolbar comes in handy. Select Information > Show Element Information in the Web Developer Toolbar. Place your mouse over the element you're working on (in this example, the date). Firefox gives you a complete rundown for the element.

Look especially at the ancestors of the h2 element used for the date. A CSS rule for any one of those ancestors might affect how the date displays, too. If you've found the obvious CSS rules that affect the appearance of the element, and you're still not seeing what you want, look higher up in the document hierarchy, in the ancestors. Search for another rule that may be controlling the display of your element. When you know what it is, then you can overrule it.

The h2 rule and the .date-header rule both come in the cascade after the rules for the ancestors in this template. That means that the smartest place to make any additions to overrule something in an ancestor is in either the h2 rule or the .date-header rule. That would overrule any earlier CSS while still leaving it intact.

To find the CSS you want to modify in Blogger, first look for an obvious rule in the CSS, then see what HTML element is used when the element is actually rendered in the browser. If that doesn't give you all the information you need, look in the rules for the element's ancestors.