TechnoTropis Breaking News on Technology

How to Customize the Background With CSS in Genesis

This quick tip will show you how you can customize the background with a few simple changes to your style.css file. Remember, it’s very important that you customize Genesis by using the sample child theme they provide. This will ensure your changes won’t be overridden by a Genesis theme update.

Moving along, we are going to make the default Genesis theme which looks like this:

And with a few simple lines of code turn it into this:

You’ll notice that the bottom image has a gray background, and also nicely showcases a box-shadow effect that is new to CSS3. In order to get this look, simply open up your style.css file and we’ll make a few changes.

The first thing we want to do is add the background color, so find this at the top of of your stylesheet:

body {
	color: #333333;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0 auto 0;
	padding: 0;
	line-height: 20px;
	}

And then add this line to define the background:

background: #999999;

Your stylesheet should now look like this:

body {
	background: #999999;
	color: #333333;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0 auto 0;
	padding: 0;
	line-height: 20px;
	}

Next, we need to modify the #wrap just a bit to accommodate the new background. Find this:

#wrap {
	width: 960px;
	margin: 0 auto 0;
	padding: 0;
	}

And replace it with this:

#wrap {
	background: #FFFFFF;
	width: 960px;
	margin: 15px auto 15px;
	padding: 10px;
	-moz-box-shadow: 0 3px 3px #333333;
	-webkit-box-shadow: 0 3px 3px #333333;
	}

Save your changes, and then upload the new style.css file to your server and you’re done!

How to Create a New Featured Image Size in Genesis

When WordPress 2.9 was released, along with it came support for featured images. Originally termed post thumbnails, this capability made it very easy for folks who developed news and magazine style site to include smaller images on a homepage.

The Genesis theme framework was built to include this feature and there are many instances it can be used – whether it be on a category archive page, an author archive page or a homepage.

Many people know that WordPress provides you a way of defining sized of images that you can place into a post. If you go to Settings > Media page in your dashboard, you will see something like this:

The problem that many of us run into is that we want to display featured images of various sizes (in additional to the default 150px by 150px thumbnail size) throughout our site. Thankfully, the Genesis theme framework has a built-in feature that allows you to define additional featured images sizes.

To create a new featured image size, all you need to do is open up your child theme’s functions.php file, and place this code anywhere after the opening <?php and before the closing ?> tags:

// Add new image sizes
add_image_size('Homepage Thumbnail', 120, 80, TRUE);

So your child theme’s functions.php file might start out looking like this:

<?php
// Start the engine
require_once(TEMPLATEPATH.'/lib/init.php');

// Add new image sizes
add_image_size('Homepage Thumbnail', 120, 80, TRUE);

The code above will generate featured images that are 120px wide by 80px high and label it Homepage Thumbnail. There are a few places that you’ll now be able to use the new featured image size. The first, and most obvious, is for magazine style homepages that have a featured section.

An example of that would be the Lifestyle child theme homepage, and would look like this:

The other location would include any blog, archive, author, blog, category, search, and tag pages. To define the featured image size used here, you can select that in the “Content Archives” section on the Genesis > Theme Settings page in your WordPress dashboard.

An example of that would be the AgentPress child theme category archive page, and would look like this:

Keep in mind that anytime you define an additional featured image size while using the code above, it will show as an option in the dropdown menus when using the Genesis Featured Post widget or the “Content Archives” option on the Theme Settings page.

How to Add Google AdSense To Your Posts in Genesis

With the Genesis theme framework, adding “blocks of code” and placing them into certain areas on a site can easily be done with action hooks. The following tutorial will walk you through how to add Google AdSense to your posts.

Below you will see a screenshot that will show you the result of this tutorial:

Step #1

The first thing you’ll want to do is establish the CSS that you’ll need for the AdSense block. Inside your child theme’s style.css file, add this code:

/***** AdSense Post ********************/

.adsense-post {
    float: right;
    margin: 0 0 10px 10px;
    }

This piece of code will create a container that will float to the right and be wrapped by the post content. If you want the AdSense block to be floated left, simply change the code to this:

/***** AdSense Post ********************/

.adsense-post {
    float: left;
    margin: 0 10px 10px 0;
    }

Step #2

Next, you’ll want to create a file where you will place your AdSense code. You will also need to define the container for the code as well, so you create a file called adsense-post.php and place this into it:

<div class="adsense-post">
    <script type="text/javascript"><!--
    google_ad_client = "pub-4010093622692910";
    /* 250x250, created 7/27/10 */
    google_ad_slot = "3220529950";
    google_ad_width = 250;
    google_ad_height = 250;
    //-->

    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
</div>

Obviously you will replace the sample AdSense code with your own.

Step #3

Now that you have defined the style and created the php file for your AdSense code, you have to establish a way to implement it into your site. Open your child theme’s functions.php file and find this code:

<?php
// Start the engine
require_once(TEMPLATEPATH.'/lib/init.php');

Immediately after that, place the code below:

// Place Google AdSense code into post
add_action('genesis_before_post_content', 'include_adsense_post', 9);
function include_adsense_post() {
    if ( is_single() )
    require(CHILD_DIR.'/adsense-post.php');
}

The code above creates a function that says “if this is a single post, hook the adsense-post.php file just above the post content”. Because you defined your Google AdSense container to float: right, this allows the post to wrap itself around your box.