Different post colors

  • Hi guys!

    I am working on a jobboard and came across the jobs.smashingmagazine.com jobboard which has a few options i also would like to see integrated but just dont know how.

    1) As you can see the first post has a white background , the second post has a grey bg , third white bg again etc etc.

    2) The new post have a “new” image behind the title , this will last for a day.

    Could anyone tell me how this is done , or point me in the right direction ?

    Thanks a lot

    Regards,
    Alvin

Viewing 15 replies - 1 through 15 (of 28 total)

  • Very easy to do. I am going to tell you how the site you mentioned did it as I do not know what your variables are in your layout.

    They have a div id for job (yours is post) has 2 classes. One class that is .listingItem and one class that is .even

    .listingItem {
    padding:13px 7px;
    position:relative;
    }

    .even {
    background-color:#F1F1FF;
    border:1px solid #EBEBFF;
    }

    so they then just use the php in the index.php to flip flop these 2 classes. One class is “listingItem” and the other is “listingItem even”I don’t have the wordpress files with me to show you but hopefully this and the advice below get you sorted out.

    Also a suggestion is get firefox and download firebug so you can look at websites better. It will help you see what they are doing in the script, css, and html. Will help you more then you ever know.

    Thread Starter Alvin

    (@akoetsier)

    A thank you Chewbears!

    I have downloaded firebug and i can see codes but i am not a php expert , so wp is still much hocus pocus for me ??

    So if i am correct the “.even” changes the background for the even post numbers ?
    If i put this in my .css , what should i modify in my index.php ?

    Anyway now i now what to look for , thanks a lot!

    Regards,
    Alvin
    The Netherlands

    Alvin without seeing your site I can not really tell you much more. But you need to find what I think is standard called “postwrap” and change that to one color and make a statement that adds a different color to the other background. Can you link your site?

    Thread Starter Alvin

    (@akoetsier)

    Hi Chewbears!
    I have found a tutorial which explains the code
    See tutorial here clicky

    I have posted my code there , could you please look into it?

    My website is called https://www.luchthavenpersoneel.nl , its the same theme used as jobs.smashingmagazine.com

    Thank you so far!

    Regards,
    Alvin

    Alright here is how I would do it!

    Guide

    Follow that guide. It works for your site. you just have to rename the class in the loop and the style sheet. LMK if you have questions

    Moderator t-p

    (@t-p)

    I don’t mean to highjack the thread.
    But can someone guide please how to accomplish this in Twenty Ten?

    Thanks.

    Very userful information! I am just google it on the internet. Thank you,my dear friend!

    Thread Starter Alvin

    (@akoetsier)

    Yes chewbears , that is the guide i pointed you to haha ??
    I have read it and tried it but i get errors constantly.

    Here’s the php ;

    <div class="content">

			<?php
			global $post;

			$myposts= array();
			$args = array(
			'showposts' => 20,
			'meta_key' => "active",
			'meta_value' => "false",
			'meta_compare' => "!="
			);

			query_posts($args);

			if (have_posts())
			{
				while ( have_posts() )
				{
					the_post ();
					if( (get_post_meta($post->ID, "featuredjob", true)=="1" && get_post_meta($post->ID, "payfeaturedjob", true)=="Yes") )
					{
						$post = get_post($post->ID);

						$posttime = $post->post_date;

						$posttime = explode(" ", $posttime);

						$currenttime = current_time(mysql);

						$currenttime = explode(" ", $currenttime);

						$inposttime = $posttime[0];

						$inposttime = explode("-", $inposttime);

						$incurrenttime = $currenttime[0];

						$incurrenttime = explode("-", $incurrenttime);

						///////////////////////////////////////////////////////////////////////////

						$jobrenew= get_post_meta($post->ID, 'jobrenew', true);
						$a  = mktime(0, 0, 0, $inposttime[1]+$jobrenew,   $inposttime[2],   $inposttime[0]);

						$b  = mktime(0, 0, 0, $incurrenttime[1],   $incurrenttime[2],   $incurrenttime[0]);

						$show="not";
						$id_old="";
						if ( ($b-$a) > (30*24*3600)  ) {
							$id_old = " id=\"old\"";
						}	

						if($id_old=="")
						{
							$jobtype = $_GET['jobtype'];
							if($jobtype!="")
							{
								if(get_post_meta($post->ID, "jobtype", true)==$jobtype)
								$show= "";
							}
							else
								$show= "";
						}

						if($show=="")
							$myposts[]= $post->ID;
					}
				}
			}

			$alt = 0;

			if(count($myposts)>0)
			{
			?>

			<h2>Featured Jobs</h2>

			<ul class="listing" id="featured">
			<?php
			foreach($myposts as $postid) :
			{
			$alt++;

			?>

				<?php

				$post = get_post($postid);

				$id_old="";

				if(1):
				?>

			<?php

			$jobtype = $_GET['jobtype'];

			if ($jobtype == "freelance") {

			?>

				<?php $key="jobtype"; $jobtyped = get_post_meta($post->ID, $key, true); if($jobtyped == "freelance") { ?>

					<li class="item <?php echo $altec; ?>" <?=$id_old;?>>
						<h3><a href="<?php the_permalink(); ?>"><?php $key="jobtitle"; echo get_post_meta($post->ID, $key, true); ?></a></h3>
						<small>

						<?php $key="companylink"; if(!(get_post_meta($post->ID, $key, true)=="https://" || get_post_meta($post->ID, $key, true)=="")): ?>
						<a target="_blank" href="<?php $key="companylink"; echo get_post_meta($post->ID, $key, true); ?>"><?php $key="company"; echo get_post_meta($post->ID, $key, true); ?></a>
						<?php else: ?>
						<?php $key="company"; echo get_post_meta($post->ID, $key, true); ?>
						<?php endif; ?>

						in <?php $key="location"; echo get_post_meta($post->ID, $key, true); ?> <?php $key="jobtype"; $jobtype = get_post_meta($post->ID, $key, true); if($jobtype == "freelance") { echo "<span class=\"fl\">Freelance</span>"; } else { if($jobtype == "parttime") { echo "<span class=\"pt\">Part Time</span>"; } else { if($jobtype == "fulltime") { echo "<span class=\"ft\">Full Time</span>"; } } } ?> </small>
						<em><strong><?php the_time('M'); ?></strong><?php the_time('j'); ?></em>
						<div class="cl"></div>
					</li>

				<?php } ?>

			<?php } ?>

			<?php

			$jobtype = $_GET['jobtype'];

			if ($jobtype == "parttime") {

			?>

				<?php $key="jobtype"; $jobtyped = get_post_meta($post->ID, $key, true); if($jobtyped == "parttime") { ?>

					<li class="item <?php echo $altec; ?>" <?=$id_old;?>>
						<h3><a href="<?php the_permalink(); ?>"><?php $key="jobtitle"; echo get_post_meta($post->ID, $key, true); ?></a></h3>
						<small>

						<?php $key="companylink"; if(!(get_post_meta($post->ID, $key, true)=="https://" || get_post_meta($post->ID, $key, true)=="")): ?>
						<a target="_blank" href="<?php $key="companylink"; echo get_post_meta($post->ID, $key, true); ?>"><?php $key="company"; echo get_post_meta($post->ID, $key, true); ?></a>
						<?php else: ?>
						<?php $key="company"; echo get_post_meta($post->ID, $key, true); ?>
						<?php endif; ?>

						in <?php $key="location"; echo get_post_meta($post->ID, $key, true); ?> <?php $key="jobtype"; $jobtype = get_post_meta($post->ID, $key, true); if($jobtype == "freelance") { echo "<span class=\"fl\">Freelance</span>"; } else { if($jobtype == "parttime") { echo "<span class=\"pt\">Part Time</span>"; } else { if($jobtype == "fulltime") { echo "<span class=\"ft\">Full Time</span>"; } } } ?> </small>
						<em><strong><?php the_time('M'); ?></strong><?php the_time('j'); ?></em>
						<div class="cl"></div>
					</li>

				<?php } ?>

			<?php } ?>

			<?php

			$jobtype = $_GET['jobtype'];

			if ($jobtype == "fulltime") {

			?>

				<?php $key="jobtype"; $jobtyped = get_post_meta($post->ID, $key, true); if($jobtyped == "fulltime") { ?>

					<li class="item <?php echo $altec; ?>" <?=$id_old;?>>
						<h3><a href="<?php the_permalink(); ?>"><?php $key="jobtitle"; echo get_post_meta($post->ID, $key, true); ?></a></h3>
						<small>

						<?php $key="companylink"; if(!(get_post_meta($post->ID, $key, true)=="https://" || get_post_meta($post->ID, $key, true)=="")): ?>
						<a target="_blank" href="<?php $key="companylink"; echo get_post_meta($post->ID, $key, true); ?>"><?php $key="company"; echo get_post_meta($post->ID, $key, true); ?></a>
						<?php else: ?>
						<?php $key="company"; echo get_post_meta($post->ID, $key, true); ?>
						<?php endif; ?>

						in <?php $key="location"; echo get_post_meta($post->ID, $key, true); ?> <?php $key="jobtype"; $jobtype = get_post_meta($post->ID, $key, true); if($jobtype == "freelance") { echo "<span class=\"fl\">Freelance</span>"; } else { if($jobtype == "parttime") { echo "<span class=\"pt\">Part Time</span>"; } else { if($jobtype == "fulltime") { echo "<span class=\"ft\">Full Time</span>"; } } } ?> </small>
						<em><strong><?php the_time('M'); ?></strong><?php the_time('j'); ?></em>
						<div class="cl"></div>
					</li>

				<?php } ?>

			<?php } ?>

			<?php 

			$jobtype = $_GET['jobtype'];

			if($jobtype !== "fulltime" && $jobtype !== "parttime" && $jobtype !=="freelance") { 

			?>

					<li class="item <?php echo $altec; ?>" <?=$id_old;?>>
						<h3><a href="<?php the_permalink(); ?>"><?php $key="jobtitle"; echo get_post_meta($post->ID, $key, true); ?></a></h3>
						<small>

						<?php $key="companylink"; if(!(get_post_meta($post->ID, $key, true)=="https://" || get_post_meta($post->ID, $key, true)=="")): ?>
						<a target="_blank" href="<?php $key="companylink"; echo get_post_meta($post->ID, $key, true); ?>"><?php $key="company"; echo get_post_meta($post->ID, $key, true); ?></a>
						<?php else: ?>
						<?php $key="company"; echo get_post_meta($post->ID, $key, true); ?>
						<?php endif; ?>

						in <?php $key="location"; echo get_post_meta($post->ID, $key, true); ?> <?php $key="jobtype"; $jobtype = get_post_meta($post->ID, $key, true); if($jobtype == "freelance") { echo "<span class=\"fl\">Freelance</span>"; } else { if($jobtype == "parttime") { echo "<span class=\"pt\">Part Time</span>"; } else { if($jobtype == "fulltime") { echo "<span class=\"ft\">Full Time</span>"; } } } ?> </small>
						<em><strong><?php the_time('M'); ?></strong><?php the_time('j'); ?></em>
						<div class="cl"></div>
					</li>

			<?php } ?>

			<?php endif; ?>

			<?php }endforeach;
			?>
			</ul>
			<?php
			}
			?>

		<h2>Latest jobs</h2>

		<ul class="listing">

			<?php
			global $post;
			$myposts= array();

			$args = array(
			'showposts' => 200,
			'meta_key' => "active",
			'meta_value' => "false",
			'meta_compare' => "!="
			);

			query_posts($args);

			if (have_posts())
			{
				while ( have_posts() )
				{
					the_post ();
					if( !(get_post_meta($post->ID, "featuredjob", true)=="1" && get_post_meta($post->ID, "payfeaturedjob", true)=="Yes") )
					{
						$post = get_post($post->ID);

						$posttime = $post->post_date;

						$posttime = explode(" ", $posttime);

						$currenttime = current_time(mysql);

						$currenttime = explode(" ", $currenttime);

						$inposttime = $posttime[0];

						$inposttime = explode("-", $inposttime);

						$incurrenttime = $currenttime[0];

						$incurrenttime = explode("-", $incurrenttime);

						///////////////////////////////////////////////////////////////////////////

						$jobrenew= get_post_meta($post->ID, 'jobrenew', true);
						$a  = mktime(0, 0, 0, $inposttime[1]+$jobrenew,   $inposttime[2],   $inposttime[0]);

						$b  = mktime(0, 0, 0, $incurrenttime[1],   $incurrenttime[2],   $incurrenttime[0]);

						$show="not";
						$id_old="";
						if ( ($b-$a) > (30*24*3600)  ) {
							$id_old = " id=\"old\"";
						}	

						if($id_old=="")
						{
							$jobtype = $_GET['jobtype'];
							if($jobtype!="")
							{
								if(get_post_meta($post->ID, "jobtype", true)==$jobtype)
								$show= "";
							}
							else
								$show= "";
						}

						if($show=="")
							$myposts[]= $post->ID;

					}
				}
			}

			$items_per_page= get_option("itemsperpage");
			$items_per_page= is_numeric($items_per_page)?$items_per_page:4;

			global $wp_rewrite;
			$catlink = $wp_rewrite->get_category_permastruct();
			if ( empty( $catlink ) )
			{
				if($_GET['paged']!="")
					$page_num= is_numeric($_GET['paged'])?$_GET['paged']:0;
				else
					$page_num= 0;
			}
			else
			{
				if((string)strpos($_SERVER["REQUEST_URI"],"page")!="")
				{
				$url_arr= explode("/", $_SERVER["REQUEST_URI"]);
				$page_num= $url_arr[count($url_arr)-2];
				}
				else
				$page_num= 0;
			}

			if($page_num==0)
				$start= 0;
			else
				$start= ($page_num-1)*$items_per_page;

			$alt = 0;
			if(count($myposts)>0)
			{
			for($n=$start; ($n<count($myposts) && $n<$start+$items_per_page) ; $n++ ):

			$postid= $myposts[$n];
			$alt++;

			?>

				<?php

				$post = get_post($postid);
				$id_old="";

				if(1):
				?>

			<?php

			$jobtype = $_GET['jobtype'];

			if ($jobtype == "freelance") {

			?>

				<?php $key="jobtype"; $jobtyped = get_post_meta($post->ID, $key, true); if($jobtyped == "freelance") { ?>

					<li class="item <?php echo $altec; ?>" <?=$id_old;?>>
						<h3><a href="<?php the_permalink(); ?>"><?php $key="jobtitle"; echo get_post_meta($post->ID, $key, true); ?></a></h3>
						<small>

						<?php $key="companylink"; if(!(get_post_meta($post->ID, $key, true)=="https://" || get_post_meta($post->ID, $key, true)=="")): ?>
						<a target="_blank" href="<?php $key="companylink"; echo get_post_meta($post->ID, $key, true); ?>"><?php $key="company"; echo get_post_meta($post->ID, $key, true); ?></a>
						<?php else: ?>
						<?php $key="company"; echo get_post_meta($post->ID, $key, true); ?>
						<?php endif; ?>

						in <?php $key="location"; echo get_post_meta($post->ID, $key, true); ?> <?php $key="jobtype"; $jobtype = get_post_meta($post->ID, $key, true); if($jobtype == "freelance") { echo "<span class=\"fl\">Freelance</span>"; } else { if($jobtype == "parttime") { echo "<span class=\"pt\">Part Time</span>"; } else { if($jobtype == "fulltime") { echo "<span class=\"ft\">Full Time</span>"; } } } ?> </small>
						<em><strong><?php the_time('M'); ?></strong><?php the_time('j'); ?></em>
						<div class="cl"></div>
					</li>

				<?php } ?>

			<?php } ?>

			<?php

			$jobtype = $_GET['jobtype'];

			if ($jobtype == "parttime") {

			?>

				<?php $key="jobtype"; $jobtyped = get_post_meta($post->ID, $key, true); if($jobtyped == "parttime") { ?>

					<li class="item <?php echo $altec; ?>" <?=$id_old;?>>
						<h3><a href="<?php the_permalink(); ?>"><?php $key="jobtitle"; echo get_post_meta($post->ID, $key, true); ?></a></h3>
						<small>

						<?php $key="companylink"; if(!(get_post_meta($post->ID, $key, true)=="https://" || get_post_meta($post->ID, $key, true)=="")): ?>
						<a target="_blank" href="<?php $key="companylink"; echo get_post_meta($post->ID, $key, true); ?>"><?php $key="company"; echo get_post_meta($post->ID, $key, true); ?></a>
						<?php else: ?>
						<?php $key="company"; echo get_post_meta($post->ID, $key, true); ?>
						<?php endif; ?>

						in <?php $key="location"; echo get_post_meta($post->ID, $key, true); ?> <?php $key="jobtype"; $jobtype = get_post_meta($post->ID, $key, true); if($jobtype == "freelance") { echo "<span class=\"fl\">Freelance</span>"; } else { if($jobtype == "parttime") { echo "<span class=\"pt\">Part Time</span>"; } else { if($jobtype == "fulltime") { echo "<span class=\"ft\">Full Time</span>"; } } } ?> </small>
						<em><strong><?php the_time('M'); ?></strong><?php the_time('j'); ?></em>
						<div class="cl"></div>
					</li>

				<?php } ?>

			<?php } ?>

			<?php

			$jobtype = $_GET['jobtype'];

			if ($jobtype == "fulltime") {

			?>

				<?php $key="jobtype"; $jobtyped = get_post_meta($post->ID, $key, true); if($jobtyped == "fulltime") { ?>

					<li class="item <?php echo $altec; ?>" <?=$id_old;?>>
						<h3><a href="<?php the_permalink(); ?>"><?php $key="jobtitle"; echo get_post_meta($post->ID, $key, true); ?></a></h3>
						<small>

						<?php $key="companylink"; if(!(get_post_meta($post->ID, $key, true)=="https://" || get_post_meta($post->ID, $key, true)=="")): ?>
						<a target="_blank" href="<?php $key="companylink"; echo get_post_meta($post->ID, $key, true); ?>"><?php $key="company"; echo get_post_meta($post->ID, $key, true); ?></a>
						<?php else: ?>
						<?php $key="company"; echo get_post_meta($post->ID, $key, true); ?>
						<?php endif; ?>

						in <?php $key="location"; echo get_post_meta($post->ID, $key, true); ?> <?php $key="jobtype"; $jobtype = get_post_meta($post->ID, $key, true); if($jobtype == "freelance") { echo "<span class=\"fl\">Freelance</span>"; } else { if($jobtype == "parttime") { echo "<span class=\"pt\">Part Time</span>"; } else { if($jobtype == "fulltime") { echo "<span class=\"ft\">Full Time</span>"; } } } ?> </small>
						<em><strong><?php the_time('M'); ?></strong><?php the_time('j'); ?></em>
						<div class="cl"></div>
					</li>

				<?php } ?>

			<?php } ?>

			<?php 

			$jobtype = $_GET['jobtype'];

			if($jobtype !== "fulltime" && $jobtype !== "parttime" && $jobtype !=="freelance") { 

			?>

					<li class="item <?php echo $altec; ?>" <?=$id_old;?>>
						<h3><a href="<?php the_permalink(); ?>"><?php $key="jobtitle"; echo get_post_meta($post->ID, $key, true); ?></a></h3>
						<small>

						<?php $key="companylink"; if(!(get_post_meta($post->ID, $key, true)=="https://" || get_post_meta($post->ID, $key, true)=="")): ?>
						<a target="_blank" href="<?php $key="companylink"; echo get_post_meta($post->ID, $key, true); ?>"><?php $key="company"; echo get_post_meta($post->ID, $key, true); ?></a>
						<?php else: ?>
						<?php $key="company"; echo get_post_meta($post->ID, $key, true); ?>
						<?php endif; ?>

						in <?php $key="location"; echo get_post_meta($post->ID, $key, true); ?> <?php $key="jobtype"; $jobtype = get_post_meta($post->ID, $key, true); if($jobtype == "freelance") { echo "<span class=\"fl\">Freelance</span>"; } else { if($jobtype == "parttime") { echo "<span class=\"pt\">Part Time</span>"; } else { if($jobtype == "fulltime") { echo "<span class=\"ft\">Full Time</span>"; } } } ?> </small>
						<em><strong><?php the_time('M'); ?></strong><?php the_time('j'); ?></em>
						<div class="cl"></div>
					</li>

			<?php } ?>

			<?php endif; ?>			

			<?php endfor;
			}
			?>

		</ul>

