post

Fun With The Prose Genesis Child Theme

customize-Focus-Theme

Been toying around with the Genesis Theme last week and over the weekend. Having been so used to the Catalyst Theme where I can make changes and add elements with simple clicks of the mouse, modding the Genesis brings back memories of days when I used to do things with the Thesis Theme. Unlike the super easy Catalyst, lots of custom css codes and custom functions were needed. Frankly, it was lots of fun and I had a much needed exercise for my brains which was getting quite rusty.

Customizing Offline With WampServer First

It is always a good practice to do some warm up before any strenuous exercise, so I did a few rounds with the Prose Genesis Child Theme using WampServer. For those who are new, this script creates a local server within your computer so you can install WordPress locally and do all sorts or modifications to your theme offline. Anyone who wants to learn creating or customizing WordPress Themes should have this installed.

After some getting used to, I ploughed into an abandoned blog of mine which has been left unattended for months. It is a personal blog which I had intentions to do trend blogging but found it too tiring as I had to keep up with the latest trends every other hour. If I am late and the trend has passed by, then writing about it is no more effective and I won’t be getting much traffic.

Deciding On Your Intentions Before Customizing

With my new found zest the the Genesis Theme, I decided to revive the blog. Since I do not want that to be a “pressure” blog, or one that I have to wreck my brains trying to think of what to write, I decided that this will be just a “pleasure” blog. It will only be updated if I have some Interesting Stories to tell, or write, whichever way you want to put it.

With that in mind, I know there will be no monetizations involved, or at least not in the near future. It is very pleasurable if you have no intentions about making money. It relieves you from all the burden of getting links, ranks and traffic which I found is not to good for my health, my hypertension and my gout infected left toe.

Fun With The Prose Genesis Child Theme

Without the intention of making money from the blog, I decided that I will not be needing any sidebars for the blog. So I opted for a Full Width Content layout in the Genesis Theme Settings – General Settings. This is easily achieved, but then there is where the fun starts,

Adjusting The Contents Width.

The Full Width Content Layout in the Genesis comes with the default width which I feel was too wide for my contents. As opposed to the Catalyst Theme where you can easily specify the width of your content wrap and contents, making changes to the widths of these area in the Genesis Theme need to be done manually with Custom CSS.

Working with Custom CSS is very easy of you are using Firefox with the Firebug Add on. You can just inspect the area where you want to make any changes, take note or copy the selector id or class for that area, then paste it in the Custom CSS file and type in the new attributes.

There are 2 things which you must remember to change when adjusting the width of Contents Wrap in a Theme. The Header width and the Footer with must also be changed accordingly to the same width.

Adding Background Color To The Grid Display In Prose Child Theme.

Since the feature of displaying post excerpts in grid columns exist in Genesis 1.5, I decided to add grids to the Prose Child Theme. Going one step ahead, I also decided to add some background gradient to the grid columns.

To do that, you will first have to create a gradient image roughly to the size of 3 px wide and 300 px high. As the grid column can vary in height when displaying our post excerpts, the gradient color should run from top to bottom. The 300px height is because I have given my grids a minimum height of 450px.

If you want the gradient color to run from bottom to top like the copyblogger theme, then you will have to set a fixed height for your grids. Then when creating your image, make the images the same height as your grid.

After creating your background image, upload the image to the images folder in your Prose Child Theme, or whatever child them you are using. Go to your Custom CSS, (assuming you have inserted the CSS codes for the Grid) and within the curly brackets of #content .genesis-grid, insert background: url(images/gridbg.jpg) repeat-x; If you have named your image gridbg, that is, else change that to whatever title you have saved your image in.

Adding The Header Image To The Prose Child Theme

The Genesis Theme uses the default Twenty Ten header uploader for uploading your header image. I find this rather irritating as the image has to be sized to what is specified. If you just upload a logo that is very much smaller what it wants, it will prompt you to crop the image to scale. Maybe there is something I am missing, but that seems to be the case.

So if your logo is say 250 by 150 pixel, you will have to put it in a canvass size stated in the Custom Header uploader before uploading the image. making the background transparent and saving the image as png will solve your problem with the header background color you have chosen.

Of course then, do remember to choose Image logo in your Genesis Theme Settings – General Settings.

The Navigation Bars.

To make it a wee bit different from most of the other themes, I decided not to use the default navigation bars. Instead I placed the navigation links vertically inside the header area.

To do that is easy with the Genesis Theme. Check “Widgetize Right Side Of Header” in Genesis Theme Settings – General Setting. Create a custom menu and add in your home link. Go to Widgets and drag in the Custom Menu widget to the Header Right Widget.

Update: The Prose Child Theme has been upgraded to version 1.5, which is a responsive Theme that adjust dynamically to any screen sizes. It is one of the few Genesis Child Theme that has been upgraded with this function that allows your readers to see your contents using mobile devices like smart-phones and tablets.

The latest version can be downloaded here.

Image: Paul / FreeDigitalPhotos.net



advertisements
Divi WordPress Theme
728x90 V3