5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Wordpress Banner Style Post Titles

by drewhowell21
4 replies
  • WEB DESIGN
    • |
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_size( 150, 150 );

        } 
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;
#banner #post #style #titles #wordpress
  • Profile picture of the author sodevious
    Just a heads up - that banner could easily be done in CSS3 - no images would need to be used.
    {{ DiscussionBoard.errors[5484712].message }}
    • Profile picture of the author drewhowell21
      Originally Posted by sodevious View Post

      Just a heads up - that banner could easily be done in CSS3 - no images would need to be used.
      That's funny... I was JUST reading how to do that and about to change the code! Thanks for the heads up, though.
      {{ DiscussionBoard.errors[5484717].message }}
  • Profile picture of the author sodevious
    Ha, cool! Not sure if CSS3 would be friendly with IE, but you should give people the option for either or.
    {{ DiscussionBoard.errors[5484724].message }}
  • Profile picture of the author blogfreakz
    Yes, you better try it in CSS3. It is much easier to use though.
    {{ DiscussionBoard.errors[5487156].message }}

Trending Topics