Now the last thing I want to do in this lesson on using Custom Fonts in Thesis 2 Skins is to replace the home button here with an icon. We’re going to continue working with Font Awesome icons and I’m sure you can guess it’s really easy based on what we’ve done so far. Let’s
Customizing Thesis 2
So that’ s how to use FontAwesome icons as social media icons. Now what I’m going to do is create a social media box here using FontAwesome. I’m going to do it in those text boxes. Let’s go to pages, and to my Sandbox and I’m going to create some links. I’m going to say,
So the next font related item we’re going to talk about using on a Thesis 2 website is FontAwesome. FontAwesome is essentially a set of icon fonts. I don’t actually remember how many there are. It’s something like 400 different icons that you can use for various things. In this case, we’re going to use
The next thing we’re going to take a look at is using TypeKit fonts with Thesis 2. Now, TypeKit does come with the Adobe Creative cloud subscription but you don’t need a subscription in order to purchase or use it. You can purchase fonts in Adobe TypeKit without having a subscription. That’s what we’re going
You’ve just seen how to add Google fonts to a Thesis 2 Skin and now we’re going to do it in Adobe Edge Fonts. It’s pretty easy to do or very similar in Adobe Edge Fonts. Let’s go to Adobe Edge. I actually think that Adobe Edge fonts are free and you don’t have to
The first hosted font we’re going to look at for this lesson on Customizing Thesis 2 Skins with Custom Fonts is Google.Let’s come back over to the custom CSS. And for the site title, instead of font-family: ‘Aleo’, serif we’ll just say font-family: ‘Permanent Marker’, cursive and save it. Come back over and refresh it
You’ve had an introduction to using Web Fonts for Thesis 2 Skins and now we’re going to start talking about self-hosting fonts. After this we’ll go through how to add specific hosted fonts. What we’re going to do is come over to the site fontsquirrel.com which is a place where you can download free fonts.
Now that we have talked about all the introductory information about font and text properties and using them in Thesis 2, the next thing we’re going to do is talk about web fonts. We’re going to start off essentially with an introduction to web fonts. Remember at the beginning we talked about web-safe fonts? Those
The next thing we’re going to talk about in this Using Custom Fonts in Thesis Skins lesson is the text shadow property in CSS3. The text shadow property is pretty cool and it gets used a lot in Genesis. I use it in the menu in my Carta Skin for Thesis 2 a little bit.
Now that we’ve talked about what text properties are available and how they work, we’re going to move on to talk about how to use those text-properties for positioning elements on a page because they can be used very effectively for that. Something that people are always asking me is how to center a menu
So that was my introduction to font properties for Thesis 2 websites and the next thing we’re going to talk about is css2 text properties. Text properties may seem a little arbitrary, that is the distinction between font and text properties. For example, color could just as easily be for a font as text, as
So that was my introduction to fonts and font stacks for use in Thesis 2 websites. This background information becomes useful in the context of understanding CSS font properties. Let’s go back again to CSS fonts in w3schools.com. Fonts have a number of potential properties. The first property is font family and that’s where the
Good morning everybody and welcome to lesson 2 of Customize Thesis 2.1 Like a Pro. In this lesson we’re going to talk about how to customize Thesis Skins using custom fonts. The first part of the seminar is going to be relatively basic in that I’m going to introduce new folks to basic font CSS.
Thesis 2.1 makes it very 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 methods of using custom web fonts. There are several ways to insert custom web fonts into your design. You
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
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
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
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
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