The Firebug extension for Mozilla’s Firefox (and Firebug Lite for Chrome) can make short work of finding and changing css elements in your design. It overlays the rendered code of your site in a split screen so you can see and change the HTML/CSS, while being able to instantly view the change.

Installing Firebug

In FireFox, go to the Tools menu, select “Add Ons” and under “Get Add Ons” type Firebug in the search box. Click the Install button. You may need to restart Firefox after installation.

Opening Firebug

There will now be an orange bug on your address bar in the upper right. Clicking it will open up a horizontally split screen. Your web page will continue to show in the upper half, but the lower half will show the HTML of your web page.

On the left side is the HTML of the page. On the right, is the css pulled from any or all style sheets used, depending on the element selected.

Much of the code will be collapsed so you can pick and choose which section to look at, rather than the whole overwhelming page at once.

Hovering over each line will highlight that div in the upper portion of the screen, making it easy to spot each section.

Alternatively, you may right-click on any section of the web page and choose “Inspect element”. Firebug will immediately highlight this section in the bottom pane.

You can feel confident in changing any of the elements to see what happens. None of this will affect your live site – only your view as you are viewing the page. Nothing is saved to the theme files.

Practical Usage

For example, here’s how we can see the effect of changing the background color. Click on the body tag on the right firebug pane.

On the left, the body section of the stylesheet is displayed.

Hovering over the numerical hex color code shows us visually how that color appears. Click on the color code to edit it.

Here I’ve typed in a different hex color code, changing the body background to a shade of grey.

If I click to edit any section in the style sheet, pressing tab will insert a new line in that section, allowing me to add new elements.

Since Firebug does not save changes to your theme, you will need to copy the changes you’ve made in Firebug and paste them into your theme’s style.css in the appropriate spot. Firebug will also tell you exact line number where certain elements appear in the style.css file.

Easy to Implement with the Genesis Framework

If you are running any of your sites on the Genesis Framework, using the icon set for bloggers is quite simple – and only requires a few steps.

Every child theme has a primary and secondary navigation, which are defined in the style.css by #nav and #subnav respectively. For this example, I’m going to use the primary navigation and blue navigation bar.

Upload Navigation Bar Images to Your Server

The first thing you should do is download a fresh copy of the navigation bars. Inside the zip file you’ll see the PSD file for the navigation bars, but also 3 folders – blue, green and black.

Open up the blue folder, and copy all 4 image files you see: nav-blue-hover.png, nav-blue-line.png, nav-blue.png and nav.home. You will now need to upload those images into your child theme’s images folder.

Add CSS to Style Your Navigation Bar

After you’ve uploaded the images, you’ll need to open up your child theme’s style.css file and look for the primary navigation elements. That will begin here:

/* Primary Navigation
------------------------------------------------------------ */

Immediately after that you will see a number of CSS definitions for the #nav and it’s related selectors. You can delete allow of that up until you get to this:

/* Primary Navigation Extras
------------------------------------------------------------ */

And replace it with this:

#nav {
	background: url(images/nav-blue.png);
	clear: both;
	color: #fff;
	margin: 0 auto;
	overflow: hidden;
	text-transform: uppercase;
	width: 960px;
}

#nav ul {
	float: left;
	padding: 0 0 0 10px;
	width: 950px;
}

#nav ul ul {
	padding: 0;
}

#nav li {
	background: url(images/nav-blue-line.png) no-repeat top right;
	float: left;
	list-style-type: none;
	padding: 0 2px 0 0;
}

#nav li.right,
#nav li li {
	background: none;
	padding: 0;
}

#nav li.home a,
#nav li.home a:hover {
	background: url(images/nav-home.png);
	height: 50px;
	padding: 0;
	text-indent: -9999px;
	width: 50px;
}

#nav li li {
	background: none;
	padding: 0;
}

#nav li a {
	color: #fff;
	display: block;
	font-size: 13px;
	padding: 14px 15px;
	position: relative;
	text-decoration: none;
}

#nav li a:hover,
#nav li a:active,
#nav .current_page_item a,
#nav .current-cat a,
#nav .current-menu-item a {
	background: url(images/nav-blue-hover.png);
	color: #fff;
}

#nav li a.sf-with-ul {
	padding-right: 25px;
}

#nav li a .sf-sub-indicator {
	background: url(images/arrow-down.png) no-repeat;
	height: 10px;
	position: absolute;
	right: 10px;
	text-indent: -9999px;
	top: 20px;
	width: 10px;
}

#nav li li a,
#nav li li a:link,
#nav li li a:visited {
	background-color: #1790d1;
	border: 1px solid #0274be;
	border-top-width: 0;
	color: #fff;
	font-size: 12px;
	padding: 5px 10px;
	position: relative;
	text-transform: none;
	width: 138px;
}

