How to Implement Style - Zen Foundation

Hi Guys:

I'm new to Zen Foundation so I have a newbie question. How I can implement this in Zen?

.body3 {background:url(../images/img2.png) center top no-repeat;position:absolute;height:353px;width:327px;top:13px;left:50%;margin-left:160px;z-index:10}

most of the parameters and values I found them in the zen section but what about z-index for instance? It is best to load my css and used it in Zen or Should I use the section values?

3 answers

1 accepted

Hi Ray,

It's best to use the Brand Designer and Section Designer where you can - this will allow you an easier path as Confluence upgrades. Within the Brand Designer itself, for example, you can set a background image for Window Background, Header, and Canvas (see below.)

If you'd like more control than is offered through the Brand Designer settings (looks like you might), you can use the Zen Body Class macro to add that class where you'd like it (if you apply it to a .zen.header or .zen.footer you can then apply it across an entire space or multiple spaces.) You can then add your custom CSS within the Brand Designer.

Hope this helps!

Thanks,

Kelli

Hi Kelli:

Thanks for the explanation. Just to clarify. I will use the designers as much as I can but if I want to add a custom class I must add the Zen Class macro, is that right? If yes my question is If I add this macro, all the styles I defined at the designers are going to be overwitten or they will complement the class in the macro?

Hi Ray,

First, one clarification: the Zen Body Class macro is just for adding classes to the body - you can add classes to other elements of your design/page using the Zen Wrap macro.

When using either of the macros, what is affected depends on what you are targeting and how you are doing so - you are essentially just inserting CSS to your brand, so it will follow normal CSS (cascade) behavior. Your Brand Designer settings should be respected, unless you specifically write your CSS to override them (with more specificity.)

Hope that's helpful!

cheers,
Kelli

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Jul 10, 2018 in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

967 views 23 12
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you