<?php

global $wp_rewrite;
$catlink = $wp_rewrite->get_category_permastruct();
if ( empty( $catlink ) )
{
	$link= get_bloginfo('url')."/?paged=";
}
else
{
	$link= get_bloginfo('url')."/page/";
}

$numrows= count($myposts);
$rowsPerPage= $items_per_page;
$pageNum= ($page_num==0)?1:$page_num;

$maxPage = ceil($numrows/$rowsPerPage); 

$nav = '';
for($page = 1; $page <= $maxPage; $page++)
{
	if ($page == $pageNum)
	{
		$nav .= '<span style="font-size:14px; color:#284A70; font-weight:bold;">' . $page . '</span>';
	}
	else
	{
		$nav .= ' <a class="link" style="font-size:13px;" href="'.$link.$page.(empty( $catlink )?"":"/").'" >'.$page.'</a> ';
	}
} 

if ($pageNum > 1)
{
	$page = $pageNum - 1;
	$prev = ' <a class="link" style="font-size:13px;" href="'.$link.$page.(empty( $catlink )?"":"/").'" >&laquo; previous</a> ';
}
else
{
	$prev  = '&nbsp;';
	$first = '&nbsp;';
} 

if ($pageNum < $maxPage)
{
	$page = $pageNum + 1;
	$next = ' <a class="link" style="font-size:13px;" href="'.$link.$page.(empty( $catlink )?"":"/").'" >next &raquo;</a> ';
}
else
{
	$next = '&nbsp;'; // we're on the last page, don't print next link
	$last = '&nbsp;'; // nor the last page link
} 