#nav li li a:hover,
#nav li li a:active {
	background: none;
	background-color: #0274be;
}

#nav li li a .sf-sub-indicator {
	background: url(images/arrow-right.png) no-repeat;
	top: 10px;
}

#nav li ul {
	height: auto;
	left: -9999px;
	margin: -3px 0 0;
	position: absolute;
	width: 160px;
	z-index: 9999;
}

#nav li ul a {
	width: 140px;
}

#nav li ul ul {
	margin: -33px 0 0 159px;
}

#nav li:hover>ul,
#nav li.sfHover ul {
	left: auto;
}

li:hover ul ul,
li.sfHover ul ul {
	left: -9999px;
}

li:hover,
li.sfHover {
	position: static;
}

Setting up the Home Icon for the Home Link

If you want to use the icon as seen in the example of the Navigation Bars, it’s quite simple. Inside your custom menu screen, open up your Home link box and look for the CSS Classes (optional) option and enter home as the value. You can see what that looks like here:

If you don’t see the CSS Classes (optional) box, you can enable it by opening up the Screen Options menu in the upper right hand corner of your dashboard (next to the Help tab) and clicking on the CSS Classes option.

We’d like to show you not only how to make money with WordPress, but also how to make money with the Genesis Framework. What do you say, are you interested?

Become a Developer and Build Client Sites

It’s no secret that a lot of folks are running on Genesis – in fact, our latest statistics show that well over a quarter million sites have the framework as the foundation of their web presence.

The interest folks have with running their site on Genesis is huge – and the opportunity for you to make money with WordPress by developing and building custom sites for clients is the same. In fact, StudioPress will promote you – as we do with many Genesis Developers.

Develop and Sell Genesis Child Themes

When we launched the Genesis Framework, we knew that there would be a lot interest in working with it. Genesis carries the GNU General Public License v2.0, which means that you have been given the opportunity to extend it by way of child themes.

There are a lot of talented designers and developers who are building and selling child themes. Places such as Themedy and Theme Forest are developing some pretty amazing Genesis child themes.

Identify and Own a Niche with Genesis

Working in the “general” WordPress space can sometimes be very difficult because of competition. A way around that is to identify a niche that WordPress and Genesis can cater to, and go after it.

A great example of this is our friends over at Agent Evolution who dominate in the custom real estate website market. They use a combination of AgentPress and IDX integration to own that space.

Another example is the political arena, where our friends Wes and Lauren at Win With WordPress exclusively build their themes and custom sites with Genesis.

Become an Affiliate and Market Genesis

Affiliate programs have been around for years now, and StudioPress offers 35% commission for all sales generated by affiliate leads. Whether you do child theme reviews or simply place advertising on your site like Chris Brogan and Darren Rowse do, you have the chance to make a lot of money.

Want to be like our top affiliates who earn $xx,xxx? Join our affiliate program now…

Develop and Sell Add-Ons for Genesis

Long time StudioPress friends Ron and Andrea Rennick saw an opportunity at hand when they were contacted by many people regarding the integration of BuddyPress and Genesis. Not too much time passed before they realized the chance to make money was there.

Ron developed the Genesis Connect plugin, which allows users to build a social network for your company, school, sports team or niche community all based on the power and flexibility of the Genesis Framework and WordPress.

Create a Membership Site for Genesis Training

We offer an extensive site for Genesis Development, which includes an array of resources from general tutorials to teaching the basics of building child themes.

While there is an incredible amount of documentation there, there’s also a void for niche specific and detailed information that some users are looking for. This is a great opportunity to carve out your own place in the market, and do something like our friend Kim is doing with her Diving Into Genesis series.

Making Money With WordPress AND Genesis

In the same way Matt Mullenweg encourages people to build business and make money with WordPress, we do the same with Genesis. We love the ecosystem that has been created out of the development of the Genesis Framework, and actively promote (through the StudioPress blog as well as Twitter) people who do great things with it.

There’s plenty of opportunity as we’ve pointed out to establish a viable business by combining the power of WordPress and extensibility of Genesis. We will continue to find ways to expose the talented designers and developers in our community.

And that’s a promise.

Google Comes to the Rescue

Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

And they are free. That’s great news, right?

Well yes it is – especially if you’re running the Genesis Framework on your website or blog. With a few simple steps, you can select any of the Google web fonts and implement them into your design.

How to Implement Google Web Fonts

The first thing you need to do is to identify which font you’d like to use. You can do so by visiting the Google Web Fonts page, and browsing by various criteria.

As soon as you find a font you like, click the “Quick Use” link and you’ll be taken to the font page. Toward the bottom, you’ll see the Developer’s Guide section – click on the link that says “@import” which will display this:

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

Adding to Your Child Theme’s Style Sheet

