How to Implement Style - Zen Foundation

[Ray Sanchez]

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?

[Kelli Hoyt · Accepted solution]

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

[Ray Sanchez]

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?

[Kelli Hoyt]

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

[Bharadwaj Jannu]

see https://answers.atlassian.com/questions/178693/rotate-images-macro-zen-foundation

https://answers.atlassian.com/questions/180228/table-border-in-confluence

they may give some idea.