First off, thanks for a really nice theme.

I'm currently playing around with it, to give it a little more dimension. Currently it is very flat and doesn't reach out.

I was hoping you could help me point out where and what to play with, to fiddle around with your block styling, as I can't seem to make them out specifically in the css files.

As you can see from the attached png, I want to add borders to left and right, and then attach a png to the bottom section, hoping that I can align everything. It'll take a little playing around.

Cheers and thanks for any help in advance,

Flix

CommentFileSizeAuthor
Screenshot_33.png40.22 KBFlixotide

Comments

nevets’s picture

nevets commented

I would just an image (include the vertical lines.
In style.css at the end, add

.block .content {
background:transparent url(block.gif) no-repeat scroll 0% 100%;
padding-bottom: 20px;
}

Where block.gif is your image (assumed to be in the theme directory here). The image needs to be as tall (or taller) than you tallest block. The padding is to keep the block contents from ending up on top of the gradient.

Flixotide’s picture

Flixotide commented

Sounds right. But if I read this correctly, that would also add the gif to the bottom of the usr1 usr2 usr3 blocks, and not just the ones in the left and right side of the layout.

Adding the gif to the content section would also make it hard to align it wiithout moving the rest of the content, no?

Cheers, Flix

florian’s picture

florian commented

Steve is right. To theme blocks in the main area only you can use:

div#middlecontainer .block .content {
background:transparent url(block.gif) no-repeat scroll 0% 100%;
padding-bottom: 20px;
border-left: 1px solid blue;
border-right: 1px solid blue;
}

You may also theme sidebars differently:

#sidebar-left .block .content {
background:transparent url(block-left.gif) no-repeat scroll 0% 100%;
padding-bottom: 20px;
}

#sidebar-right .block .content {
background:transparent url(block-right.gif) no-repeat scroll 0% 100%;
padding-bottom: 20px;
}