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 » Post-Kicker, -Byline & -Footer »

[SOLVED] Style Post Layout with div..?

Old Oct 26, 2009, 04:19 PM
26 posts · Oct 2009

I know someone on here must have done something like this before so here I ask. I'm looking to style my posts as such:

Left 1/3 Right 2/3
Picture title, body, footer

I figured I could accomplish this using an image divide and then a 'body' divide, styling each with with CSS. Also, I'm assuming I can insert the image as a custom field using the url as the image address? But not 100% sure. I'm not a coder at all so was reaching out to see if someone in the forum has done something similar?

Old Oct 26, 2009, 04:21 PM
26 posts · Oct 2009
Originally Posted by gcarson

I'm looking to style my posts as such:

Left 1/3 Right 2/3
Picture title, body, footer
that didn't' come out like i had hoped! I meant was the left 1/3 of my post contain a full image and the right 2/3 of my post contain all the written information.
Old Oct 27, 2009, 12:13 PM
juggledad's Avatar
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
HTML Code:
<div class="myfunkypost">
<colgroup><col class="col1" /><col class="col2" /></colgroup> 
<td>a bunch of text here</td>
with a CSS insert
HTML Code:
.col1 {width: 40%;}
.col2 {width: 60%;}
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Old Oct 27, 2009, 12:19 PM
26 posts · Oct 2009
juggle.. Thank you. I am in the process of splitting it up into tables right now.. playing around with it. Have to make sure it only does it on posts and not on pages. Also, took me a while to figure out how to insert an email. I learned what a thumbnail is and how to insert that into a post.

I think after I'm done I'll post what I did as it might be useful for others. My trouble always is.. I know what I want to do but never know how to word my question in the correct 'lingo' to find the solution.
Old Oct 28, 2009, 11:06 AM
26 posts · Oct 2009
Got it to work. Took a little bit of messing around so I thought I would share. I'm sure this isn't the most efficient way to do it but it worked for me. Here goes.

So i wanted the thumbnail picture on the left and the post on the right. Here is my code for the loop:

<?php /* For SINGLE post pages if activated at ATO -> Next/Previous Navigation: */

bfa_next_previous_post_links('Top'); ?>

<?php /* Post Container starts here */

if ( function_exists('post_class') ) { ?>

<div <?php if ( is_page() ) { post_class('post'); } else { post_class("$odd_or_even"); } ?> id="post-<?php the_ID(); ?>">
<?php } else { ?>
<div class="<?php echo ( is_page() ? 'page ' : '' ) . $odd_or_even . ' post" id="post-'; the_ID(); ?>"> <?php } ?>

<?php if ( !is_page() ) { ?>
<colgroup><col class="postcol1" /><col class="postcol2" /></colgroup>

<td align="center" valign="top">

<div class="Thumbnail"><img src="<?php $values = get_post_custom_values("Thumbnail"); echo $values[0]; ?>" alt="<?php the_title(); ?>" /></a></div>

<td align="left" valign="top">

<?php } ?>

<?php bfa_post_kicker('<div class="post-kicker">','</div>'); ?>
<?php bfa_post_headline('<div class="post-headline">','</div>'); ?>
<?php bfa_post_byline('<div class="post-byline">','</div>'); ?>
<?php bfa_post_bodycopy('<div class="post-bodycopy clearfix">','</div>'); ?>

<?php bfa_post_pagination('<p class="post-pagination"><strong>'.__('Pages:','atahualpa').'</strong>','</p>'); ?>

<?php bfa_post_footer('<div class="post-footer">','</div>'); ?>

<?php if ( !is_page() ) { ?>
<?php } ?>


<?php if ( !is_page() ) { ?>
<?php } ?>
<!-- / Post -->

I had to put the !is_page() in command in a few times as i didn't want the thumbnail to appear on pages, just on posts. So anything that wasn't going to be on the pages, all the table information, was wrapped in that command.

My final step is to link the thumbnail to the post's tag. I'm trying to use this but can't get it quite working yet. Will be my final post when it works!

<a href="http://www.mysite.com/tag/'.$tag->slug.'" rel="tag">

So i hope this was helpful to anyone out there. I saw this on one site and it looked very slick. Although they only used this format for their multipost page and had it display normally on a single post.. so there probably will need to be a slight modification to this.
Old Oct 28, 2009, 11:10 AM
26 posts · Oct 2009
should also mention. To get the 'Thumbnail' to work. When adding a new post, create a custom field called 'Thumbnail' , or whatever you want, and add the exact url to the thumbnail. That's it!


post loop

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Changing the FONT STYLE of the POST ianuy Atahualpa 3 Wordpress theme 10 Sep 25, 2011 05:47 PM
[SOLVED] Layout Width and Container Style problems theflash26 Header configuration & styling 2 Oct 14, 2009 02:51 PM
[SOLVED] Unwanted style difference in singel post and that same post on single displa Sakshin Header configuration & styling 4 Sep 16, 2009 02:29 PM
[SOLVED] Layout WIDTH vs. Layout Container Olivier Header configuration & styling 2 Jul 13, 2009 07:18 PM
Want to make background image visible through logo div keblake Header configuration & styling 4 Mar 11, 2009 09:32 PM

All times are GMT -6. The time now is 09:00 AM.

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