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.

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

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.

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

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.