Build Your Own Business Website header image

CSS

Make Your Styles Responsive in the Thesis Classic Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now this shows you something interesting. I think I’d rather show it to you in the responsinator. Let’s go back to the Home page and then over to responsinator. Add the url. Let’s go to an incognito window so we don’t get the admin bar and the like. That’s what the site looks like now.

When to Use display:none

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we discuss when to use display:none and why we don’t recommend using this to solve a problem. When you put hidden content that only Google can see, it will think of it as a spam and you can get penalized. There are however, some legitimate reasons why you would use display:none occasionally

How to Change the Space Between Paragraphs in the Thesis Theme

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to change the spacing between paragraphs in the Thesis Theme. We demonstrate how to do this by giving the paragraph itself a bottom margin. Thesis automatically creates the bottom margin and so if you want to change the space, then you could simply adjust the pixels. Member: The first

What’s the Purpose of a Clearing Div?

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we discuss the purpose of a clearing div as the most reliable way of clearing floats. We use a clearing div to clear floats so that nothing stacks beside it. We also talk about our video on Understanding the Float Property which has detailed information on how clearing divs and float properties

How to Adjust Column Padding and Margins in Thesis

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to adjust column padding and margins in the Thesis theme by creating new dimensions for the width of the elements in CSS to get the desired padding and margin. Rick: Okay and so your problem here is that you want this to move over. Right, this is the default amount

Should I Use em or px When Customizing Thesis?

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we discuss the use of em or px when customizing the Thesis theme as potential size choices and the difference between the two. The more complicated the design is, the less useful ems are because they are calculated differently by the pc and mac. If you have exacting dimensions for things, we

How to Position an Image so that it Spans the Full Width of the Page

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we discuss how to position an image so that it spans the full width of the page. The Thesis theme has padding and margin around elements so we need to override Thesis' padding and margin by using absolute and relative positioning. We also suggested that you watch our seminar videos on the

How to Create a Dropline Style Menu in Thesis Part 4 – Final Adjustments

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

In this session we make final adjustments to the menu style using custom code and our Thesis Nav Menu plugin settings. We center the bullets using the position property, fix the arrow and adjust the margins in the Nav Menu plugin settings. Rick: 25 pixels. And this could be the case where we need to

How to Create a Dropline Style Menu in Thesis Part 3 – Style the Submenu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to create submenu styles using our Nav Menu plugin. Then we switch to custom styling using relative and absolute positioning to complete the design style. We discuss how the CSS position property works and then show how to apply both relative and absolute positioning to the menu to create

How to Create a CSS-Tricks Style Navigation Menu Part 6 – Add the CSS Transition Animation

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to add the CSS transition animation and discuss the way to use the transition properties. We define the property that we are positioning, provide the time involved in creating the transition, define the kind of transition effect and the amount of time before the transition starts. We also discuss

Background Image that Spans Both Header Area and Content Area

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we discuss how to locate a background image so that it spans both the header area and content area. We examine the area in question in Firebug and talk about both where and how the image needs to be positioned. We also talk about how to position the sidebar content in a

How to Align Images Using Absolute Positioning

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to align images using absolute positioning by customizing the image sizes and giving the container a relative position. We also discuss why you shouldn’t use margins and padding when using absolute positioning. Rick: So then in terms of lining up the other things, how did you craete those little

Lesson 5 – Part 3 – Style the Background

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

So we've got our images cut out of the PSD file and we've got our images uploaded to the site. Now we're going to start styling the background. Before we style the background with CSS, I want to just go take a look at the Thesis Design Options on the site. Here we are on

Troubleshooting Background Image Display Issues in Thesis

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we troubleshoot background image display issues in Thesis. We look at the custom.css for the site in Firefox and discover the issue is that the image was being defined as a .jpg but it is actually a .png. Member: Okay great, thank you. Rick: Okay. So you’re having difficulty getting a background

How to have a Fixed Background Image with a Transparent Page in Thesis

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session, a member wants to know how she can have a fixed background image with a transparent page in Thesis. We show how to do this by customizing the body and background area using our BYOB Thesis Full Width Background Options plugin and then making the content area background and #content_area.page transparent. We