Build Your Own Business Website header image

Customizing Thesis 2

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

How Adobe TypeKit Fonts Work

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we discuss how Adobe TypeKit fonts work. And we talk about how browsers use fonts to display text and rely on fonts that are resident on the computer. We also talk about web safe fonts which are the ones that a web designer can expect that every computer is going to have

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 Have Parallax Sections in Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we discuss how to have parallax sections in Thesis 2.1 and assembling groups of parallax boxes. We also introduce the new course, Professional Thesis 2.1 Skin Development, that is currently being taught which includes how to use these boxes in different skins. How to Have Parallax Sections in Thesis 2.1 Member: I've

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 Custom Fonts to Custom Thesis 2.1 Skins

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to use the Thesis Font API to add a Google Font to the skin so that it shows up in the typical font drop down lists. Member: I have another question. Rick: Uhuh. Member: So I want to use font kit from adobe and, Rick: And which font? Typekit

How to Add the Viewport Meta Tag to a Thesis 2.1 Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we demonstrate how to add the viewport meta tag to a Thesis 2.1 skin by placing the code inside the skin.php. There are some devices that will try to scale the whole page to fit instead of making it change in size to fit the window so we demonstrate how to set

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:

How to Use Adobe Edge Fonts with Thesis 2.1

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

In this session we demonstrate how to use Adobe Edge Fonts with Thesis 2.1 and show where to place the scripts and the font family. We have prepared a seminar for this in Customize Thesis Like a Pro lesson number 2 where we go through the process of adding adobe fonts and talk about the

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

How to Convert Code from Thesis Open Hook to a Custom Function

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to convert code from Thesis Open Hook to a custom function by creating a function for the nav menu add_action thesis_hook_after_header that will take the code as a function and place that code in exactly the same spot as it was. We also show how to clean the code

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…

Create Overlapping Images in Thesis 2 with Absolute Positioning

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we demonstrate how to create overlapping images in Thesis 2 with Absolute positioning using custom CSS to position the images where we want them. We explain what relative and absolute positioning are. We also show how to give the menu a height to position the images and talk about creating a background

How to Add a Slider to the Background of the Header in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to add a slider to the background of the header in Thesis 2 using relative and absolute positioning to position something over the top of the slider. We also show how to add a body class that will target the front page only with the CSS to not have

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

How to Specify a Custom Background Color for a Single Page in Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we demonstrate how to specify a custom background color for a single page in Thesis 2 using a custom body class. We also show how to make the CSS more specific to only cover the content area of the page. We talk about using a different selector for the Thesis Classic Skin