Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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..?


  #1  
Old Oct 26, 2009, 03:19 PM
gcarson
 
26 posts · Oct 2009
Hi,

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?

Thanks,
Gary
  #2  
Old Oct 26, 2009, 03:21 PM
gcarson
 
26 posts · Oct 2009
Quote:
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.
  #3  
Old Oct 27, 2009, 11:13 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try
HTML Code:
<div class="myfunkypost">
<table>
<colgroup><col class="col1" /><col class="col2" /></colgroup> 
<tr>
<td><img....></td>
<td>a bunch of text here</td>
</tr>
</table>
</div>
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
  #4  
Old Oct 27, 2009, 11:19 AM
gcarson
 
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.
  #5  
Old Oct 28, 2009, 10:06 AM
gcarson
 
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() ) { ?>
<table>
<colgroup><col class="postcol1" /><col class="postcol2" /></colgroup>
<tr>

<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>

<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() ) { ?>
</td>
</tr>
<?php } ?>

</div>

<?php if ( !is_page() ) { ?>
</table>
<?php } ?>
</div>
<!-- / 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.
  #6  
Old Oct 28, 2009, 10:10 AM
gcarson
 
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!

Bookmarks

Tags
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 04:47 PM
[SOLVED] Layout Width and Container Style problems theflash26 Header configuration & styling 2 Oct 14, 2009 01:51 PM
[SOLVED] Unwanted style difference in singel post and that same post on single displa Sakshin Header configuration & styling 4 Sep 16, 2009 01:29 PM
[SOLVED] Layout WIDTH vs. Layout Container Olivier Header configuration & styling 2 Jul 13, 2009 06:18 PM
Want to make background image visible through logo div keblake Header configuration & styling 4 Mar 11, 2009 08:32 PM


All times are GMT -6. The time now is 05:34 AM.


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