I recently change this blog Genesis child theme from Prose Theme to their Focus Theme. By default, the theme is awesome, you can still further add some design and styling to it just like i did in this blog though am not yet done customizing it as a result of my busy schedule.
Some of the great features of the Focus child theme are: 3 color styles, 6 layout options, custom background, custom header, custom menus, featured images, fixed width, mobile responsive, theme options, threaded comments.
Follow me as i guide us in customizing this pretty and responsive theme.
Adding Header Logo To Focus
The process of adding Logo to the focus theme is very technical and easy.
First, you need to determine the size of the logo you want. am using 360×109 logo in this blog.
Next, goto your theme function.php file. change the width and height size to your Image logo size as shown in the picture below.
The reason for this tweak is for genesis to accept your logo otherwise, you will be asked to crop the image to fit the default specified size.
To upload the logo, click Header under “Appearance”. upload your logo, save and preview.
Tweaking The Theme Homepage Display
The prose theme has a home.php file controlling the look and feel of the homepage only.
Click the Editor link under appearance tab in your WordPress dashboard.
Click the “home.php” at the right hand side as shown in the image below.
- Changing The Number Of Display Post – I Think by default, the Focus theme is set to display Five(5) post or so on the homepage or index view. To increase the number of post, change the value of posts_per_page to your desired post number.
If you wish to display 10 homepage post, then it should be posts_per_page’ => 10. - Adding Feature Post – If i can remember vividly, i think the Focus theme comes with the feature post option disabled. to add a feature post, change the value of ‘features’ to the number of featured post you want.
In this blog i added just one feature post, so it becomes ‘features’ => 1.
Don’t forget, in feature_image_size’ => 0, change “0” to the same number or value you set in features above. Doing this will add a feature Image to the featured post.
Changing Feature Post Except Words Limit
To increase the number of words in the feature post excerpt before the read more or continue link, change the value of feature_content_limit to your choice.
For example, in this blog, my feature post except is 450. which is feature_content_limit’ => 450.
Changing Post Except More Link
By default, the Focus theme has a more link anchor text of [Continue reading]. to change the anchor text to either Read more or any words of your choice, in ‘more’ => __( ‘[Continue reading]’, ‘genesis’ ) just change the “[Continue reading]” in it.
Customizing Focus Theme CSS Design
Am going to run through some basic Genesis design tips to help you customize ans style the Focus theme including the CSS IDs and classes.
I have always advice webmaster not to edit and alter the CSS of not just WordPress themes but any website themes, rather follow CSS alteration best practise.
The use of custom css plugin is highly recommended so as not to break or damage your
theme. All CSS alteration discuss in this tutorial should be done in the plugin.
-
Changing Focus Theme Link Colour
By default, the focus link(active) colour has a Color HEX value of #A3B460.
To change it, use the css code below. Take note of the CSS class and ID.
[css]
/*
Focus theme link color */
a,
a:visited {
color: #000000;
}.menu-primary a, .menu-secondary a, #header .menu a {
color: #000000;
}a {
color: #C61A1A;
}
[/css] -
Changing Post & Page Title Font And Color
By default, this is the CSS rendering the design of post and page titles. just tweak it to your satisfaction.
[css]
/*
Post & Page Title Font And Color */
h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6 {
color: #244C5E;
font-family: ‘Yanone Kaffeesatz’,sans-serif;
font-weight: normal;
line-height: 1.25;
margin: 0 0 10px;
[/css] -
Styling Widget Title
Customizing the widget title is very easy. it is controlled by the widgettitle css class.
[css]
/*
Widget Title styling */
.widgettitle {
//your css rule here
}
[/css] -
Customizing Footer Area
The footer area is controlled by footer-widgets class and ID.
[css]
.footer-widgets, #footer-widgets {
//your css rule here
}
[/css]
You may add a background image to the footer design. just add background: url(“/wp-content/themes/focus/images/bg-foot.png”);. just replace the image path to your own image file path.
Let me stop here because am kind of exhausted. i will continue to add more resources to this post as i have the energy.
If you have the Focus child theme, and you want to customize it to be the website of your dream, am up for hiring, just contact me.
If your blog is running on the Genesis framework, i advice you grab a copy of this awesome theme.