How to deal with a wrapper in editor

I have a three column template and each item within the column is defined by a "wrapper". How can I set up the wrapper code to be a style in the editor so that the client can break up each item. Following is the html code. The wrappers I want to include come after the Upcoming Events. Thanks.

<div class="body2">
<div class="main">
<article id="content2">
<div class="wrapper">
<section class="col1 pad_left1">
<h2>Upcoming Events</h2>
<div class="wrapper">
<div class="cols">
<div class="wrapper pad_bot2">
<figure class="left marg_right1"><img src="images/page1_img4.jpg" alt=""></figure>
<p> <a href="#">20.07. Sed perspiciatis</a>

Unde omnis iste natus error volu accusantium doloremque. </p>
</div>
<div class="wrapper">
<figure class="left marg_right1"><img src="images/page1_img5.jpg" alt=""></figure>
<p> <a href="#">18.07. Quasi architecto</a>

Beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem. </p>
</div>
</div>
<div class="cols pad_left1">
<div class="wrapper pad_bot2">
<figure class="left marg_right1"><img src="images/page1_img6.jpg" alt=""></figure>
<p> <a href="#">11.07. Laudaum totam</a>

Rem aperiam, eaque ipsa quae ab illo inventore veritatis. </p>
</div>
<div class="wrapper">
<figure class="left marg_right1"><img src="images/page1_img7.jpg" alt=""></figure>
<p> <a href="#">09.07. Volups asrnatur</a>

Aut odit aut fugit, sed quia consequuntur magni dolores eos qui. </p>
</div>
</div>
</div>
</section>

Well, wrappers usually apply some padding and margin, or are used in the css to position the part. And a lot of things can be injected into that space. Where you see the <p>, that's where the content begins, and so it can be text, pictures, whatever, even a more complex thing.

Usually, even after the wrapper there would be another <div> into which content could be placed.

Now your css has to match up with your html structure as well. Here you have divs and ...figures? Anyway with divs, you can place them with css like float:right or whatever. But with your html structure, you have to keep things in their place for the most part. So you have to put content where the space is big enough.

Hope that helps.


Quote from: samtgrizz at Mar 27, 2014, 03:52 PM

I have a three column template and each item within the column is defined by a "wrapper". How can I set up the wrapper code to be a style in the editor so that the client can break up each item. Following is the html code. The wrappers I want to include come after the Upcoming Events. Thanks.

<div class="body2">
<div class="main">
<article id="content2">
<div class="wrapper">
<section class="col1 pad_left1">
<h2>Upcoming Events</h2>
<div class="wrapper">
<div class="cols">
<div class="wrapper pad_bot2">
<figure class="left marg_right1"><img src="images/page1_img4.jpg" alt=""></figure>
<p> <a href="#">20.07. Sed perspiciatis</a>

Unde omnis iste natus error volu accusantium doloremque. </p>
</div>
<div class="wrapper">
<figure class="left marg_right1"><img src="images/page1_img5.jpg" alt=""></figure>
<p> <a href="#">18.07. Quasi architecto</a>

Beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem. </p>
</div>
</div>
<div class="cols pad_left1">
<div class="wrapper pad_bot2">
<figure class="left marg_right1"><img src="images/page1_img6.jpg" alt=""></figure>
<p> <a href="#">11.07. Laudaum totam</a>

Rem aperiam, eaque ipsa quae ab illo inventore veritatis. </p>
</div>
<div class="wrapper">
<figure class="left marg_right1"><img src="images/page1_img7.jpg" alt=""></figure>
<p> <a href="#">09.07. Volups asrnatur</a>

Aut odit aut fugit, sed quia consequuntur magni dolores eos qui. </p>
</div>
</div>
</div>
</section></div></article></div></div>

Thanks for your suggestions.

I have set up a template variable for each column, what I would like to be able to do is select the classes for the wrappers through the editor by placing them in the style selector or even better find a simpler way to break out the chunks in my template without having to have so many template variables.

The template is for the whole page, but inside that template you can put a lot. A 3 column *template is an html structure for the whole page.

I think I understand, and you are right. You could have column-left-wrapper, center-wrapper, and column-right-wrapper, all with some attributes like padding and margin, or even color and border. Let me have a try, although I may make some mistakes in the code:

.column-left-wrapper {
margin: 5px 5px 5px 5px;
width: 100%;
border: 2px black;
}

And in that space you could put a picture, text, orsomething else.

The best way to get started is to download some examples and work from there. It takes time but its pretty interesting.

So, here is a good page with more info: http://html.net/tutorials/css/lesson10.php

By the way every <div> you open must finally be closed with a </div>, or you will have trouble.

The wrappers are around all the contents, so it should be something like this:

<div class="body2"> Let's treat this as the whole page, Inside would first be header pic (which is not <head> section of the html, that's different, before anything is appearing on the page). This will stay open until the bottom of the page.

<div class="header">Picture here</div> close this div

<div class="main"> Ok this looks like main part of page, this will also stay open til the end.

<article id="content2"> I really don't know what article id could mean here, is this valid html? If it is, it can be styled, but why not just a <div>?

<div class="wrapper"> Ok this would be overall wrapper, before we break into the columns and main area. This part is where we would attach the background picture, with something like .wrapper{background-color: green;}

<section class="col1 pad_left1"> Again not sure about a "section", but this is trying to make our first column. It will probably have a clear width (in px or in percentages), a float: left and a clear: both in there.

<h2>Upcoming Events</h2> Ok! Here is your content, and you can put in your css that h2 is what color. Then any text below this probably just has <p> and </p> to close.

<div class="wrapper"> Ok I see you are using the same wrapper twice, and that could be fine. If its the overall wrapper from above it won't work, but a section-wrapper with margins: 1px and so on would be fine for each section. So your idea makes sense. But, it wouldn't be here, after your text above, I don't think. It would be just inside the "col1 pad_left1" part, which makes the space, and then the wrapper would build some padding around that space, before the content goes in there.

Here, your structure begins to break down. You would have a </div> to close the left column, then you would have the middle space open and defined with a <div> probably that looked a bit like this:

<div class="main_content"> This is the middle area with your main content, then that closes with another </div>,

Then the right side, <div class="col3 pad_right1">, and the content for that part, then a </div> to close, then the footer, <div> open and </div> close, then we have to close those from above, so it would be:

</div> overall wrapper
</div> main
</div> body 2

Hope this helps.