MyBB Community Forums

Full Version: How do I add images to the Content Container section?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I would like to add images to the Content Container section of the theme engine. I want to have specific images for the top left, top right, bottom left, and bottom right corners, and then I want to have images for the horizontal middle and vertical middle between those corners. Basically, I want to use images to frame the Content Container.

How do I do it?

Currently, the Extra CSS Attributes section of my Content Container section has the following in it:

/* FIX: Make internet explorer wrap correctly */
width: auto !important;


Thanks much for any insight and assistance on this matter!
You would have to do a table or a div row. I recommend divs.

<div class="wrapper_top_main"><div class="wrapper_top_left"><div class="wrapper_top_right">
</div></div></div>
Above the wrapper starting tag.
<div class="wrapper_bot_main"><div class="wrapper_bot_left"><div class="wrapper_bot_right">
</div></div></div>

then in the extra css portion at the bottom of the css page:

.wrapper_top_main {
width: ##px;
background: #??? url(images/image.gif) top left repeat-x;
}

.wrapper_top_left {
width: ##px;
background: #??? url(images/image.gif) top left no-repeat;
}

.wrapper_top_right {
width: ##px;
background: #??? url(images/image.gif) top right no-repeat;
}

.wrapper_bot_main {
width: ##px;
background: #??? url(images/image.gif) top left repeat-x;
}

.wrapper_bot_left {
width: ##px;
background: #??? url(images/image.gif) top left no-repeat;
}

.wrapper_bot_right {
width: ##px;
background: #??? url(images/image.gif) top right no-repeat;
}

To do it with tables:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="wrapper_top_main"></td>
<td class="wrapper_top_left"></td>
<td class="wrapper_top_right"></td>
</tr>
<tr>
<td class="wrapper_left">
^^ At the top of the wrapper, then at the bottom:
</td>
<td align="top" class="wrapper_right"></td>
</tr>
<td class="wrapper_bot_main"></td>
<td class="wrapper_bot_left"></td>
<td class="wrapper_bot_right"></td>
</tr>
</table>

Make sure to use the right css. Thats how I do borders at least Toungue
I haven't got it to work, yet, but would it be the same for the Page Container section?

The images do not seem to display. Do I need the full path statement?
Does anyone have a theme with it already done in it, so that I can figure out what I am doing wrong?
You mean like this one?
http://mods.mybboard.net/view/some_o

Is that what you're looking for? I believe that one has corners on the page container.
That won't work. I downloaded and tried it. On the left and right sides, it uses one image, it seems.
I tried copying and pasting the entire Additional CSS section at the bottom, and changing the RLs for the images, but that didn't work, either.
[quote=Audentio]
You would have to do a table or a div row. I recommend divs.

<div class="wrapper_top_main"><div class="wrapper_top_left"><div class="wrapper_top_right">
</div></div></div>
Above the wrapper starting tag.
<div class="wrapper_bot_main"><div class="wrapper_bot_left"><div class="wrapper_bot_right">
</div></div></div>

did you forget to add this to the header template under

<a name="top" id="top"></a>
Bless Wrote:did you forget to add this to the header template under

<a name="top" id="top"></a>

Well, I tried that, just now, and that doesn't work, either.
It cant be the html, its obviously the css. Post your css here and I will take a look at it.