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

  • 20 {{ upvoteCount | shortNum }}

    What can I give out for free!

    Hello warriors, I created a sales funnel for my primary product, which is an ebook. I want to give something for free in exchange for a customers email, I just ... [read more]

  • 121 {{ 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]

  • 99 {{ 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]

  • 1 {{ upvoteCount | shortNum }}

    Are These The Elements of List Building ....Expand PLZ.

    Bizopboost in Email Marketing

    Hello everyone According to what I learned so far there are only about 10 different elements to list building. what I suggest is that if you might go more into ... [read more]

  • 4 {{ upvoteCount | shortNum }}

    3 step formula for writing great emails

    The highest paid skill that you will ever learn is learning the art of writing high converting emails. Copywriting is a skill that every marketer should be required to learn ... [read more]