MyBB Community Forums

Create a border around the mybb container? I want to do something similar to an old silent movie title card around it as a border..
a border just like this one..

---

I found this guuide but can't get it to work... http://www.css3.info/preview/border-image/

Yes it is, via CSS or image?
Maybe is better you do this using an image - css3 is still not working perfectly with every browser

How could I do this via image? I've tried css3 and it didn't work..

All you have to do is create an image like that on photoshop, then give to the container a fixed size and assign the image as background in the CSS.

I don't know if you're entirely new to these kind of things, if so, I'll tell you step by step

Well I'm not new or anything I just can't seem to get anything on the outside of my container.. I don't want anything in the middle but everything I keep trying put it into the container.

With anything you mean those borders, right?

exactly..

Basically:

1. You create an image like the one I'm attaching (I'm putting simple borders, just to make you understand, you will use the borders you want). that is the header
[attachment=27207]
and in the css you will make something like this

#header_bar {
background:url(images/yourthemefolder/header.png);
width:870px;
padding:20px;
height:50px;
margin:auto auto;
}

Note: The image's width is 910, so 870 if you do 910 - 20 - 20 for the padding

Go to header template, and add before the container div
this

<div id="header_bar"></div>

2. Do the same for the footer

3. Then create an image for the middle part, that will be repeated for all the container height, and this will work in every browser.


I hope I was simple in explaining this

(2012-09-04, 11:50 PM)Trinit Wrote: [ -> ]Basically:

1. You create an image like the one I'm attaching (I'm putting simple borders, just to make you understand, you will use the borders you want). that is the header

and in the css you will make something like this

#header_bar {
background:url(images/yourthemefolder/header.png);
width:870px;
padding:20px;
height:50px;
margin:auto auto;
}

Note: The image's width is 910, so 870 if you do 910 - 20 - 20 for the padding

Go to header template, and add before the container div
this

<div id="header_bar"></div>

2. Do the same for the footer

3. Then create an image for the middle part, that will be repeated for all the container height, and this will work in every browser.


I hope I was simple in explaining this

Okay thanks that makes a lot of sense!
The only thing is I'm confused on how to do the middle and footer parts now..

The footer should be exactly the same as the header (but if you use the same CSS, change the id to a class [from #header_bar to .header_bar]). Also change the <div id to a <div class

For the sides of your forum, make the image slightly wider than your #container width. If you look at MyBB's borders, you can see that it's an image: http://www.mybb.com/assets/images/shadow.png

Make yours similar to that, and use repeat-y so that it fills the length of your forum.