Build Your Own Business Website header image

CSS

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

Part 13 – Create Social Media Links with Font Awesome Icons

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

We are going to continue using Font Awesome icons in this customizing the Genesis Theme series. And up next we're going to create some social media links. We’ll add a widget up here in the child theme for those social media links. First, let's come over to Appearance and Widgets and in our primary sidebar

Part 7 – Using Self Hosting Fonts in a Genesis Child Theme

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

So now that we've had that little introduction to web fonts for this customizing Genesis Child Themes seminar, we're going to start off by looking at self hosting fonts. One great place to get self hosted fonts is Font Squirrel. Font Squirrel has tons and tons of fonts, these are all web fonts and they

Part 11 – Using Fonts from MyFonts.com in a Genesis Child Theme

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

You’ve seen how to add quite a few custom fonts to your Genesis Child Theme but we’re not done yet. Next up we're going to go to myfonts.com. Okay, myfonts.com and we’ll sign in. Myfonts.com essentially sells fonts so you can buy a license to use the fonts. However, the fonts are self-hosted that is

Part 10 – Using TypeKit Fonts in a Genesis Child Theme

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Next up in this seminar on Customizing Genesis Child Themes with Custom Fonts we are going to talk about using Adobe TypeKit. Let's go to Adobe TypeKit now, typekit.com. Adobe TypeKit is a subscription based service. I forgot I have to get out of Chrome, I can't log in to my real account so we're

Part 6 – Introduction to Web Fonts

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’ve gotten through all the introductory bits in this Customizing Genesis Child Themes with Fonts so now we get to talk about web fonts. We’ve spoken already about web safe fonts, that is fonts that you can reliably expect to be available on your viewer's computers. But the kind of fonts that we're going to

Part 9 – Using Adobe Edge Fonts in a Genesis Child Theme

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We just covered how to add Google Fonts as part of this seminar on Customizing Genesis Child Themes with custom fonts. And now I’m going to show you how to use Adobe Edge fonts. So we're going to come over to Adobe Edge and Adobe Edge fonts are free fonts. I think they're free for

Part 8 – Using Google Fonts in a Genesis Child Theme

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

As part of this seminar on Customizing Genesis Child Themes with custom fonts we’re going to begin talking about specific fonts. And we’re going to begin doing that with Google fonts. Google fonts are a whole lot easier than this process I just showed you for self hosting your own fonts. Let's come over to

Part 4 – Using Text Align and Vertical Align for Positioning

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We just covered CSS2 text properties so the next thing I want to talk about is using text-align and vertical-align for positioning in Genesis Child Themes. You can use text-align and vertical-align for positioning things like images and we're going to do that in just a moment. But one of the things people routinely ask

Part 3 – CSS2 Text Properties

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that you have the lowdown on the typical CSS2 font properties for Genesis Child Themes, we'll go on to talking about CSS2 text properties. Text properties have a way of affecting the letters or the text. They are separated from the definition of the font and generally refer to more of a block of

Part 2 – CSS2 Font Properties

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So having discussed font stacks and the basic types of fonts used in Genesis Child Themes, let’s move to CSS which has a whole series of font properties that we are going to look at here. We're going to start off with the font family because that's essentially what we've talked about, right? We have

Part 1 – Introduction to Fonts, Font Families, Font Stacks

Difficulty Level -

Filed Under Topics - , , , , ,

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to this special seminar on customizing Genesis Child Themes with Custom Fonts. This is actually lesson 2 in our Customize Genesis Like a Pro series. Today we are going to start off by looking some of the basic CSS font styling rules. Once we're done with that we’ll go on

Lesson 2 – Customize Genesis Child Themes with Custom Fonts

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Genesis 2 has some tools that make it relatively easy for web designers to incorporate custom fonts in their designs. In this lesson we will look at the various CSS rules that govern the appearance of fonts and then discuss various methods of using custom web fonts. There are several ways to insert custom web

Troubleshooting Errors in Responsiveness in a Member’s Site

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we troubleshoot errors in responsiveness in a member’s site beginning with the images. We talk about why the images are not responsive and how Agility deliberately scales HTML images because they can't be bigger than their container. We change the image from a background image and make it a regular HTML image

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

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So we’ve added a fixed background to this Genesis 2 site and looking at the site you can see that it still needs some work. The content doesn’t look as good as it should on the background and you don't want the images to be sitting there like that. We need something else to happen

Part 6 – Using a Fixed Background Image in a Child Theme

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve worked on adding a tiling background image to add color to the entire sidebar, we are going to add a fixed background to this Eleven40 Pro site. Again, we're going to come over to Plugins and Add New. We're going to upload my plugin, BYOB Genesis Child Theme Editor. In this case,

Part 5 – Add a Color to the Child Theme Sidebar with a Tiling Image

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We just finished using different background colors on different pages and changing the background color of the navigation menu. And the next thing we're going to do with this is to add a background color to the sidebar. But this will be a background color for the sidebar that can go all the way down