Border Around Forum w/Images

[Teg]

Forum URL: dwmo.boards.net

okay so I'm trying to use smagii's code for global head and footer located here smangii.proboards.com/thread/6466/border-forum?page=1

I've tried to remove that and just to css but I'm not getting the effect that I want... 
Basically, the width of the border around forum is 1033PX

What I'm trying to do is make it so that the board itself is to the right of the black ribbon thing that's on the left (in the greyish white background). I'm going to have a menu in the black ribbon thing on the left. I also need to make sure that the middle one repeats, but that the bottom and top image are connected to it.

I've been playing with it for over an hour and I can't get it to work right, plz help

[Azy]

I think I'm right in saying you only need global headers/footers for things like that if you have multiple themes. Otherwise you should be able to put the border in the forum wrapper template. Setting the margin-left properly of the container div should then allow you to push the left edge of the forum over.
I'm away from my laptop at the moment, but later on I'll have a play around with inspect elements in chrome and work out what CSS you'll need to add :-)

[Teg]

I used global headers and footers, but it's not working properly... It's only wrapping the forum area, not including the banner navigation...And then, as I stated, it's lot putting the forum area to the right of the black ribbon. I've tried changing the size of the wrapper (forum width) it makes it to where it cuts off the two columns farthest to the right.

[Brian]

Hi, Teg.

That code is for v4 and is only meant to go around the area below the banner based on how the code is written.

Ideally you should just alter the Forum Wrapper template to achieve what you're looking for.

[Teg]

Sept 2, 2015 8:27:39 GMT -8 Brian said:

Hi, Teg.

That code is for v4 and is only meant to go around the area below the banner based on how the code is written.

Ideally you should just alter the Forum Wrapper template to achieve what you're looking for.

I tried that too and either I'm really dumb or had a brain fart, cause I just couldn't figure that out.

The width of the images for the background need to be different from the actual forum wrapper and the wrapper would need to be aligned right but within the edge of the background images.
I just can't figure out how to make that work.

[Brian]

Do you have a visual example of what you're looking for or links to the images you're utilizing?

[Teg]

Sept 2, 2015 13:33:19 GMT -8 Brian said:

Do you have a visual example of what you're looking for or links to the images you're utilizing?

Like my writing blog: izimmbi.com/dwmo

Obviously the posts won't look like that and the background behind the text will be wider... But that's the over all look I'm going for LOL

[Brian]

Since it seems to be composed of three images what you'll want to do is add a new div both before and after your wrapper div in Themes > Layout Templates > Forum Wrapper, then resize those divs using inline CSS so that they match the dimensions of your top and bottom images and apply your images as the background image to each of them.

<div style="width: 1033px; height: 134px; margin: 0 auto; background-image: url(http://storage.proboards.com/6329500/i/WoXljx6lZVyA2NAf5whg.png);"></div>

<div style="width: 1033px; height: 91px; margin: 0 auto; background-image: url(http://storage.proboards.com/6329500/i/Zi6OXvWE9EJcVbuO8JoF.png);"></div>

Then you'd add the middle image as the forum wrapper background in Themes > Advanced Styles & CSS > Style Sheet.

#wrapper { background-image: url(http://storage.proboards.com/6329500/i/M03YGjrWYa9585Jv1Kwv.png); background-repeat: repeat-y; background-position: top center; }

[Teg]

Sept 3, 2015 8:22:28 GMT -8 Brian said:

Since it seems to be composed of three images what you'll want to do is add a new div both before and after your wrapper div in Themes > Layout Templates > Forum Wrapper, then resize those divs using inline CSS so that they match the dimensions of your top and bottom images and apply your images as the background image to each of them.

<div style="width: 1033px; height: 134px; margin: 0 auto; background-image: url(http://storage.proboards.com/6329500/i/WoXljx6lZVyA2NAf5whg.png);"></div>

<div style="width: 1033px; height: 91px; margin: 0 auto; background-image: url(http://storage.proboards.com/6329500/i/Zi6OXvWE9EJcVbuO8JoF.png);"></div>

Then you'd add the middle image as the forum wrapper background in Themes > Advanced Styles & CSS > Style Sheet.

#wrapper { background-image: url(http://storage.proboards.com/6329500/i/M03YGjrWYa9585Jv1Kwv.png); background-repeat: repeat-y; background-position: top center; }

Okay, but the background piece or image is the same length as the other two so that's not going to work as the wrapper background since the wrapper needs to be smaller than the background and contained within the right edge... Right?

[Brian]

The wrapper can be the same width. You just need to place your content inside of the wrapper.

Whether you want to use a table inside the wrapper or simply add padding and use an absolute positioned element in order to place content in the sidebar section of the background image is up to you.