Theme Development

Making a Theme With Bones: Finishing Off


We are using a starter theme to build a new site.

We're going to follow straight on from the previous tutorial in this series. So let's jump into it:

Step 13: Setting Heading and Body Copy Fonts

We will use two fonts from the Google Font library: Arvo and PT Sans. Put this code in the functions.php file. This code will pull in the CSS code which contains the font-face properties.

function wptuts_googlefonts_styles() {
	// Enqueue the font stylesheets like this:
	wp_enqueue_style( 'googlefonts-arvo', '' );
	wp_enqueue_style( 'googlefonts-pt-sans', '' );
add_action( 'wp_enqueue_scripts', 'wptuts_googlefonts_styles' );

Let's set Arvo for headings (base.less) and PT Sans for body copy. We can set the font with font-family. We also define serif and sans-serif which means we will get a default font if the custom font can't be loaded.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
	font-family: 'Arvo', serif;


body {
	font-family: 'PT Sans', sans-serif;

Step 14: H1, footer, header

The font size will be 4em. We have to modify the footer.php to add content and the base.less file for styles. Set the background (with background), bottom border (with border-bottom) and padding (top 10px, 0px for left and right, and 15px for bottom). For the header a noise gradient resized by 10 times will be good, saved as a file (kotkoda_header_bg.gif) and it has to be in the bones/library/images folder. The CSS code goes into the base.less file. The graphics will be repeated horizontally (repeat-x) and start in the top left (0 0).

h1, .h1 {
	font-size: 4em; /*2.5em*/
	line-height: 1.333em;
<p class="attribution">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>.
This page is protected by the <em>XXYY government and army</em>.
Read everything carefully.
You can reach us by mail at <strong>kukori @</strong>.
.footer {
	clear: both;
	background: #f6f6f6;
	border-bottom: 5px solid #FFD400;
	padding: 10px 0 15px;
.header {
	background: url(../images/kotkoda_header_bg.gif) 0 0 repeat-x;

This is how it looks after modifying the footer.

After footer modifications

This is how it looks after adding the graphics.

After footer modifications

Step 15: Favicon and Page Title

We can set a new 16x16 favicon in the header.php file. In the href part we set the path of the icon, get_template_directory_uri will give us the template's main directory URL. For the page title, replace the original code with this one and set the description in the admin interface. This PHP code will echo the blog's description field.

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/library/images/kotkoda_favicon.ico">
<title><?php echo get_bloginfo( 'description', 'display' ); ?></title>

It will look like this after adding the icon.

After adding the favicon

Step 16: Page Menu

The main navigation for pages will get a minimal style as well. With display set to inline the look will be horizontal and the left border will be white (border-left).

.menu {
	border-left: 1px solid @white;
	padding-left: 1em;

.menu ul {
	padding: 1em 0 1em;
	height: 1.5em;

.menu ul li {
	display: inline;
	margin-right: 1em;

The new look of the main menu.

After setting main menu

Step 17: Comment Styles

Comments will get a simpler look. The styles named odd and even should be empty (or commented out) and the li element gets a border-left. The right date text link will be white as well, let's color it to @white. The reply button will get a new style too. We have to set the color, the background color and the opacities (these are deleted).

.commentlist {

	li {
		position: relative;
		clear: both;
		overflow: hidden;
		list-style-type: none;
		margin-bottom: 1.5em;
		padding: 0.7335em 10px;
		border-left: 1px solid @white;
		/* general comment classes */
		.alt {}
		.odd {
			/*background: #eee;*/
		.even {
			/*background: #fefefe;*/

	/* vcard */
	.vcard {
		margin-left: 50px;

		cite.fn {
			font-weight: 700;
			font-style: normal;

			a.url {}


		time {
			float: right;

			a {
				color: @white;

	/* comment reply link */
	.comment-reply-link {
		text-decoration: none;
		float: right;
		background: @white;
		padding: 3px 5px;
		color: #999;
		margin-bottom: 10px;
		font-weight: 700;
		font-size: 0.9em;

		&:focus {
			color: @kotkoda-grey;

The new look.

After comment modification

Step 18: Comment Box and Button

We don't need the border (border: 0) and the background should be @white (base.less). There are a lot of fancy styles we don't need (transition, rounded, gradient) so we have to change borders and backgrounds, and delete roundness and transition. This goes into our mixins.less file.

textarea {
	padding: 3px 6px;
	background: @white; /*#efefef;*/
	border: 0; /*2px solid #cecece;*/
.button, .button:visited {
	/*border: 1px solid darken(@kotkoda-grey, 13%);
	border-top-color: darken(@kotkoda-grey, 7%);
	border-left-color: darken(@kotkoda-grey, 7%);*/
	border: 0;
	padding: 4px 12px;
	color: #999;
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	/*text-shadow: 0 1px rgba(0,0,0, .75);*/
	cursor: pointer;
	margin-bottom: 20px;
	line-height: 21px;
	/*.css-gradient(#999,darken(#999, 5%));*/

	&:hover, &:focus {
		color: @kotkoda-grey;
	  	/*border: 1px solid darken(@kotkoda-grey, 13%);
	  	border-top-color: darken(@kotkoda-grey, 20%);
	 	border-left-color: darken(@kotkoda-grey, 20%);*/
		border: 0;
		/*.css-gradient(darken(#444, 5%),darken(#444, 10%));*/
	&:active {
		/*.css-gradient(darken(@kotkoda-grey, 5%),@kotkoda-grey);*/
		color: @kotkoda-grey;

The look after styling.

After comment box and button modification

Step 19: Info Box

Let's change the info box background to light yellow, which is @alert-yellow (in mixins.less). We don't need a border, so set it to zero.

.info { 
	/*border-color: darken(@alert-blue, 5%); */
	border: 0;
	background: @alert-yellow;

Step 20: Theme Admin Screenshot

The last step is to delete the default screenshot and replace with the Kotkoda one we made.

Final theme screenshot for admin


Here is how the theme looks finished in 600 pixels wide. In the next tutorials we will clean the theme from unnecessary parts then prepare it for submission to ThemeForest.

After comment box and button modification
Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Web Design
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Web Design
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Web Design
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Web Design
    Uber Aesthetics and ResponsivenessGhost rwd retina
    Welcome to the final part of our Ghost theme design tutorial series! In the previous two parts of this series we worked on the first half of styling our theme and laid the groundwork for responsive behavior. This fifth and final part finalizes our styling and completes the task of making our theme fully responsive.Read More…