How to edit styles inside Kentico 12SP MVC page builder?

Question

I have a site running Kentico 12SP MVC. For reasons, I won't get into, my Header and Footer have a z-index in the millions. Unfortunately, the z-index is so high that it blocks the pagebuilder features in Kentico. How can I add CSS/JS to detect whether I am inside the page builder and adjust the z-index accordingly?

Answer 1

Welcome to SO Jeremy!

Typically your styles are defined in the SCSS/LESS stylesheets in the MVC project. See the structure of this particular project. So you'll have to go back to your stylesheets in the project and make adjustments there, then publish that code change.

UPDATE

Thanks for the more clear definition of what you're looking for. To find out what is overriding your site's CSS do the following:

1. Go to the page in question in Xperience on the Page tab.
2. Right-click on the area in question and inspect that.
3. Determine what class is overriding the z-index. This element is nested within an i-frame and most likely has a parent/grantparent element with the class of page-builder.
4. In your MVC css, add an override for something like .page-builder .your-class .thats-causing .problems { z-index: 0; }

What this will do is when you're on the Page tab using page builder functionality, it will force that z-index to be lower so page builder items are displayed/work.