Wordpress Themes - WP Forum at BFA - Horizontally & Vertically expanding post backgrounds / boxes

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)

- - Horizontally & Vertically expanding post backgrounds / boxes (http://forum.bytesforall.com/showthread.php?t=5628)

Horizontally & Vertically expanding post backgrounds / boxes

Hi there folks! Thanks again for all the great work and excellent community!

So, I'm hoping to put together some nice 3D content boxes for all posts. My css and html skill is limited so thanks in advance... I found this nice tutorial on creating horizontally and vertically expandable content boxes here: http://www.webdesignerwall.com/tutor...xpandable-box/

This method creates divs for the top-left, top-right, bottom-left and bottom-right and puts the relevant bg image in each. With lots of overlap in image size. This actually seems like a pretty reasonable way to code nice 3Dboxes but I really don't know quite how to integrate it.

My only attempt involved pasting this into "html inserts"

Code:

<div class="post">

  <div class="topleft">

  <div class="topright">

    <div>

       CONTENT GOES HERE

    </div>

  </div>

  </div>



  <div class="bottomleft">

  <div class="bottomright">

  </div>

  </div>

</div>

and this in the "css inserts":

Code:

.box div.topleft {

        display: block;

        background: url("images/box-bg.png") top left no-repeat white;

        padding: 2.0em 0em 0em 2.0em;

}



.box div.topright {

        display: block;

        background: url("images/box-bg.png") top right no-repeat white;

        padding: 2.0em;

        margin: -2.0em 0 0 2.0em;

}



.box div.bottomleft {

        display: block;

        height: 45px;

        margin-top: -2.0em;

        background: url("images/box-bg.png") bottom left no-repeat white;

}



.box div.bottomright {

        display: block;

        background: url("images/box-bg.png") bottom right no-repeat white;

        height: 45px;

        margin-left: 3.0em;

}

but with the image url's corrects and .box replaced with .post.

This approach should aptly demonstrate exactly how limited my coding knowledge is. It seems like the html is far from correct because it really isn't formatted anything like the .post section of css.php and the "CONTENT GOES HERE" is pretty much a dead give a way that I'm missing a couple important steps.... ;)

I would be overjoyed if someone could help me out with this or offer another solution for creating content boxes for posts and/or widgets that are expandable (vertically at the very least) AND can use images for borders, rounded corners, shadows, etc.

Thank you so much!

If flynn or juggledad chime in, I would be glad to shoot a college student sized donation either of their ways as well... ;)

Here is how to use it.
1) copy the images to wp-content/box_images
2) add this to ATO->Add HTML/CSS Inserts->CSS Inserts

HTML Code:

.box div.topleft {

        display: block;

        background: url("http://yourdomain.com/wp-content/box_images/box-bg.png") top left no-repeat white;

        padding: 2.0em 0em 0em 2.0em;

}



.box div.topright {

        display: block;

        background: url("http://yourdomain.com/wp-content/box_images/box-bg.png") top right no-repeat white;

        padding: 2.0em;

        margin: -2.0em 0 0 2.0em;

}



.box div.bottomleft {

        display: block;

        height: 45px;

        margin-top: -2.0em;

        background: url("http://yourdomain.com/wp-content/box_images/box-bg.png") bottom left no-repeat white;

}



.box div.bottomright {

        display: block;

        background: url("http://yourdomain.com/wp-content/box_images/box-bg.png") bottom right no-repeat white;

        height: 45px;

        margin-left: 3.0em;

}

3) when you write your post, use the HTML editor and do it like this

HTML Code:

<div class="box">

        <div class="topleft">

                <div class="topright">

                        <div>

This is where you will put your post text. This will show up inside the box

                        </div>

                </div>

        </div>

        <div class="bottomleft">

                <div class="bottomright"> </div>

        </div>

</div>

Pretty cool little trick

Fantastic juggledad! Thank you SO MUCH for your help! That definitely got me headed in the right direction. Just a bit more tweaking and I'll have pretty boxes galore.... :)

1.

I was hoping for something I could implement in the whole post class so that: 1. I wouldn't need to add code to each post (not the end of the world though). 2. I could include the headline container in my new box (ultimately I would love to be able to choose how much of the top content (kicker, headline, byline) gets included in the box on the fly)

My thought for addressing both of these is to add the two top images to ATO -> post&pages -> headline box (or whichever .div i wanted to be the top). The bottom two images would then be added to ATO -> post&pages -> body box. If white space in the byline box were a problem - i could simply add two more images there.

I'm not exactly sure if this would work or what the code would look like. If you can help here, it would be most appreciated:)

I had guessed styling the whole .post box was where you would go with my original question, so your suggesting adding code directly to a post instead of "css insert" hints that this request could potentially be more difficult than I'm grasping.

The box showed up beautifully in both the home page preview and individual post page at layout width = 900px. At 100% or 1200px in this case, I get a vertical gap between left and right images (see attached screenshot) It seems like the the left images are only extending to the beginning of the paragraph. For reference - I double checked that all bg images are 500x500.

This isn't a problem with my usual 900px layout - so I could just ignore it, but it seems like a good idea to understand the issue before it becomes a problem in the future;)

http://i48.tinypic.com/m75o1z.png

One more thing: The other reason that I like my hypothetical solution to part one of my last post is that it seems like it could be relatively easily replicated for adding expanding BGs/boxes to simple widgets (categories, textboxes, links, etc.). Just a thought.

P.S. Hopefully this is helpful for other folks to. If in the future someone uses this technique and achieves something nice to look at - post it here for others to see.

Also, is there a reason to put, the images in a subdirectory of wp-content instead of in images or a subdirectory of images?

Quote:

Also, is there a reason to put, the images in a subdirectory of wp-content instead of in images or a subdirectory of images?

This way you don't have to worry about copying the images the next time you update Atahualpa.

I think the reason the gap shows in the box has to do with the size of the original image, if the original is bigger, I think this would not be a problem

Got it. I should probably be keeping that in mind with icons and stuff to. hmmm...

Any thoughts on my extended question?

Thanks again!!

I think the reason the gap shows in the box has to do with the size of the original image, if the original is bigger, I think this would not be a problem