Build Your Own Business Website header image

CSS

CSS Selectors – The Link Between Boxes and Styles

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next customization that we are going to make in the Thesis 2.3 templates requires CSS. So before we go on to create a 2 column header I want to make sure that you are very clear about the relationship between the CSS rules that we are writing and these boxes. These boxes all have

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

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 Create and Style HTML Boxes in Genesis

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

In this session we demonstrate how to create and style HTML boxes in Genesis using the BYOB Genesis Child Theme Editor plugin. We show where to write CSS and demonstrate how to style the child theme’s appearance and make it responsive. Video Transcript Member: I'll get right to my question which is in the forums

Introduction to HTML for WordPress & Genesis 2 Users – Part 15 – Using Structural CSS to Style Structural HTML Elements

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

So we’ve created these testimonial boxes using structural HTML and we’ve discuss some issues that arose like clearing floats. But now we need to work on styling these testimonial boxes with CSS. I'm going to get rid of that blue text in the first place by deleting this .entry-content color:blue. Save that custom CSS. Then

Introduction to HTML for WordPress & Genesis 2 Users – Part 12 – Styling Lists in Genesis 2 Using CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to - ,

Now that you’ve got the basics of how to style text and fonts with CSS, the next thing we're going to do is work on styling lists in Genesis 2. We're going to go over to w3schools and then to Learn CSS. Scroll down and look for lists, styling lists and now we have some

Introduction to HTML for WordPress & Genesis 2 Users – Part 10 – Styling Text with CSS Genesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

We’ve talked about styling text with inline styles and now it’s time to talk about styling text with CSS in WordPress and Genesis 2 as part of this Introduction to HTML for WordPress and Genesis 2 Users seminar. So really, any conversation like this begins with what is CSS? CSS is a language for defining

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 15 – Using Structural CSS to Style Structural HTML Elements

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Now that we’ve discussed what structural HTML is and we’ve created these Testimonial boxes using structural HTML, this gives us something to style and we're going to start off by styling the box itself. We come along here and we'll say .testimonial and we'll say background-color. Let's give it that light grey, #efefef color, background

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 12 – Styling Lists in Thesis 2.1 Using CSS

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to - ,

We’ve had a conversation about styling text with CSS in WordPress so now we’re going to talk about different list styles in WordPress. To begin that we're going to go to w3schools and look at their section on CSS and styling lists. Lists do have a lot of different types of things that can be

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 10 – Styling Texts with CSS in Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

This is the way in which HTML and CSS for WordPress and Thesis should be taught together. First you get a handle on the HTML tags and then you get a handle on the CSS and that's what we're going to do next. So what is CSS? CSS is a language for the defining what

Thesis 2.1 for DIY Website Builders – Part 2 – 4 Main Concepts you Need to Understand to Effectively Use the Thesis 2.1 Skin Editor

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Now that you know how useful some knowledge of code and code concepts are let’s talk about the 4 main concepts you need to learn in order to effectively use the Thesis 2.1 Skin Editor. The first concept is, what is a skin? A skin is a collection of templates and a set of styles.

How to Create a Custom Opt-in Form with MailChimp & Thesis 2 – Part 3 – Style the MailChimp Submit Button

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Now that we’ve added our background image and submit button to the MailChimp form in Thesis 2, we’re going to move on to styling the submit button. Let's come back over to our images and get this image button. Notice it's 70 pixels by 70 pixels. We'll copy that image, go back to CSS, come

How to Override a Plugin’s CSS in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we discuss how to override a plugin’s CSS in Thesis 2 by increasing the specificity of the CSS selector. We discuss the order in which CSS from WordPress and Plugins are loaded and how when the specificity level is the same, the last rule made in CSS takes precedence. We show how

How to Create a Feature Box with Graphics, Text and an AWeber Form in Thesis 2 – Part 3 – Style the Submit Button

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Now that we’ve added the AWeber Opt-in Form and a background image to the feature box in Thesis 2, we need to style our submit button. Let’s inspect that element. This is input name = submit class = submit. So what I’m going to do is take this opt in and then for the input

How to Troubleshoot Broken Thesis 2 Styles

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we demonstrate how to troubleshoot broken Thesis 2 styles first by looking for syntax failures where the syntax had been written in the Additional CSS area of packages. We also talk about checking the CSS file using Firebug to look for errors or copying that code into a code editor which will

Thesis Theme 2.0 – Order of CSS Priority

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we talk about the order of CSS priority in Thesis Theme 2 between the Options settings and Additional CSS in packages. We discuss why when settings are completed in options and then additional code for those settings is added in Additional CSS, the code in Additional CSS will take priority. Member: Hang

Thesis 2.0 – The Difference Between Skin CSS and Custom CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we discuss the difference between skin CSS and custom CSS in Thesis 2.0 and what happens before the CSS is compiled. And we discuss the order in which these sections of the skin editor are written to the CSS file. What’s the difference between skin css and custom css? Skin css is