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

Fine Tuning Responsiveness with CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to fine tune responsiveness with CSS to get the text to align center by reducing the padding and reduce the extra space. We show how to set the media query for smart phone devices portrait and landscape modes in Thesis 2.1 Skin Design and also talk about the tools

Troubleshooting Responsive CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we troubleshoot responsive CSS in a Galaxy S5 screen. We show how to remove the class in the Thesis Skin Editor that is hardcoding the size of the widget. Member: You helped me out tremendously on this before what you did is you gave me the CSS code, I put it in

How to Adjust Spacing Between the Excerpt and the Read More Button in Thesis 2.1

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we demonstrate how to adjust spacing between the Excerpt and the Read More button in Thesis 2.1 using custom CSS and show three places to remove the margin. Member: I can't see at all any under CSS or anywhere how to manipulate that space. It's in the bottom of the Excerpt and

Help! My Thesis 2.1 Sidebar Drops to the Bottom of the Page

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to fix a Thesis 2.1 sidebar that drops to the bottom of the page. In Custom CSS, we change the width of the custom container, take the image and make it wider so that it matches. We also get rid of bottom margin and change the bottom border to

How to Add a Hover Style to a Thesis 2.1 Query Box

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we demonstrate how to add styling to the hover state of a Thesis 2.1 query box and add opacity to the image. Member: It's one little off, yeah. Rick: Yeah, got it. Member: Well, you can see there are 8 query boxes here with pages inside of, inside them. Rick: Uhuh. Member:

Help! My Slider is Covering Up My Menu!

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we demonstrate how to move a slider that is covering up the drop down menu by reviewing and changing z-indexes. Rick: Okay. Member: Okay now, this one because I've seen this problem before, I know I've overcome it but I don't seem to be able to do it now. Yeah, okay they

Part 8 – Adjusting Background Images for Mobile Devices

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing I want to do is show you in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is how to use media queries to change up these images for mobile devices. This is really a big image and a mobile device can't see all these edges and doesn't need

How to Center the Nav Menu in Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we demonstrate how to center the nav menu in Thesis 2.1 by displaying it as an inline block and setting the page wrapper to text align center in Custom CSS. We also show how to undo this in media queries to take care of its responsiveness.Member: How would I center the entire…

Part 9 – Understanding and Using Gradients

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The last thing we're going to do in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is to work with gradients. If you're not familiar with a gradient, a gradient is essentially a color range. It starts with one color, ends with another color and then computes the various colors based

Part 7 – Using a Semi-Transparent Background Colors Over a Background Image

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

You’ve now seen how to add multiple background images in the same HTML element on a Thesis 2 skin so the next thing we're going to do is add a page background color to this. First we have to figure out what we want that to be a background of, which element. So we're going

Part 6 – Using Multiple Background Images in the Same HTML Element

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that you’ve seen how to add a fixed background image in a Thesis 2 skin, the next thing we're going to demonstrate is how to put more than one background image in a container. I have a background image that I'm going to layer over the top of this body background image that is

Part 5 – Using a Fixed Background Image in a Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is to add a fixed a background image in a child theme. This is one of those cases where we will switch skins again. Manage Skins and we'll come back to the Classic Responsive and

Part 4 – Add a Color to the Sidebar with a Tiling Image

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Something else that I would like to demonstrate in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is placing a color in the sidebar that goes all the way down to the bottom of the page. As it sits right now there is no background color here in the sidebar. So