nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Accepted answers

Kelli Hoyt

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

All comments

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.

Kelli Hoyt

Hi Ray,

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

addon-com.zenfoundation