Build Your Own Business Website header image

Header

Lesson 3 – Part 8 – Create the Structural CSS

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

Applies to -

The next thing we’re going to do is add some structural CSS to this and we’re going to do that by opening up style CSS. We’re actually just going to delete those colors now and we’re going to start off with the header and drop some pre-written code in here. What this does is it

A Conversation About Creating A Full Width Header

In this session a member asks how to create a full width header using one of our plugins. You can do this using the BYOB Thesis Full-Width Backgrounds Plugins. The first thing you need to do is to select the Full-width Framework under Site Layout in Thesis Design Options; this gives you the ability to

How to remove the Thesis Header Image and Navigation Menu from a specific page

In this session we show how can you remove Thesis Header Image, Page Title, Thesis footer and Thesis Sidebars from a specific page using the BYOB Thesis Landing Pages plugin. We also show how to remove Thesis Nav from a specific page using BYOB Thesis WP Menus plugin.

One Hour Website Makeover DJ Sean Denard Part 8 – Adjust Header Background Image Location

This is Part 8 of the One hour website makeover for DJ Sean Denard’s site and in this session we show how to adjust the header background image location using the BYOB Thesis Header Widgets. Okay so now, we go back down to header row 3 settings and our header row 3 background style. We’re

One Hour Website Makeover DJ Sean Denard Part 7 – Styling the Header Text

This is Part 7 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to style the header text using the BYOB Thesis Header Widgets plugin. Now the next thing we need to do is style the bottom part, add the bottom part of the circle to

One Hour Website Makeover DJ Sean Denard Part 6 – Configuring the Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - , ,

This is Part 6 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to configure the header using the BYOB Thesis Header Widgets plugin. So now we’re going to start by configuring the header and so that’s next. Now, the header’s kind of complicated. In particular,

Creating a Full Width Header Using BYOB Thesis Plugins – Part 3 Configure the Nav Menu Plugin

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

This is part 3 of 6 in a series on Creating a Full Width Header Using BYOB Thesis Plugins. In this session we show how to configure the navigation menu using features available in the BYOB Thesis Navigation Menu plugin. A bit and now I definitely want to move this down and I want to

Creating a Full Width Header Using BYOB Thesis Plugins – Part 2 Configure the Header Widgets Plugin

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

This is part 2 of 6 in a series on Creating a Full Width Header Using BYOB Thesis Plugins. In this session we show how to setup the BYOB Thesis Header Widgets Plugin and use it conjunction with the BYOB Thesis Full Width Backgrounds plugin to style the header, body and content area. Okay so

Creating a Full Width Header Using BYOB Thesis Plugins – Part 6 Add Gradient Background to the Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

This is the final part in the 6 part series on Creating a Full Width Header Using BYOB Thesis Plugins. In this session we show how to add background color to the header area using the BYOB Thesis Full Width Backgrounds Plugin. We use colorzilla.com to pick a color and generate the gradient code. We

Creating Full Width Header Using BYOB Thesis Plugins – Part 5 Add Sprite Image to Nav Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

This is part 5 of 6 in a series on Creating a Full Width Header Using BYOB Thesis Plugins. In this session we show how to add an image sprite to the navigation menu using a set of images created in Photoshop. These images represent the current state, hover state, and link states in the

Creating a Full Width Header Using BYOB Thesis Plugins Part 4 – Add the Logo to the Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

This is part 4 of 6 in a series on Creating a Full Width Header Using BYOB Thesis Plugins. In this session we show how to add a clickable logo to the header by adding the HTML code to a text widget that is created through the installation of the BYOB Thesis Header Widgets plugin.

How to Use CSS3 Gradients as a Header Background in Thesis

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - , ,

In this session we show how to create a header background using the Ultimate CSS3 Gradient Generator at colorzilla.com and then configure the header by adding some more CSS to style it. This shows how you can create and style your header without using an image and this applies to footers as well. Okay so

Is it Possible to Add an Alt Tag to a Header Image Using the Thesis Header Image Function?

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

This member asks if it is possible to add an Alt tag to the header image when it is added using the Thesis Header Image function.  I explain that the Thesis header image is actually a background image and thus it doesn’t take an alt tag.  However I also show another method of adding a

Adding the Dynamic Content Gallery to the Thesis Header

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

This topic was raised by a member who would like to create a Dynamic Content Gallery and add it to her header. We discuss how large the images in the banner should be. Take a brief detour to view the Firefox add-on called “MeasureIt”. Next we look at the configuration of the Dynamic Content Gallery.

How to Create a Header with a Logo Image Beside the Navigation Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

A member asked for help in creating a header with a logo image on the left and the navigation menu on the right. This requires us to have 3 images, a main background image, a logo image and “current” menu condition image. We demonstrate how to add a background image for the header and then

Phone Number in Thesis Header

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In order to have a phone number available for calling from a smart phone the number needs to be inserted as a text link rather than as part of a graphic image.  The example sites asked about here have the phone number as part of the header graphic which was inserted using open hook.  We

How to Display Different Header Images on Different Pages

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

This member wants to add different header images on different pages of his Thesis based WordPress Website. He wants certain images displayed based on the context or parent of the page. I discuss the conditional statement and point him to the videos that teach how to do this. [S3VIDEO file='public/liveanswers/LA12-06-10b-different-header-images-different-pages.mp4' bgimage='https://www.byobwebsite.com/wp-content/uploads/2010/12/LA12-06-10b-header.jpg' displaymode='overlay'] By the way,

Lesson 9 – Part 3 – Add Background Image to Header Area

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

Welcome back to Part 3 of Lesson 9 of the Build Your Own E-Commerce Website tutorial series. In the third part of this lesson we are going to add a background image to our full-width framework header area. Before we do that I want to take a look at what the final product will be.

Lesson 9 – Part 4 – Add Foreground Image to Thesis Header

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Welcome back to Part 4 of Lesson 9 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to add an image to the header or sometimes I refer to it as the foreground image to the header of the header area of the Thesis full-width framework.