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 » Forum Usage » Forum How-To »

[SOLVED] How to make images & subtitles line up horizontally & float left to next lin


 
Prev Previous Post   Next Post Next
  #1  
Old Jul 8, 2013, 05:14 PM
New WordPress Fan
 
141 posts · Jul 2010
[SOLVED] How to make images & subtitles line up horizontally & float left to next lin

Using Wordpress 3.5.2, Atahualpa 3.7.12, with Post-Page Association plugin - Thumbnails Only template.

The Template displays on a page only the thumbnails for posts in the designated category (each thumbnail is linked to open the full post). This is a great for a Videos page, where each displayed thumbnail links to the full post where the video is posted.

I wanted to add the title of each post as a subtitle under each thumbnail. So, I added the following bolded code in the template php file:

Code:
<?php
/*
PPA Template: Thumbnails Only
Description: This template shows only a thumbnail for each associated post.
Version: 1.0
*/

If ( $association_query = $this->get_associated_posts() ) : ?>
  <div class="associated-posts">  
  <?php
  While ($association_query->have_posts()) : $association_query->the_post();

  If ( !$thumb = $this->get_post_thumbnail(get_the_id()) ) Continue; ?>
  
  <div class="associated-post">
    
    <div class="thumb-frame">  
      <a href="<?php the_permalink(); ?>" title="<?php the_title() ?>">
        <img src="<?php Echo $thumb[1] ?>"
             width="<?php Echo $thumb[2] ?>"
             height="<?php Echo $thumb[3] ?>"
             alt="<?php the_title() ?>"
             title="<?php the_title() ?>"
             class="thumb post-preview-image alignnone" />
      </a>
    

<h3 class="post-title">
     <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title() ?></a>
    </h3>

   </div> 
  </div>
  <?php EndWhile; ?>
  <div class="clear"></div>
  </div>
<?php EndIf;
/* End of File */
I then styled the <h3> to be smaller and centered. Specifically, I used the following CSS Code:

Code:
#post-756 .associated-post h3 {
font-size: 10px;
width: 150px;
text-align: center;
}

#post-756 .associated-post {
border: none !important;
margin-top: 0px;
margin-bottom: 30px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: 5px;
float: left;
}
This all works fine, except that the thumbnails now do not wrap all the way left on the second row -- as they did before I edited the PHP file for the template. After my edit, the thumbnail on the second row starts about midway through the row.

I have tried a bunch of CSS codes - including various versions of what I found here: http://stackoverflow.com/questions/6...ser-zoom-level But no luck.

I tried adding:

Code:
#post-756 .associated-posts {
width: 900px;
overflow: hidden;
white-space: nowrap;
}

#post-756 .associated-post {
display: inline-block;
width: 155px; 
}

#post-756 .thumb-frame {
width: 150px;
}
This makes the thumbnails wrap properly in two horizontal rows, with the second row starting at the left margin of the page, as it should. However, the subtitles now do not stay under the thumbnails, but extent all the way across the page to the right, overlapping each other!

I am stumped! Any help would be VERY MUCH APPRECIATED!

Please Let me know if you'd like me to send you a private message with the URL.

Many thanks in advance!
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to vertically center-align one-line and two-line menu labels? steve955 Page & Category Menu Bars 4 Mar 12, 2013 10:05 AM
[SOLVED] Black Line Above/Below Header and White Line Before Body Mande Header configuration & styling 1 Sep 9, 2010 08:54 AM
How to separate line items in widget content with a line? mgofootball Sidebars & Widgets 5 Jul 19, 2009 08:36 PM
How to change dotted border line in the layout to solid line? araneum Atahualpa 3 Wordpress theme 1 Feb 21, 2009 06:40 PM


All times are GMT -6. The time now is 04:14 AM.


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