Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 41: Adding a hello bar to your Thesis 2 site

Hello

Photo courtesy of Odd.note

Let’s attract some attention.  In the last step we created a custom landing page.  Now we are going to create a call to action to draw visitors to our custom content.  Many sites use the Hello Bar.  For us just starting out trying to save money we’ll create something similar using custom HTML and CSS with Thesis 2.  We bought The Thesis Theme for WordPress for a reason, let’s put all that power to use.

To create our Hello Bar, which we’ll call the “Cool Bar”, we need to create a Thesis 2 HTML box and custom CSS.  From the WordPress Dashboard navigate to the Thesis 2 HTML Home page.

Thesis 2 HTML Home Page

Near the bottom right of the page look for the “Add Boxes” box.

Thesis 2 Add Boxes

Click the “Type of box to add” drop-down and select “Container”.

Thesis 2 Add Container Box

Give your box a name.  I’m using “Cool Bar” instead of Hello Bar.  Click the blue “Add Box” button.

Cool Bar Box

You will now see a white “Cool Bar” box inside the “Add Boxes” box.

Cool Bar Thesis 2 Box

Perform a shift-click and drag the Cool Bar to the Body bar.  We want to place the cool bar in the body, above the “Container”, so that the bar will be at the very top of our site.  Remember that the order of these boxes is the order that they will appear on our site.

Thesis 2 Shift Click Move HTML Box

Click the gear icon on our new Cool Bar container.  Give the container an HTMl class name for targeting with CSS later.

Cool Bar Container

Next create another box.  This time a “Text Box”.  This is where we will place our HTML.

Thesis 2 HTML Text Box

Give this new box a name.  I’m using “Cool Text Box”.  Click the blue “Add Box” button.

Thesis 2 Add Text Box

We now have an HTML text box where we will add our text.

Cool Text Box

Shift-click and drag this box on top of the Cool Bar container we just added to the Body.  It will appear inside of our Cool Bar container.

Thesis 2 Cool Bar Placement

Move your cursor over the blue “Cool Text Box” and click on the gear icon when it appears.  A pop-up will appear where we will enter our HTML.  In this case, I’m adding a link to prompt visitors to click through to the Complete Guide to Thesis 2 for WordPress.

Thesis 2 Cool Bar Text Box

My HTML is below.

<a href='http://thriftyzizel.com/complete-guide-to-thesis-2-theme-for-wordpress/' title='Complete Guide to Thesis 2 for WordPress. Click Here.' alt='Complete Guide to Thesis 2 for WordPress'>Complete Guide to Using Thesis 2 for WordPress. Click Here.</a>

We are all done with our Thesis 2 HTML changes.  Here is what our Cool Bar looks like.

Cool Bar without Thesis 2 Custom CSS

This isn’t going to get the kind of attention we want.  Now we will use custom Thesis 2 CSS to add some flare to our Hello (Cool) Bar.

Navigate to the Thesis 2 CSS page.

Thesis 2 Custom CSS

On the right side of the page click the “Select package to add” drop-down and select “Single Element Styles”.

Thesis 2 CSS Single Element Style Package

A pop-up will open prompting us for Name, Reference, and CSS Selector.

Cool Bar Thesis 2 Single Element Style

After you enter these items, click on “Additional CSS” and enter the CSS to style our Hello Bar.

Thesis 2 Cool Bar Custom CSS

The CSS I’m using is below.

.coolbar {
width: 100%;
text-align:center;
font-size: 13px; 
font-weight: bold;
padding-top:8px; 
padding-bottom:8px; 
background: #EB593C; 
display:block; 
border-bottom-color: #FFFFFF; 
border-bottom-style: solid; 
border-bottom-width: 0px;
}
.coolbar a { 
color:#FFF;
}
.coolbar a:hover { 
color:#333;
}

Click the green “Save” button.  The Cool Bar CSS package has now been added to our list.

Cool Bar Thesis 2 CSS

Our CSS Cool Bar package is now available for use.  We need to add a reference to our package to the list of CSS elements on the left side of the screen.  In the “Skin CSS” tab click next to one of the items listed.  Hit the return key to add a new line.  Add “&coolbar” to the list and click the green “Save CSS” button.

Thesis 2 Skin CSS

Our Cool Bar is now live on our site.  Awesome!

Hello Bar

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 0 comments… add one }

Leave a Comment