Border around forum (framed) [SOLVED]

[cvekiboy]

Revealed a problem first here but seeing its not a support board (and less visited) I'll ask here same thing.
Sorry if a brake some major rules!

Using slightly different border around forum with head, base and background (as sides) images on v4 forum.
Any of the codes used yet not cover my layout.

Please give me a hint how to have it on v5 forum.

P.S. Did tried also this code which gives me only head and background image on every div/table.
Suggest me if its what I shall stick to it.

Thanks in advance!

Login out...

END

[CheatAreZee]

Hi cvekiboy,

Unfortunately the only advice I would be able to provide would be to wait for a response in this thread. You can feel free to bump once every 24 hours if you don't receive a response there.

My apologies for not being able to personally assist, since I'm not familiar with the codes used, but if someone more familiar with the border around the forum codes have any suggestions by all means feel free to post

[cvekiboy]

Thanks and no worries m8!
I do continue discussion there (but peak here if someone posts a hint).

Login out...

END

[Bluesonic1]

@ Ricky Zyvoloski; the replies in that thread haven't been too helpful in my experience, people just keep redirecting us to other pages that list a heap of variables to use and tell us to use those to create an image border around the forum, but I'm not a coder (and most of us there looking for the solution aren't either) so I have no idea what I'm supposed to do with what they've given me.

cvekiboy; Someone else (as well as myself) were trying to accomplish the same thing, and they got a solution on this thread. It kinda works with me except that my problem is that the forum is off-center now (I assume because the reply to that thread was to achieve that look, but I can't get it to center normally now). Hopefully this can help you? (Please let me know if you can get yours to center) The only person who really seems to give a solution to this is Brian, and lots of people have been asking how to get this code to work. It would be really nice if someone would post a working version of this and then put it into the main Proboards code index for everyone else who's asking.

[Brian]

Bluesonic1, just skip this part of the code in the thread you linked and the forum should remain in the center. This is the only thing that moves it around.

#wrapper2 { margin: 300px 40px 0 200px }

Same for you, cvekiboy, if you want to follow the instructions in the thread linked in the previous post.

[cvekiboy]

Thanks for hints guys/(girl?), but something tells me this will be a struggle to achieve.
The final solution could help all that used a popular border around forum by california code!

Further problems:
1. It wraps the adds too!
2. Welcome (flash) banner is aligned to right. [SOLVED] CSS #banner { padding: 0px 20px; }
3. Width of the forum affects the images too!
 - if its the same as image (920px), than it slightly covers the background image (currently set)
 - if its reduced (by 20px), the head (top) and background image is reduced too!
The #wrapper-foot image is not affected and managed to pull it above bottom ad!

CSS
/* border around forum */
#wrapper {background-image: url(http://i557./ss15/3MAJ/Forum%20skin/bg%20grads/boardheader.gif), url(http://i557./ss15/3MAJ/Forum%20skin/bg%20grads/boardbg.gif);
background-repeat: no-repeat, repeat-y;
background-position: center top, center center;
margin-top: 150px;
}

#wrapper-foot {
   background-image: url("http://i557./ss15/3MAJ/Forum%20skin/bg%20grads/boardbase.gif");
   background-position: center center;
   background-repeat: no-repeat;
   height: 25px;
   margin: 0 auto;
   width: 920px;
}
 + Forum Wrapper part

Login out...

END

[Bluesonic1]

Jul 7, 2013 8:10:42 GMT -8 Brian said:

Bluesonic1, just skip this part of the code in the thread you linked and the forum should remain in the center. This is the only thing that moves it around.

#wrapper2 { margin: 300px 40px 0 200px }

Same for you, cvekiboy, if you want to follow the instructions in the thread linked in the previous post.

Thanks for the reply Brian! I didn't add that section to my forum, this is all I have placed on it and it's off centering the nav bar and forum itself:
/* border around forum */
#image-wrapper {background-image: url(http://i106./m259/bluesonic1/Rise%20of%20Four/head3.png~original), url(http://i106./m259/bluesonic1/Rise%20of%20Four/body.png~original);
background-repeat: no-repeat, repeat-y;
background-position: center top, center center;
   padding: 39em;
   margin: 10px;
}
[Link to forum]
When I changed the padding section, it moves the forum down AND to the right.

[cvekiboy]

Bluesonic1 Remove

padding: 39em;
margin: 10px;
Login out...

END

[Bluesonic1]

Jul 7, 2013 20:57:56 GMT -8 cvekiboy said:

Bluesonic1 Remove

padding: 39em;
margin: 10px;
Login out...

END

