How to wrap `main-outlet` in a different markup?


(Ionuț Staicu) #1

I’m trying to wrap the <div id="main-outlet" class="wrap"> into a custom markup, in order to have the following markup:

<div class="my-main-outlet">
  <div class="my-main-outlet-before"></div>
  <div id="main-outlet" class="wrap"></div> <<<<<<<<<<<<<<<<< the existing element
  <div class="my-main-outlet-after"></div>
</div>

What i’ve tried:

  1. A very basic plugin, connected to below-site-header and above-footer outlets. This leads to compiling error, because I can’t have unclosed tags;
  2. A js file that will generate the desired markup. This will add some markup, but the problem is that it will also wrap my markup into ember-view elements.

Am i doing it wrong? There is another way that i didn’t think of?


Also, sligthly related: if i overwrite a Discourse template, I could reuse it as a partial?


(Sam Saffron) #2

Can you expand on why you need one extra level of nesting? Wouldn’t applying an extra class do the trick?


(Ionuț Staicu) #3

Sure.

I want to add some kind of sidebar that will be more flexible than what i have now (right now is very hacky and i use a combination of position: absolute and breakpoints.

And since i’ll use flexbox, i need a clean structure, with no other elements than the three i mentioned above.

Extra class won’t help in this case.