Build Your Own Business Website header image

BYOB Thesis Style Manager – BYOB Responsive Columns

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

I have two tools that I’m on the verge of releasing. One of them is a Responsive Columns box and the other one is a Style Manager box. I’ll show you a site that has used these tools.

This site here is a Thesis Classic site but it doesn’t look anything like a Thesis Classic site. That’s because all the styles that you see here were created using this Style Manager. And the three column layout that you see here above a single column layout was built using the Responsive Columns box including this four column section over the one column section.

This is all built without having to use any CSS and makes Thesis Classic, really, any Thesis skin a little bit more flexible. I’ll be releasing those soon and you’ll be able to use these to customize your site if you don’t want to write custom CSS.

Let me show you what it looks like here on this site. On the Thesis menu I created a menu item called “Additional Styles”. You can change all kind of different things about the menu, submenu, background colors, hover colors. There’s just a ton of stuff that you can change.

Since this is using the Thesis Classic I’ve also taken virtually every element in Thesis Classic that you can style and I’ve added additional styles to them. For example, in sidebar headings it’s not just the font family, font size and font color. Now it’s also font weight, font style, font variant, text transform, text align, letter spacing, line height, margin, etc.

So you’ve got a much wider range of styles that can be applied in the same way as all the rest of Skin Design styles are applied. As I said those will be available soon.

Let’s come over and look at the Skin Editor. This site here was the pilot project that I used to create these tools. Let’s look at the Front Page in the Skin Editor. You can see we’ve got this columns section and you can see it’s actually a single column.

Then I’ve got this featured area which was built using the BYOB Responsive Columns. You can choose how many columns you want and what kind of spacing you want for the columns. You can decide what parts of these you want to be first on a mobile device. And then you can specify your own padding and that sort of thing if you want.

Then when you do that it just creates these columns for you that you can then put content in. That gives a lot of flexibility to a DIYer who wants to work in the Skin Editor but wants to limit the amount of CSS they have to learn. The Responsive Columns box and the Style Manager box will both add a lot of power to a skin for you.

0 Comments… add one
0 comments… add one

Leave a Comment