Spaces between blocks, how?

[OMGClay]

Hello!

Ive seen some nice sites that have spaced up the layout into blocks with the background picture being seen through the spaces. How do I do that? XenPorta? Isnt that a huge addon with a lot of stuff I dont need?

Please tell me how I should do that. Ill attach a blurry picture of how I mean. Look at how the background is being seen between blocks. Thanks.

 

[MagnusB]

Its only one background, probably on the body tag.

 

[Russ]

Yep looks like they just made the background a full image, then removed like the background for like pagecontent or along those lines

 

[OMGClay]

Hey guys!

Yes it is just one big background image, but how do I separate my content into blocks like that? See my new picture, I want to cut my content into blocks and then have the background seen between the blocks (where my red arrows are in this picture).

 

[MagnusB]

They already are spaced like that. If you try to apply the background image on the html tag, it should pretty much appear something like that.

 

[OMGClay]

They already are spaced like that. If you try to apply the background image on the html tag, it should pretty much appear something like that.

Oh sorry, it looks like that but this is just a Photoshop image Ive made to illustrate what I want. Its a picture of my own forum where Ive used layers: I pasted my forums sceenshot onto a background picture and used the eraser tool to create the spaces (having the background image seen through).

Now, how do I do that in XenForo? I see this XenPorta demo site has it: http://8wayrun.com/

But do I need XenPorta to do this little spacing trick? Im under the impression that XenPorta is a huge addon with lots of features - I only want the separated blocks!

 

[MagnusB]

On that site he has just put a background on #content:

#content { background: ('path/to/image.png') !important; }

 

[OMGClay]

1. Whats the difference between that code and to just change it in the CP -> Style prop. -> General -> Body (or HTML)? I know how to change background, thats not what Im after.
2. Look at my page: http://matchtankar.se I only have one huge massive block of content, how do I cut it into blocks with spaces in between? That is my question.

 

[MagnusB]

1. That could work, though you need to change the background color for #content then to transperant. I think it is the same style property, except Content instead of HTML. You would need to use the HTML tag, I would think

2. As I said, the blocks are already separated, but the "forum body container" (so to say) has a background color defined. In your case, there are two rules that define the background color for that part:

#content .pageWidth {
background-color: #FCFCFF;
}

And:

#content .pageContent {
background-color: #FCFCFF;
padding: 10px 20px;
}

This is what creates the whiteish background color on your forum, if you change those two to transparent instead of #FCFCFF you will see the html tag background color between your blocks.

 

[OMGClay]

Thank you Magnus, it actually worked. It looked okay on the front page but was very ugly when reading in threads due to huge gaps between every post. So I think Ill let it be for now. Thanks again!