Build Your Own Business Website header image

Position Property

How to Create a Custom Opt-in Form with MailChimp & Thesis 2 – Part 4 – Style the Email Field

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

The other thing we need to do is style this the same way this is, right? This is the type=text, this is type=email and we could change that to type=text or we could add the type=email to our style. We have a typical form input here someplace, typical post box, typical text input, this is

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 Create a Feature Box with Graphics, Text and an Aweber Form in Thesis 2 – Part 4 – Arrange the Form Fields

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We’re going to continue to refine the AWeber Opt-in form inside our feature box in this Thesis 2 template. We want to float this thing left. That was af-element. And let’s just copy that. Then we’ll just come back over to the CSS and down in our opt in background, we’re going to go to

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 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 Align Text and Images in a Text Widget

Difficulty Level -

Filed Under Topics - , , , ,

Listed Under Lesson Subjects -

In this session we show how to align text and images in a text widget using CSS rather than HTML. We assign the class alignleft to the image in the text widget and discuss the use of the position property and how to use floats and the pseudoclass after. Member: Great, great. Just one quick

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

Customize Next & Previous Posts Links – Part 7 – Replace Random Post Link Text with an Image

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

This is the 7th in an 8 part series that shows how to customize the Next Post/Previous Post links in Thesis. Now we are going to replace the link text created by the Random Post Link plugin with an image. Finally we’ll add the CSS styles to place the image properly - using absolute and

Understanding the Position Property – Part 3 – z-index value,

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

This is the third in a 3 part seminar on the CSS position property. In this lesson we discuss and demonstrate the use of z-index value. We demonstrate the use of positive and negative values and the relative relationships of the various html elements in the z direction. So now the next thing to look

Understanding the Position Property – Part 2 – position:absolute,

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

This is the second in a 3 part seminar on the CSS position property. In this lesson we discuss and demonstrate the use of position:absolute. We demonstrate the various ways the property is affected by parent HTML elements. We use the top, bottom, left and right properties to specify the position. And then you have