Build Your Own Business Website header image

CSS

Change the Responsive Header Behavior for Tablet Devices

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We’ve created the 2 column responsive header in Thesis Classic but this may not come as a surprise to you, it’s doesn’t look that great responsively. Let’s take a look at it in the responsinator in the incognito window. You can see that this is tiny and this has shrunk over. It just doesn’t look

Create a 2 Column Responsive Header in Thesis 2.3

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So we’re going to start off by creating a 2 column responsive header in Thesis 2.3 using the Classic Responsive theme. We’re going to do this on the front page. And we’re going to continue this process of using the Thesis default stuff. We’re not going to replace these defaults we’re going to just add

Understanding the Thesis Classic Responsive Media Queries

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Let’s move on to looking at the Thesis Classic Responsive Media Queries in Thesis 2.3. We are going to take a crack at changing up the header and writing some new media queries rules. That starts really in just Skin CSS. Classic Responsive has 3 different media queries. It has the non media query version

Style the Thesis Classic Responsive Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we are going to do in this Thesis 2.3 for DIY Website Builders seminar is to add styling to the Thesis Classic Responsive menu. Right now that menu spans all the way across. If you hover your mouse over this you can see that spans all the way across. We are going

Add Background Images and Color to Thesis Classic Using Custom CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now I want to add some background images and color to the Thesis Classic Skin. So we’re going to start off in Skin Design with this. I’m going to take this interior backgrounds out of here. And then let’s really, really lighten it up. Save design options. Let’s take a look at the site, flush

Remove Borders From all Pages In Thesis Classic Using Custom CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we are going to do in This Thesis 2.3 for DIY Website Builders seminar is to remove all the borders. We are going to get rid of these borders here on the pages. I have some code snippets for you that work in Thesis Classic Responsive. Come over and click on Resources

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 13 – Using the Thesis Body Class System

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

Applies to - ,

So we've talked about styles that are specifically related to text-like things and styles that are related essentially to global classes. And now we’re going to look at using the Thesis Body Class System.Now, Thesis also has a body class system. The one expression of that you see is this right here where it says

Thesis 2.1 for Web Design Professionals – Part 10 – Create 2 Equal Sized Responsive Columns in Thesis Classic Responsive

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now what we’re going to do is use the media queries to make that 2 column code we created in Thesis 2.1 responsive. Essentially that means we need to create a structure and employ it on the site so that we can see that it’s responsive. So we’re going to come back over here to

Thesis 2.1 for Web Design Professionals – Part 9 – Style the Desktop Menu While Retaining the Responsiveness

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now what I want to do is change this menu in the Thesis Classic Responsive skin. We need to change this menu in such a way that it doesn’t mess up the responsiveness. And the point of this whole exercise is to refresh your memory about making changes inside of the reverse media query. Essentially

Thesis 2.1 for Web Design Professionals – Part 8 – Change the Responsive Header Behavior for Tablet Devices

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next thing I’d like to do is to change up our 2 Column Responsive Header a little bit. I would rather have the tagline up here and a menu up here in these larger views. So rather than the setting that here in our custom css, rather than using W total here, we’re going

Thesis 2.1 for Web Design Professionals – Part 7 – Create a 2 Column Responsive Header in Thesis 2.1

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

So now that we have an understanding of the Thesis Classic Responsive media queries, it’s time for us to actually do something with that. And what we’re going to do is create some responsive columns in our 2.1 skin using those media queries and using the responsive code that is already included in These Classic

Thesis 2.1 for DIY Website Builders – Part 11 – Add Background Images and Color to Thesis Classic Using Custom CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve removed borders from all page in the Thesis Classic Responsive skin, the next thing we're going to do is add some background colors and background images in Thesis 2.1 to make the page stand out. We’re going to start actually with design. And what I want to do is to take this

Thesis 2.1 for DIY Website Builders – Part 10 – Remove Borders from All Pages in Thesis Classic Using Custom CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is remove these borders and we're going to that using custom CSS. Everything we've done so far has been dragged and dropped and borrowing CSS from the Thesis Classic Responsive theme which is what you should do as long as you can. You should go ahead and reuse