Some Cool Styling Suggestions for the Breakout 1.1 Update

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.

The Examples

Example #1

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.

View Selected Theme Options

Example #2

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.

View Selected Theme Options

Example #3

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.

View Selected Theme Options

Example #4

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.

View Selected Theme Options

Example #5

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.

View Selected Theme Options

Example #6

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.

View Selected Theme Options

Example #7

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.

View Selected Theme Options

Example #8

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.

View Selected Theme Options

Example #9

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.

View Selected Theme Options

Example #10

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.

View Selected Theme Options


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.

9 comments on “Some Cool Styling Suggestions for the Breakout 1.1 Update

  1. Hi Jason. I love Swagger and will probably buy Breakout, too. Is there any reason you haven’t released Breakout on ThemeForest? I don’t mind purchasing from Mojo…just curious. Thanks.

    • I’ve met the people at Mojo and have gotten to know them a bit. I just support what they’re doing and wanted to contribute a couple of themes there. Breakout really was a copy of Swagger that I then tweaked so I could contribute to Mojo’s website.

      And although I guess I get a lot of flack that my themes look too similar, I don’t do it on purpose and try not to just copy themes and change them around like I did in this scenario. So, that’s another reason why Breakout isn’t on ThemeForest. I’d feel sort of bad copying a theme, changing it, and then posting it on the same marketplace.

  2. Hi, i’m loving Breakout. Haven’t bought it yet. I wanted to ask something.. I usually end up changing themes a little bit after I buy, just simple stylesheet changes. I really like Breakout but I was looking for a stretched design that would fill the screen more, ive never worked with a responsive theme before. Would you say it would be quite an easy task to change it? I seem to be able to get the look I’m after when changing in firebug but i’m wondering if the reality would be different as it may mess up the repsonsive-ness..

  3. Jason, when I want to install theme blvd extension, it always says “…need framework 2.2…..”, and Breakout seems to be not compatible. So is Breakout out of time ? I like the way you manage WordPress extensions as Theme Blvd and child ones, I wanna work with you, so please just tell me if Breakout not out of date, or tell me any theme I could buy that do the same than Breakout but up to date. I’m currently working on many web site, and I wish to use only Breakout for all, or the one you would suggest me. Thanks to reply me quickly.

  4. I’m thinking of purchasing the Breakout Theme, yet I would like to use WooCommerce with in it. Would that be easy to do within the Theme? I’m still a little new to all of this.

Comments are closed.