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', 'http://fonts.googleapis.com/css?family=Arvo' );
	wp_enqueue_style( 'googlefonts-pt-sans', 'http://fonts.googleapis.com/css?family=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 @ kotkoda.com</strong>.
</p>

.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.

This is how it looks after adding the graphics.

Step 15: Favicon and Page Title

We can set a new 16×16 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.

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.

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;

		&:hover,
		&:focus {
			color: @kotkoda-grey;
		}

The new look.

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;
	/*.transition();*/
	/*.rounded(4px);*/
	/*.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.

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.

Finished

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.