Wrapper Code

[Former Member]

Is there a code already made or can someone help me find a tutorial where I can add my own wrapper with a border? Thanks in advance.

[Beckea]

/*wrapper css*/
#wrapper {
border: 2px solid black;
width: 84%;
margin: 10px auto;
padding:20px;
}

Just change the numbers like you want them on your board. Using hex color instead of "black" "#000000;" This goes at the bottom of your stylesheet page. More 2px the thicker the border.

[Former Member]

Thanks Becky!
Instead of having a solid color as the border can I add an image?

[Nori]

You can indeed Shannt10.

You can add the border-image property to the CSS Beckea provided. Not sure what image you want to use, but here's a link to W3Schools which gives plenty of interactive examples that can help you out with your specific image.

Good luck!

[Former Member]

Thank you for the link.
Am I able to add it to the wrapper?

Here's the code I'm using:

#wrapper {
background-image: url('http://i67.tinypic.com/orphxs.jpg'); width:1000px; padding: 30px;
}

[Nori]

For sure, you can manipulate the wrapper as much as you can anything else. Background-image and border-image are two separate things, so you can set different images and combine their effects with no trouble.

For your wrapper, you don't really need to set the Width since your wrapper's size will be determined by your forum's existing size + the padding you set. If you want to add a border image as well then you can just add the border-image property I mentioned and linked to before.

I can't really give any code examples cause I don't know what you're using or what effect you want. The 'Play It' and 'Try it Yourself' examples linked in my previous post should give you a better idea of what to manipulate for the border-image property to achieve the effect you want.

[Beckea]

May 11, 2018 6:19:02 GMT -8 shannt10 said:

Thanks Becky!
Instead of having a solid color as the border can I add an image?

Yes just put

background-image: url(image.gif);
Second to what Nori mentioned.