Wordpress Banner Style Post Titles

by drewhowell21 4 replies
Hey guys. I was bored I figured I would write a "tutorial" for those of you who don't already know how to get this effect. I'm not exactly sure what it's called exactly. "Banner Style Post Titles" is the best I could come up with. Here is what the outcome looks like.


Code ( BACKUP your index.php or try it out on a custom page template first):
PHP Code:
<!-- This should be inside The Loop -->
            <div class="post">
                
                    <div class="postTitle">
                        <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>
                    </div><!--end posttitle-->
                    <div class="postimg">
                        <?php the_post_thumbnail(); ?>
                    </div><!--end postimg-->
                    <div class="postcontent">
                        <p><?php the_excerpt(); ?></p>
                    </div><!--end post content-->
                    <div class="sep"></div>
                    <div class="meta">
                        <p>Written By: <span class="author"><?php the_author(); ?></span> on <span class="date"><?php the_date(); ?></span></p>
                    </div>
            </div><!--end post-->
CSS ( I plan on cleaning it up a bit ):

Code:
/* The image I made for for a 500px width */
#content {
	width:500px;
	height:100%;
	background:#fff;
	margin-top:35px;
}
.post {
	width:100%;
}
.post {
	position:relative;
	width:500px;
	padding-top:55px;
	margin-bottom:10px;
	color:#666;
}
/* Negative absolute position for "overhang" effect */
.postTitle {
	position:absolute;
	top:5px;
	left:-15px;
	padding-left:15px;
	text-align:center;
	width:515px;
	height:50px;
	background:url('images/postTitle_bg.png');
}

.postTitle h2 {
	margin:0px;
	color:#FFF;
}
/* Style Post Title Link */
.postTitle a:link {
	color:#FFF;
}
.postTitle a:visited {
	color:#FFF;
}
.postTitle a:active {
	color:#FFF;
}
.postTitle a:hover {
	color:#CCC;
}
/* You will need featured images enabled and thumbnails set to 150x150 */
.postimg {
	float:left;
	width:150px;
	height:150px;
	margin:0px 10px 0px 10px;
}
.postcontent {
	height:100%;
}
.postcontent p {
	margin-bottom:0px;
	padding-right:5px;
	padding-right:5px;
	padding-bottom:3px;
}
.sep {
	width:80%;
	border-bottom:1px dotted #ccc;
	margin-left:auto;
	margin-right:auto;
}
.meta {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}
.meta p {
	margin:7px 5px 0px 0px;
	font-size:60%;
	text-align:right;
}
.author {
	color:#1e81cf;
	font-size:100%;
}
.date {
	color:#1e81cf;
	font-size:100%;
}
If you need to add thumbnail support, add this to your functions.php:

PHP Code:
//Add Support for 150x150 featured images        
        
if ( function_exists'add_theme_support' ) ) { 
        
add_theme_support'post-thumbnails' ); 
            
set_post_thumbnail_size150150 );

        } 
Banner Image (Needs to be saved as postTitle_bg.png or changed in the css):


If you want to us the same font as in the picture add this to your header.php:

HTML Code:
 <link href='http://fonts.googleapis.com/css?family=Telex' rel='stylesheet' type='text/css'>
and this in your CSS:

Code:
font-family: 'Telex', sans-serif;
#website design #banner #post #style #titles #wordpress
Avatar of Unregistered
Avatar of Unregistered

Trending Topics

  • 104 {{ upvoteCount | shortNum }}

    Warriors .... Warriors.... what would you like to LEARN?

    Good Morning awesome Warriors... I'm happy to announce that The Warrior Forum is planning to create our first COURSE. Yes... Powered by Warrior Wisdom... yeah!! Made at home. But before ... [read more]

  • 88 {{ upvoteCount | shortNum }}

    How I Sold 985 Copies of an Affiliate Offer in 5 Days (Step by Step)

    When I first started online in 2002, it took me a year to sell 985 copies of anything. These days, I can typically do it in the span of a ... [read more]

  • 8 {{ upvoteCount | shortNum }}

    1 Billion Dollar - Really ???

    SEOptimization@1 in Off Topic

    Hey Warriors: Lets' assume you have "1 Billion Dollar" in your bank account. What would you do with this money ? Curious to know your views Cheers, Steve

  • 4 {{ upvoteCount | shortNum }}

    How to get more Guest post on my Blog?

    Tech Buzz in Off Topic

    I have a Guest Blog and i want to get more guest post on my blog. How to approach user to submit a guest post on my blog.

  • 48 {{ upvoteCount | shortNum }}

    1 Powerful Concept that Grows Your Business

    Connect with people interested in what you have to offer. Mindfully. Versus desperately running from prospect to prospect, or from number to number. This idea sounds simple, and like common ... [read more]