Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons

A few months ago I published separate tutorials on how to add content boxes and how to add color buttons to your website. Apparently that struck a cord because there was a number of people who left comments those posts. With that said, I thought it'd make sense to make this process available here at … [Read more...]

How to Make Your Genesis Website’s Logo Fade (on Hover) Using CSS Transitions

Today we're going to have a little fun. I'm going to show you how you can use CSS transitions and sprites to make the logo in your Genesis theme fade in and out when you hover over it. If you're using a modern browser, go ahead and preview the final product below. This is one of those cool little … [Read more...]

Optimizing Graphics for Apple’s Retina Display Using the CSS Background Size

I've written previously about how to optimize graphics for the Retina Display. In one of the examples I said that you could use a media query to target high resolution devices and then provide a high resolution graphic for just those devices. While it ends up being extra work to produce multiple … [Read more...]

A Short Primer on the Optimization and Design Benefits of Using CSS Sprites

I love golf. There aren't many better feelings in the world than that of stepping up to an elevated tee looking over spectacular scenery and unleashing a perfectly arching shot that lands softly on the green just a few feet away from the pin. I don't get to experience that feeling very often, but I … [Read more...]

How to Design for Apple’s Retina Displays

If you've watched the HBO series Game of Thrones (or have read through the Song of Ice and Fire series), you'll know that one of the major themes throughout the story is the subtle art of politicking. In order to survive you'd better know what your enemy's next move will be -- and be able to defend or … [Read more...]

Innovation: A Free Quote Graphic (PSD)

It's no secret that infographics and Pinterest are a hot topic and that we enjoy providing free web graphics here at StudioPress. So now we're giving you the chance to publish a customized graphic on your own site. The Innovation quote graphic comes as a customizable PSD file and packaged … [Read more...]

A Beginner’s Guide to
Mobile Responsive Design

In his first season as an NFL quarterback, Peyton Manning won three games and threw more interceptions than touchdowns. Manning would prove resilient however, adapting to the pro-style game very quickly. In eleven of the next twelve years the Colts would go on to win at least ten games per season, and make … [Read more...]

How to Use Stylish and Semantically Correct Quote Elements on the Web

In setting out to write this article I was going to present you with a few examples of how you could use the blockquote element in a stylish way, but I discovered something much more sinister going on. Okay not necessarily sinister, but I found out that in many cases the blockquote element is being used … [Read more...]

10 Stunning Mods of 2 Genesis Themes (Lifestyle & Enterprise) for WordPress

One of the most powerful aspects of the Genesis Framework for WordPress is the extensibility of its design. While the "out of the box" design of our child themes offer a very pleasing experience, the opportunities to modify -- or completely recreate them -- are limitless. We are very proud of the … [Read more...]

How Developers are Driving the Business Adoption of WordPress [Infographic]

Pin It Late last summer WordPress conducted a survey asking users how they put WordPress to work. Matt Mullenweg presented some of the findings at his WordCamp San Francisco keynote, with all of the raw data from the survey being made public shortly after. Some interesting facts appeared in the … [Read more...]

2 Indispensable Elements of Excellent Mobile Responsive Design

Responsive web design is all the rage. Everywhere you look -- including StudioPress.com -- designers and developers are touting this site or that theme as responsive. In fact we've got our own responsive design testing tool. Big names like the Boston Globe and Sony have gotten on the responsive web … [Read more...]

15 Delicious Coffee-Inspired Color Palettes

Click image to see hexcode values for each color palette. (view entire gallery) 1. Chocolate Sprinkles 2. Cup of Green 3. Friendship 4. Fuchsia 5. Harmony 6. Mosaic 7. Patience 8. Peaches and Cream 9. Simply Mine 10. Slice 11. Sorbet 12. … [Read more...]