Headway tips: Using Custom Classes in Leafs

I posted this in the Headway (affiliate link) forums first, but am putting it here too coz I really should start writing a few tutorials!

Ever noticed in leafs, under Miscellaneous, the Custom CSS Class(es) field?

And maybe wondered if you’d ever need it?

Well, tonight I discovered one two really good uses for it.

Let’s say you have a nice page layout but you want your homepage to be a bit different, but still have a couple of leafs in common.

For instance, on this site, I have three different layouts (front page, other pages, and post pages), but each has a common custom header for which I’ve had to duplicate the leafs and associated custom css.

Originally my CSS for the custom header I’d made looked like this:

body.custom div#leaf-29, body.custom div#leaf-47, div#leaf-69 {
   position:absolute;
   z-index:99;
   top:110px;
   background:transparent;
   padding-left:60px;
   left:0;}

However, by putting “myheader” in the custom classes field of each of those leafs, then I could rewrite the code as:

body.custom div.myheader {
   position:absolute;
   z-index:99;
   top:110px;
   background:transparent;
   padding-left:60px;
   left:0;
}

This is particularly handy if you screw up any of those pages (which I did twice to the front page!).

It means you can recreate the leaf, and although it will have a new leaf number, you won’t need to edit your css as long as you put the same custom class name in the custom class field of the new leaf.

Another way you might use custom css is if you want to style multiple leafs on a page or pages the same.

For example, say you’ve got three leafs you want a green background, then with custom classes in each leaf, you only need one class entry in your custom css.

Related posts:

http://www.catseyemarketing.com bob

The gods must be with me today. Was just exploring these, saw Grant Griffiths tweet about it, and flew on over. Thanks, this helped!
STEVE

I expect this place to become the go to place for headway …some real knowledge here!
Chris

bob – it’s a nice change when the computer gods smile upon us. Normally they just throw IE7 thunderbolts at us.

Thanks, Steve. I hope to get a few tutes up here on the more complicated stuff I’ve done.
Francis

Hi Chris,

Excellent tutorial. One suggestion – it would have been helpful if you could have mentioned that one needs to ‘Save All Changes’ before the Custom CSS classes start having an effect.

Probably it’s obvious to most people but it would have saved me (and possibly others in the future) 30 minutes of frustration.

Anyway I now know how to use custom classes in Headway so that’s great!

Francis
Chris

Sorry about that, Francis! It’s a mistake all writers make, forgetting that their readers don’t know everything they, the writer, does.

Good to hear this tute helped you. Headway is quite powerful. I’m not sure it can do every design out there, but it certainly can do a lot more than people first think.
http://micah.illmakeit.com Micah Sewell

hey thanks for that! I’m a HUGE headway fan and always looking for specific tips and tweaks.
ND

Is it just something on my end, or is the font color on these pages set VERY dark relative to the bg?

Here’s a snip of what I’m seeing on my monitor.

http://shup.com/Shup/360485/temp.PNG
http://www.breakoutselling.com Russ

You are a guru on headway!

I got my background to change using the custom css tag with div. However all of my links format wrong. The blue doesn’t show up. When I use a:hover, etc. it changes the entire theme on every page.

Thanks for any help you can offer…Russ

body.custom div.mystyle1 {background: #000000}
body.custom div.mystyle1 a:link, a:visited, a:active {color: #FFFFFF; text-decoration: none}
body.custom div.mystyle1 a:hover {text decoration: underlined}
Chris

Russ

you have to identify the page id. So .mystyle1 should be .pageid-NN where NN=page ID to apply the formatting to
Chris

Yeah, it was a problem here. Things went kersprang. Should be good now. Thanks
http://dougdraws.com Doug C.

“For example, say you’ve got three leafs you want a green background, then with custom classes in each leaf, you only need one class entry in your custom css.”

Um, that was it? Man, what a tease.
http://www.facebook.com/profile.php?id=793854814 Jason Correia

This is really great, I’ve been looking all over for a decent example of this. It isn’t even explained in the Headway documentation that I could find.

I’ve been looking at some very nice headway site and I’m still trying to understand the css structure and syntax. For example, I’ve seen this:
body.custom .headway-leaf {
padding: 0px 0px 0px 0px;
}

So why is the div tag not needed in the example above?
Chris

Ah! It doesn’t really matter. The div is optional in CSS. A div makes the element more specific, that is, div.headway-leaf can only be a div class.

Where you might use it is say if you had a common element name – eg .background

Then you might have
h1.background {background-color:white;}
h2.background {background-color:blue;}
div.background {background-color:red;}

Now, that is a stupid example – because you’d never need to set a background like that but it’s just to show how you can make elements more specific.

CSS is a crazy beast. But if you can tame it, it can do amazing things. But it will still bite you on the butt occasionally.
http://www.domain-hosting-services.in/ Domain hosting

This is my first visit on this site and i really enjoy your article. And this is a great post and also great work done by you. Now i got information that how to use custom classes in leafs. And definitely i will use this for me.
http://www.imperiousseo.com SEO USA

I have see so many example of this but this one is the best explanation about this.
http://www.mactonweb.com web development bangalore

Great article.and you have described everything very clearly about this.Nice post you have done a great work.thanks for sharing this information.
http://removeripoffreports.net/ onlinereputation_management

@SEO USA i agree with you:)..
http://www.mactonweb.com/web-design-company-united-kingdom.html web design london

This is my first visit on this site and i really enjoy your article. And this is a great post and also great work done by you.Thanks for sharing this info..
http://removeripoffreports.net/ onlinereputation_management

The interior design plays an important part to pull consumers to the retail store. Most of the customers prefer to do their shopping at beautifully designed and maintained shops and showrooms, even if they are not spending lavishly.
http://www.marathonm2m.com/about-m2m/management-information-system.aspx management information system

Good to become browsing your weblog once more, it has been months for me. Well this article that i’ve been waited for so lengthy. I need this post to total my assignment inside the university, and it has exact same subject together with your post. Thanks, excellent share.
Tony

Hi Chris

Great tutorial but i tried changing the font size of the Recent-post leaf using the custom css box to look different than the title posts and did not work…
http://www.facebook.com/louie.tugas Louie Tugas

Can we copy an html/php leaf of a certain page to the other page? I am referring to the contents of that leaf.
http://www.mactonweb.com/ Web design London

The gods must be with me today. Was just exploring these, saw Grant Griffiths tweet about it, and flew on over.
http://www.adsyou.com/ ??? ????? ?? ??????

Great tutorial but i tried changing the font size of the Recent-post leaf using the custom css box to look different.
http://www.webhostings.in/ Web Hosting Provider

This is first time i am visiting on this blog and great and information post this is for me, thanks a lot, keep sharing here.

three4one design

design is the face of your business

Headway tips: Using Custom Classes in Leafs