The first thing you need to do is add the following code to the top of your style sheet. You’ll want to do it immediately after the style sheet header (which has info such as Theme Name, Version, etc.)

/* Import Fonts
------------------------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

Make sure the code is placed above any of the child theme’s CSS definitions.

The last step is defining the font in places you want to use it. For example, if you want to use the Droid Serif font in the navigation, you would add it to your font stack below like you see below:

#nav {
    font-family: 'Droid Serif', serif;
}

It’s that simple – using Google Web Fonts with your Genesis theme is that easy. Just follow the steps mentioned above, and you can add some wonderful typography to your website or blog.

Easy to Implement with the Genesis Framework

If you are running any of your sites on the Genesis Framework, using the icon set for bloggers is quite simple – and only requires a few steps.

First, let’s take a look at where the icon set for bloggers can even be used. There are two sections within the Genesis Framework where you can utilize these fine graphics – the post info section, and the post meta section.

The Post Info Section

Traditionally in all Genesis child themes the post info section can be found underneath the post title. Here’s an example taken from the Minimum child theme:

You’ll see that there is an icon immediately to the left of the date and also the comments. Both of those show up as a result of CSS that is defined in the Minimum child theme’s style.css file. Here’s what that looks like:

.time {
	background: url(images/icon-time.png) no-repeat;
	padding: 2px 0 2px 21px;
}

.post-comments {
	background: url(images/icon-comments.png) no-repeat;
	margin: 0 0 0 10px;
	padding: 2px 0 2px 22px;
}

The Post Meta Section

Similarly in all Genesis child themes the post info section can be found at the bottom of each post, mostly likely directly above the author box. Here’s an example taken from the Minimum child theme:

You’ll see that there is an icon immediately to the left of the categories and also the tags. Both of those show up as a result of CSS that is defined in the Minimum child theme’s style.css file. Here’s what that looks like:

.categories {
	background: url(images/icon-categories.png) no-repeat;
	padding: 2px 0 2px 22px;
}

.tags {
	background: url(images/icon-tags.png) no-repeat;
	margin: 0 0 0 10px;
	padding: 2px 0 2px 20px;
}

Implementing the New Icons

As you can see from the CSS above, each icon is saved as an image – icon-categories.png, icon-comments.png, icon-tags.png and icon-time.png. If you want to replace the icons shown in the examples above with ones from the icon set for bloggers, all you need to do is rename each of the new icons with the file name from the style.css file. (Alternatively, you could change the image file name in the style.css file to match that of the file name of each corresponding icon.)

Upload Files to Your Server

Once you have that sorted, all you need to do is simply upload each of the icon files to the child theme’s images folder on your server. You may need to overwrite the default files from the theme if you chose the method of renaming the icons from our pack to icon-categories.png, icon-comments.png, icon-tags.png and icon-time.png.

If you choose to change the image file name in the style.css file to match that of the file name of each corresponding icon, make sure you upload the style.css file to your child theme’s folder.

If you have have any questions with this, feel free to ask in the comments below.

Here’s an example of the Follow Me on Twitter link at the end of a post:

Step #1
You’ll need to establish a class of CSS for the link. Add this to your theme’s stylesheet:

.follow-me {
	background: url(images/twitter.png) no-repeat left center;
	padding: 2px 0px 2px 20px;
	}

You’ll notice that this CSS defines the link class you will use, and that an image is associated with it which is set as a background image. You’ll need to upload an image to your theme’s images directory on your server in order for it to show. Below is a sample image you can use for your Follow Me on Twitter link – you can right click and save image as.

Step #2
The next thing you will need to do is open up your theme’s index.php file and look for the content call:

Immediately after that, place this code:

Follow Me on Twitter

Make sure you replace “username” in the code above with your own Twitter username. Keep in mind that this tutorial was written for StudioPress “classic” themes – if you want to add a Follow Me on Twitter link to your post, check to see if your theme has a single.php file. If it does, use that file instead of index.php in Step #2.

Over the last year or so, a lot of improvements have been made in that area. The first to make it very easy to optimize your images was Yahoo, with its Smush.it service. Smush.it is included in the tool that most web developers now can’t live without: Firebug. By removing all sorts of meta data and other unneeded info in files, it can make files a lot smaller, I’ve seen it save up to 50% on very large images.

The cool thing about Smush.it is that there’s an API, and a WordPress plugin that uses it, appropriately called WP Smush.it. This plugin automatically “smushes” all your images when you upload them, so it’s a default install on all the sites I work on.

There’s a “one up” though. All the images on your site that are regularly loaded, so especially everything in your theme, should be ran through a tool called PunyPNG. There’s no API for this tool yet, so it’s not as easy to integrate it with WordPress, but it does take it one step further and has reduced some of the imagery on yoast.com with another 10% or so.

Doing this can really make your site load faster as the total size of your page is decreased. So, go install WP Smush.it now, and run all your themes images for PunyPNG.

What? Still here? Go off already, and let us know in the comments how many KB you saved!

Step 1. Download Poedit

To be able to translate a theme, you’ll need a program called Poedit. It’s available for Windows, Mac and Linux. If you’re using Windows or Mac, you can download it here. If you’re on Linux, get it through your distributions package distribution system.

Step 2. Run Poedit

Once you download and run it, it’ll look something like this:

A smart thing to do now is go to Preferences and enter your details, these will be used in all files you ever create with Poedit.

Step 3. Creating a new catalog

You can then go in to the File menu and select “New catalog from POT file…”. This opens an open file dialog. Go to your themes’ “languages” folder and open the .pot file you find there. Poedit will ask you to give some info about Project names, versions, teams, etc. It’s very important to set the Language and Country correctly here. After that, you can press “OK”.

Poedit will now ask you to name your file. This is very important (although easy to fix later). The naming convention for these files is the two letter language code, in lowercase, followed by an underscore, followed by the country code in uppercase. So for my home country, the Netherlands, and language Dutch, it would be nl_NL, for US English it would be en_US and for UK English it would be en_UK.

Step 4. Translate all strings

After doing that, you get the interface that this is all about, in which you can translate the strings. This will look something like this:

The upper left side contains the original strings, the right side the translations. Below that is the currently selected string in the first box, followed by the area where you can type in your new translation. You can now go through all the strings and translate them.

Step 5. Save, upload & enjoy!

Once you’re done, save the file. On saving, Poedit will actually create two files, a .po file and a .mo file. No need to really describe what those are here, but suffice to say the .mo file is the “machine” version of the .po file. Now you can upload both files to your blog, placing them in your themes languages directory, and you’re done. If you’re running a localized WordPress, your template should now be localized as well!

* – Note: The Genesis Theme Framework is internationalized and comes with a .po file. All available Child themes are internationalized, too and since they work with the parent theme-Genesis, the Genesis .po file covers them.

As many of you know, the StudioPress (as well as other premium) themes utilize thumbnail images on the homepage and on other page templates. One of the biggest criticisms of my themes is that they use custom fields to display images, and that folks have to manually create an image for each location on the site. Other themes might use third party code/applications such as Tim Thumb or Viva Thumbs Pro to create their thumbnails.

While these are useful resources, I’ve really tried making it a point (Featured Content Gallery as the exception) to develop my themes without the need to rely on third party applications or other WordPress plugins. You might ask why, and the answer is simple – I don’t want to support them, but more importantly I want to make sure my themes don’t break when an outside application isn’t updated to be compatible with the current version of WordPress.

My Image Uploader Experiment

When I was developing the Streamline theme, I decided to experiment with the use of images throughout the site – and I’ll use this as the example of how to use the WordPress image uploader to create thumbnails.

One of the new features inside the WordPress dashboard is the ability to upload images while creating a post. What many people don’t know, is that in the process you have the ability to specify other sizes of images that the uploader will automatically create. You can specify these image sizes within your dashboard under Settings > Media.

Here’s an example of what I used for the Streamline theme demo site:

You might be asking why this matters. Well, if you plan to use a theme like Streamline, you can simply upload an image to your server, and in the process, the images that you use in the Featured Content Gallery, the thumbnail for the Featured Posts on the homepage, as well as the image inside your post can automatically be created for you. (Which means you DON’T have to manually create images of various sizes for each location.) That’s right, one upload, and all of the necessary images you need for your site are created.

How Exactly Do You Take Advantage of This?

In the process of writing a post, simply choose to upload an image. That’s all you need to do, select the image from your local machine that you want to upload. After uploading the image through the image uploader, here are the additional images that were created for me.

The image that I’ll use for the Featured Content Gallery at 600×400:

The image that I’ll use in the post at 300×200:

The image that I’ll use for the thumbnail on the homepage at 150×150:

How This Looks On My Server

In order to help you understand the process, I’m going to show you what my server looks like. After I uploaded the original image which was saved as er.jpg, you can see the other two that were created for me.

Using This Process in a theme Like Streamline

Now that I’ve explained how to use the image uploader to create thumbnail images, I want to show how you can use this for a theme like Streamline. All you need to do is call the three images into your post as seen below.

Here is a screenshot of how the post looks inside my dashboard:

Summing Things Up

In conclusion, this should alleviate a lot of frustration – it means you don’t have to manually create images for each place on my themes. It also means that you are not relying on third party applications or plugins that aren’t guaranteed to work as WordPress continually releases updates. I really hope that the tutorial makes sense, because to me, it simplifies the process of uploading an image once, and being able to use automatically generated thumbnails for other places throughout your site. If you have any questions, leave a comment below and I’ll reply.