WordPress.org

1. FuxiAdmin
   Member
   Posted 10 months ago #

   I've been stuck with this one all day and cannot seem to find an answer.

   I'm been trying to place a thumb to the left of my title on my homepage, on the widgets below the main feature image. Please view;
   http://www.fuximagazine.com

   The code im using is more or less the same as I have used for other sections, including the features, archives etc.

   However, for some reason the thumb is showing up above the title and is repeating the titles css. (ie, its showing a while line below it)

   Here is the code, could somebody enlighted me on where i'm going wrong?

   <ul class="more_stories">
   		<?php $getposts = new WP_query(); $getposts->query('showposts=10&offset=1&cat='.$section); ?>
   		<?php global $wp_query; $wp_query->in_the_loop = true; ?>
   		<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>
   		<li>
   		<?php show_thumb($comfy['KWwidth'],$comfy['KWheight'],$comfy['crop'],$comfy['quality']); ?>
   		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
   		</li>
   		<?php endwhile; ?>
   		</ul>

   Best,
   FuxiAdmin

2. Chip Bennett
   Member
   Posted 10 months ago #

   Where is that show_thumb() function defined?

   As for the style question: that's entirely a CSS question. I would suggest using Firefox Firebug, or Chrome Developer Tools, in order to determine what CSS style definitions are being applied to the Thumbnail.

3. FuxiAdmin
   Member
   Posted 10 months ago #

   Thanks Chip

   I've managed to make some progress playing with the CSS (removed the white line under image), but still can't get the title to sit next to the thumb. Can you spot a reason why in this css?

   .more_stories {
   	background: #b07973;
   	margin: 0 7px 0 7px;
   	padding: 1px 0 1px 0;
   }
   
   .more_stories .thumbl{
   	position: relative;
   	width: 50px
   	padding: 0 0 0 0;
   	z-index: 1;
   }
   
   .more_stories a {
   	position: relative;
   	color: #fff;
   	display: block;
   	z-index: 2;
   	padding: 5px 10px 0 90px;
   	border-bottom: 1px solid #fff;
   	height: 1%;
   }
   
   .more_stories a:hover {
   	background: #f6feff;
   	color: #297eb9;
   }

   Thanks again

4. Chip Bennett
   Member
   Posted 10 months ago #

   Have you tried using Firefox Firebug or Chrome Developer Tools?

5. FuxiAdmin
   Member
   Posted 10 months ago #

   I'm giving them a go now, but is the first time I've used Chrome (don't have firefox browser).

Reply

You must log in to post.