Custom Styling for Our Post Formats On Our Child Theme

This is pretty much the last step in getting our child theme set up. As in the basic styling. Before I start to dig in and see what I can accomplish, I had to take care of the basic styling. So we have a pretty complete child theme, and we’ve gained some real useful knowledge on how things work. Let’s just take a look at one last thing, let’s get those post formats styled. We recently learned how to add in all of the post formats to our child theme if we wanted to, but now we want to make them really stand out.

There are a variety of things that can be done using the post formats. You can make them display differently, act differently, include a variety of content by default, etc. But for this tutorial we are just going to start with the basics. How to get them to stand out a bit. Just some simple css.

Each post format gets a class assigned to it when a post is made. The class is structured like format-link, format-aside, etc. So we can target each of these to add in some styling. Let’s just take one of the formats built in to Twenty Ten, asides. If we look through our stylesheet we can find:

/* =Asides
-------------------------------------------------------------- */

.home #content .format-aside p,
.home #content .category-asides p {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 10px;
	margin-top: 0;
}
.home .hentry.format-aside,
.home .hentry.category-asides {
	padding: 0;
}
.home #content .format-aside .entry-content,
.home #content .category-asides .entry-content {
	padding-top: 0;
}

And this gives us our basic layout. But we could do so much more here. I’m going to dive into our CSS3 bag of tricks and apply a few changes. Let’s take a look at what I came up with:

/* =Asides
-------------------------------------------------------------- */

.home #content .format-aside p,
.home #content .category-asides p {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 10px;
	margin-top: 0;
}
.home .hentry.format-aside,
.home .hentry.category-asides {
	padding: 0;
}
.home #content .format-aside .entry-content,
.home #content .category-asides .entry-content {
	padding-top: 0;
}
.home #content .format-aside {
	background: #999;
	background: rgba(158, 151, 134, 0.2);
	border: 4px double #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	padding: 10px;
	-webkit-box-shadow:inset 5px 5px 8px rgba(36, 17, 17, 0.5), inset -5px -5px 8px rgba(209, 101, 101, 0.5);
	-moz-box-shadow:inset 5px 5px 8px rgba(36, 17, 17, 0.5), inset -5px -5px 8px rgba(209, 101, 101, 0.5);
	box-shadow:inset 5px 5px 8px rgba(36, 17, 17, 0.5), inset -5px -5px 8px rgba(209, 101, 101, 0.5);
}
.home #content .format-aside .entry-utility {
	color: rgba(64, 31, 31, 0.6);
	color: #401f1f;
}
.home #content .format-aside .entry-utility a {
	color: rgba(87, 45, 38, 0.6);
	color: #572d26;
}

So you can see looking through what I added that I put the asides format into a box, gave the box some rounded corners, a background with a bit of alpha transparency, and even an inner shadow. I was trying to make the whole box look inset a little in the page. Did it work? Meh, I dunno. I’m really just playing with colours here to give examples. We also gave the box a bit of padding to keep the edges from being right up on the text. And finally we went on to colour the text and links.

You can see how simple this was really. It’s easy to make all your formats stand out. Now when you start trying to make things stand out, and use a bit of colour to do it, it can get overwhelming. What colours to use, what works, what doesn’t, etc. You really need to give this some thought. Let’s face it, some colours look terrible together, and it can get tacky or garish real quick. So if you don’t already know about kuler from adobe, check it out. It’s a sweet tool to help you build up colour schemes. It’ll help you match things up, find complimentary colours and many other things. It’ll even let you build a scheme from an image. I often take a screenshot of a site, and feed that into kuler for suggestions. Finally, you will notice that for using rgba colours in CSS3, well, you need the rgba value. Web designers are used to working with hex colour values. Kuler will let you enter in one value, and you can easily find the associated value you need.

So that’s it for making your formats stand out. You can simply add in the various other formats as you go to add colours or any other css you want to make them stand out. I use various formats on my blog all the time, you can check that out to see some of the things I did in making my formats look completely different. Some of those changes go beyond css though, and I use full templates to control the layout and action of my formats. That is a bit beyond the scope of this article, but we will look at that in the future.

2 Replies to “Custom Styling for Our Post Formats On Our Child Theme”

  1. Any idea on how i could make the content area on my homepage have rounded corners?

    I got it to work on my wrapper and navbar but hav not been able to get it to work on my content table. I actually did get it to work at one point but not in IE and when this happened the rounded corners in the nav bar broke in IE.

    thanks for any input

    1. I’ll be honest, I don’t use the technique that you do, so I wouldn’t really know how to fix it. I stick to CSS3 techniques now. Simply applying rounded corners by css. I think only the newest version of IE supports it. But I don’t like using any of the old tricks to try to make rounded corners. I have rounded corners using border-radius for browsers that support it, and for those that don’t, my site appears with square corners. I’m cool with that.

Leave a Reply