Click the link and see my forum. If I remove that padding section, then the forum moves up and blocks that header image. It ends up being another background to the forum rather than a header for it. I just don't understand why the padding moves the forum down and to the right at the same time.

[cvekiboy]

Bluesonic1 Try only

margin-top: 150px;
Login out...

END

[Bluesonic1]

Jul 8, 2013 3:36:15 GMT -8 cvekiboy said:

Bluesonic1 Try only

margin-top: 150px;
Login out...

END

Margin is what separates the image from the page border. Padding is what separates the image from the forum. Adding that just moves the image further down the page but the forum still sits on it rather than having the image head the forum (I did try it and that's what happened).

[cvekiboy]

Yea, you are right! Its totally different than my problem.
Sorry 4 me acting so smart! 

Step by step, we fit it somehow. Just those steps are going so slooooow ... 

Login out...

END

[Bluesonic1]

Haha yeah, that's alright, I appreciate all the help I can get on this problem at this stage!

[cvekiboy]

Jul 7, 2013 12:57:18 GMT -8 cvekiboy said:

Thanks for hints guys/(girl?), but something tells me this will be a struggle to achieve.
The final solution could help all that used a popular border around forum by california code!

Further problems:
1. It wraps the adds too!
2. Welcome (flash) banner is aligned to right. [SOLVED] CSS #banner { padding: 0px 20px; }
3. Width of the forum affects the images too!
 - if its the same as image (920px), than it slightly covers the background image (currently set)
 - if its reduced (by 20px), the head (top) and background image is reduced too!
The #wrapper-foot image is not affected and managed to pull it above bottom ad!

CSS
/* border around forum */
#wrapper {background-image: url(http://i557./ss15/3MAJ/Forum%20skin/bg%20grads/boardheader.gif), url(http://i557./ss15/3MAJ/Forum%20skin/bg%20grads/boardbg.gif);
background-repeat: no-repeat, repeat-y;
background-position: center top, center center;
margin-top: 150px;
}

#wrapper-foot {
   background-image: url("http://i557./ss15/3MAJ/Forum%20skin/bg%20grads/boardbase.gif");
   background-position: center center;
   background-repeat: no-repeat;
   height: 25px;
   margin: 0 auto;
   width: 920px;
}
 + Forum Wrapper part

Login out...

END

Can some #wrapper-head solve the head image?
How to separate the background image from width of forum and pull it from bottom till last (base) one?
And last - move the top ad! Or simply, there is no safe solution atm? If not, will it ever be?

Thanks for any kind of response.

[PREVIEW]

Login out...

END

[Bluesonic1]

Using #wrapper-head is exactly the same as what I did in calling mine #image-wrapper. What matters is when you go into the Forum Wrapper templates, where you insert that <div id="name-here">. I've actually got 3 wraps on my forum; this image one that's not working, one around the navigation bar and another around the main forum. That one around the main forum can be adjusted in the Templates section to exclude the ads (mind you it'll exclude that other section of the navigation bar too. To do that you need to go into Templates > Forum Wrapper and look around in there just after all the navigation coding and trial-and-error by placing your #wrapper-head in different places until you achieve your goal. That's how I got to wrap the forum and then the navigation bar

EDIT: Replying to your problem actually helped me come up with a stroke of genius; well a temporary fix to my header image. I removed all the padding from the image header wrapper section and instead added a big margin to my navigation bar wrapper so it's literally moving the forum down rather than the header image moving it down. Unfortunately this solution isn't going to work without wrapping your navigation bar like I did, hence why I say it's a temporary fix until an actual coder can look at it... But if you're wondering what I've added:
Forum CSS:

#nav-wrapper {
width: @wrapper_width;
margin: 530px auto 0px auto;
overflow-x: hidden;
padding: 0px 0px 0px 0px;
background: rgba(125,159,183,0.4);
border-top: 2px dotted #dddddd;
border-bottom: 2px dotted #dddddd;
border-radius: 10px;
}
/* border around forum */
#image-wrapper {background-image: url(http://i106./m259/bluesonic1/Rise%20of%20Four/head3.png~original), url(http://i106./m259/bluesonic1/Rise%20of%20Four/body2.png~original);
background-repeat: no-repeat, repeat-y;
background-position: center top, center center;
margin: 10px;
}

Then in the forum's Templates > Forum Wrapper:
Added <div id="image-wrapper"> to about line 15 (make sure it's above the line that says <header>).
Added <div id="nav-wrapper"> to about line 24 (make sure it's above <div id="navigation-menu" class="ui-helper-clearfix">).
Maybe this can prove useful to someone if they can make the navigation wrapper transparent and then add that huge margin in.