12 months ago
Recently I came out with a big framework update to my responsive WordPress themes, but when I went to update Breakout for sale over on Mojo Themes, I decided to take a little extra time and add some new style options.
The Creation of Breakout
For those that don’t know, Breakout was originally a spin-off of Swagger for sale over on ThemeForest. Swagger was honestly my first attempt at trying to design a WordPress theme in that simplistic, minimal style that theme authors like Orman Clark have had so much success with.
Swagger’s proven to be a pretty popular-selling theme, but my personal style that I feel most comfortable with is more of that “glass and gradient” type of look. So, that’s why I decided I couldn’t let all the inner work of Swagger and the structure go to waste — And so I decided transform it into a theme where I incorporate more of my natural design style with more gradients, glass, shadows, etc. This is Breakout.
The Breakout 1.1 Update
When I originally released the theme, there were only a couple of style options, but now that I’ve had some extra time, I decided to add some more and make the theme a little more flexible as far as the design. If you’ve used any my other version 2 themes, you’ll know that the way you structure your content with the Layout Builder is already extremely flexible, as you can essentially build whatever you want in regards to content.
And so in this article, I want to focus on introducing to purely the “Style” options that now come with Breakout 1.1+ and give you some cool examples and options choices that I thought would help get you started.
One of the major style options added is the ability to pick a transparent texture to be overlaid over whichever color you select in the header and footer. You can also now select a texture for the main content area, as well.
When selecting textures, I like to try and not be too contrasting. So, in this example, I’m using a the cool “Honey Comb” texture in the header, but since it’s pretty fancy, I keep the textures simple moving down the page.
Now, with an opposite frame of mind from the previous example, in this one, I actually decided to select a fancy texture for all three segment — Header, Main Content, Footer. However, the kicker here is that I used the same texture in all three segments. This created a cool sort-of “glass” effect that looked good with dark colors selected throughout with a hint of red thrown in for the “Accent” color.
In the last example, we went dark, but it came off a little more “artsy” — But what about combining a “corporate” feel but still branching out of the typical light content background? You can accomplish this by toning down the textures used. In other words, use simple, subtle textures instead of fancy ones.
Additionally, red is always a cool choice to go with the dark main content color. Although it may be a bit too bright to have have red both in the header and footer. With the Breakout 1.1+ styles, you can now select a completely separate color for the header and footer, and that’s what I’ve done here.
Let’s expand on the last example, and do another one that’s got that corporate-feel. Dark is always an bold choice to go with in your main content area and light is very commonly used — so what else? A red header will look great with the tan content color as I’ve done in this example.
While we’re on to the tan content color, another color that goes well is green, but let’s spice this one up a little and make it more bright like we stayed away from in the more boring, corporate examples 2-4. In this one, I’ve used green in both the Header and the Footer along with using a fancier texture. Notice now that it’s slightly less corporate, but still looks quite nice and professional.
My eyes got a bit of a workout with the past five examples so let’s take this one back to a simpler time when we were thinking in more of a standard, corporate frame of mind before this article started. I also want to share a couple of my favorites.
While not very original, I can’t deny the fact that blue is one my favorite colors. If you follow much of my work, you’ve probably noticed that I use many shades of blue throughout various theme’s default color options and marketing materials. So, in this example I’ve combined a beautiful shade of blue. In addition, I’ve used my personal favorite transparent texture, which is the “Mosaic” texture. I’ve also kept the design more simplified by keeping the footer light.
Now, if you looked closely, you may have noticed in the previous example, that the light color footer had contrasting dark text to go along with it. This is because in the Header and Footer, when you select a color, you can pick whether you selected what you consider to be a “dark” or a “light” color; this will then style the inner contents of the area accordingly.
The Footer was easy because it’s just some text modifications, but the Header is where I had to put in a little more work with this update. I actually made a whole set of new images for the elements in the Header to have a lightened shadow and what not in order for it to look nicer when you select a light color.
In this example, you can see where I’ve selected a nice all-light feel for the entire site, while still maintaining the theme’s glassy-shadowy style. I used subtle textures, light colors, and added a touch of blue with setting that as the “Accent” color and the link color.
And then to take the last example a little further, we can use a light header for more than just a simplified, less “artsy” look, as well. Here we’ve done a classic contrast flip-flop by creating a light Header with dark everything else for a pretty cool result.
Keeping that sort of contrast flip-flop model in mind from the previous example with a dark inner and lighter outer, let’s fancy it up a bit. In this example, I’ve used a tan color for the Header and Footer, with a fancy “Wood Planks” texture on a dark main content area.
But since I used such a fancy texture for the main content area, and I want to stick with what I originally said back in Example #1 about trying not to use too many contrasting textures, I decided to use my favorite “subtle” texture for the Header and Footer — The “squares” texture.
And speaking of fancy textures like the “Wood Planks”, another one that looks great on a dark background area is the “Vintage” texture. We used this one back in Example #2, but now we’re using it more sparingly. Instead of attracting attention by using the texture in all three segments, I’ve used it just in the main content area and have chosen to use a classic dark-accommodating color, purple, for the Header. Then, to break things up nicely, I’ve simply used an almost black color in the footer with no texture.
So I hope you all like the new style options and the free update. And if this is the first time you’re hearing about this theme, it’s available exclusively at Mojo Themes — Breakout Responsive WordPress Theme
For those that are updating the theme, you can get the free update by simply downloading your theme package again from your Mojo downloads page the same as when you originally purchased it. If this is your first time updating your WordPress theme, check out this video — All About Updates — Also, remember that since the Style options have changed so much, the first thing you should do after you update is go to Appearance > Theme Options > Styles and configure these new options.