if($rowsPerPage< $numrows)
	echo $first . $prev . $nav . $next . $last;
?>

	</div>

	<?php get_sidebar(); ?>
	<?php get_footer(); ?>

    I posted the whole php code , because i really dont understand where the post ends.

    Could you or somebody help me out here ?
    I am almost crying here…. ??

    Thank you all….

    Wow I have to blame drinking to much wine last night on my reposting the guide you already linked. Oh well : P

    You have 2 content sections as you know. Each section of the post begins with

    if (have_posts()){
    while ( have_posts() )
    {
    the_post ();

    and ends with

    <?php endif; ?>
    <?php endfor;
    }
    ?>

    Within these posts your if statements allow you to make that little changes to the look based on full time part time etc.

    <li class=”item <?php echo $altec; ?>” <?=$id_old;?>>

    I do not know what $altec is calling. The variable doesn’t exist on that page.
    <li class=”item <?php echo $odd_or_even; ?>” <?=$id_old;?>>
    <?php $odd_or_even = (‘odd’==$odd_or_even) ? ‘even’ : ‘odd’; ?>

    You will have to find and replace that.
    Try that?

    and make css classes for .even .odd

    PS is your code the same as https://jobs.smashingmagazine.com/ ???

    t-p

    In twenty ten you need to open loop.php

    Find

    <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

    change <?php post_class(); ?> to class=”<?php echo $odd_or_even; ?>
    after that line add

    <?php $odd_or_even = (‘odd’==$odd_or_even) ? ‘even’ : ‘odd’; ?>

    then make your classes in your style sheet .even and .odd

    You will have to find the old post_class style sheet and copy and paste that into your .even and .odd in addition to changing the background. I don’t know what yours is called. In my twenty ten the style is .hentry

    Moderator t-p

    (@t-p)

    thanks chewbears,

    I mod the loop.php.

    and then I added this to my twentyten child style.css

    .hentry .odd{background:#f00;}
    .hentry .even{background:#0f0;}

    But nothing.

    I,am sure making mistake in Moding Style.css
    Can you please tell me where my mistake is?
    Thanks

    Moderator t-p

    (@t-p)

    Hi chewbears,

    your suggestion works in comments (it displays different color in comments).

    But it does not work in posts, does matter what I do.

    any suggestions?

    thank you all. . .

    [url=https://www.strenuapt.com.au/]Personal Training[/url]

    Thread Starter Alvin

    (@akoetsier)

    Hi chewbears!

    Dont mind the link post haha

    But yes , the theme i use is the same as jobs.smashingmagazine.com
    Sorry if thought i had already said this… my bad.

    I am gonna try the code you gave , ill be back!

    Thanks

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘Different post colors’ is closed to new replies.

Tags