Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Horizontally & Vertically expanding post backgrounds / boxes


  #1  
Old Jan 31, 2010, 01:47 PM
jaxon
 
27 posts · Jan 2010
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...
  #2  
Old Jan 31, 2010, 02:23 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 31, 2010, 04:32 PM
jaxon
 
27 posts · Jan 2010
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.

2.
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
  #4  
Old Jan 31, 2010, 04:48 PM
jaxon
 
27 posts · Jan 2010
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?
  #5  
Old Jan 31, 2010, 04:59 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 31, 2010 at 05:06 PM.
  #6  
Old Jan 31, 2010, 05:08 PM
jaxon
 
27 posts · Jan 2010
Got it. I should probably be keeping that in mind with icons and stuff to. hmmm...

Any thoughts on my extended question?

Thanks again!!
  #7  
Old Jan 31, 2010, 08:24 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Post heading on Multiple seems &lt;h2&gt; whereas single post has &lt;h1&gt; kostermw Post-Kicker, -Byline & -Footer 15 Oct 18, 2009 09:38 AM
[SOLVED] How to change font size &lt;h1&gt; &lt;h2&gt; &lt;h3&gt; &lt;h4&gt; &lt;h5&gt; &lt;h6&gt; jesusguevarautomotriz Post-Kicker, -Byline & -Footer 2 Oct 8, 2009 09:17 PM
how to horizontally display the Category Posts Widget ? bryan85 Plugins & Atahualpa 0 Sep 6, 2009 07:28 PM
Items in footer of post/pages stack vertically and not horizontally bcorrigan Post-Kicker, -Byline & -Footer 2 May 11, 2009 01:09 PM
[SOLVED] Expanding center and shrinking sidebars rachkitty Atahualpa 3 Wordpress theme 2 Mar 29, 2009 01:29 PM


All times are GMT -6. The time now is 11:37 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.