Skip Main Navigation

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Rounded to a higher level: Part 3

Horizontal Glider Magic with Curved corners and Tabbed Triggers

Now that you know how to edit, create, and export images, let's use those skills to create a tabbed HGM widget. In the process, you'll learn how to leverage the power of CSS to create special style rules that affect one specific HGM widget on one specific page.

Open the Tabs workpage

Open workpage-tabs.htm in Dreamweaver. The page looks like this:

We've made the images for you so that you can create your widget quickly. Afterwards, we will show you how the images were made and how you can edit them.

Create the HGM widget

Switch to Code View (or Split View) and locate the placeholder text HGM INSERTION POINT.

<div id="wrapper">
HGM Insertion Point
<div id="footer">
<div id="footer-content">Footer</div>
</div>
</div>

Select the placeholder text and press your delete (del) key, leaving your cursor on the now-blank line between the wrapper DIV and the footer DIV:

<div id="wrapper">
cursor stays on this blank line
<div id="footer">
<div id="footer-content">Footer</div>
</div>
</div>

Click the HGM icon on the common section of your Insert Bar (or Insert Panel) or choose Insert > Studio VII > Horizontal Glider Magic by PVII. The HGM interface will open.

In the Control Position Options section, uncheck Show for Prev/Next. Then set Trigger Links to Above Panel.

Select Trigger Text in the Panels area and then click the Browse button (highlighted in blue below).

Browse the img folder inside the assets folder and select tabs_intro.png

Click OK. The default Trigger Text is relaced by the image name and the trigger image is listed in the Trigger Image box, along with its path.

In the Control Position Options section make the following selections:

Prev/Next:Show: Deselected (un-checked)

Trigger Links: Above Panel

add Alt Text for accessibility.

Leave the general Options set to their default values.

For Image Swap Options, select Normal, Over and Open Images.

Deselect (uncheck) Rollover Open State and Rollover Mark State.

For Style Theme select 05-Image Based.

Click the Add button to create a second trigger and browse to, and select, tabs_what.png as the image. Repeat to create 2 additional triggers and assign to them the tabs_why.png and tabs_contact.png images.

Important: Make sure to set Trigger Links to Above Panel.

Click OK.

Preview in a browser:

The Page CSS

The page CSS file, p7HGM_Tabs.css, contains the following rules that affect your widget:

#wrapper {
width: 400px;
margin: 0 auto;
}

Sets width and centers the widget on the page. The width corresponds to the width of the curved background images.

 

#footer {
background-image: url(img/tabs_box_bottom.png);
background-repeat: no-repeat;
background-position: left bottom;
padding-bottom: 16px;
}

The outer footer container is assigned the bottom box curve.


#footer-content {
background-image: url(img/tabs_footer_middle.png);
background-repeat: repeat-y;
padding: 10px 10px 0px 30px;
font-size: 10px;
text-transform: uppercase;
color: #FFF;
letter-spacing: 0.3em;
}

The inner footer container carries a repeating background image that draws the 10px left and right borders and a background color that automatically adjust to any height.

The p7HGM_Tabs.css file also contains special HGM exception rules

the Special HGM Exception CSS

When you create an HGM widget, the system assigns a distinct ID to the root HGM DIV, which looks like this:

<div id="p7HGM_1" class="p7HGM05">

The ID always begins with "p7HGM" and is followed by an underscore and a number "_1". The number corresponds to the specific widget with respect to how many other widgets are on the same page. The class assignment corresponds to the style theme you have chose. In this case, 05 - Image Based. For instance, if you create 1 HGM widget using the Image-Based theme, the root DIV loooks like this:

<div id="p7HGM_1" class="p7HGM05">

If you later create a second widget on the same page, using the same style theme, the root DIV will look like this:

<div id="p7HGM_2" class="p7HGM05">

The ID that HGM assigns gives you a powerful hook with which to create special CSS rules that affect a specific widget on a given page. Consider the case of this tutorial. You now have 2 pages that each contain an HGM widget and each widget is linked to the same HGM style sheet. How do we edit the CSS to create a specific style attribute for the widget on one page without affecting the widget on the other page? We use the ID!

The first step is to identify each rule in the image-based style theme CSS that needs to be different for the tabs-workpage page. These are the 5 rules we need to edit:

.p7HGM05 .p7HGM_viewport_wrapper
.p7HGM05 .p7HGM_panel_conten
.p7HGM05 .p7HGMtrig
.p7HGM05 .p7HGMtrig li

We'll also need to add a new rule to target an element that is not accounted for in the default HGM CSS:

.p7HGM05 .p7HGM_viewport

To ensure that we maintain the itegrity of our existing HGM widget (on workpage.htm), we need to make copies of the 5 rules as they exist in the p7hgm05.css file and paste them into the page style sheet that is linked to tabs-workpage.htm—and that is the p7HGM_Tabs.css file.

We've already done this for you so let's just look at each rule:

We added a CSS comment above the section that contains the 5 rules to make them easier to identify:

/*HGM Exception Rules for TABBED Glider*/

Notice that we've appended the rule's name with #p7HGM_1, with no spaces between it and the original name. This tell the browser to look for elements with an ID equal to p7HGM_1 and a class equal to p7HGM05. Both conditions must be true.

 

#p7HGM_1.p7HGM05 .p7HGM_viewport {
margin: 0 10px;
}

The background image used for the viewport_wrapper has a 10px border on the left and right sides. This new rule sets 10px of left and right margin on the viewport enabling the gliding content to be constrained to the inside of the border, rather than the outside.

 

#p7HGM_1.p7HGM05 .p7HGM_viewport_wrapper {
background-image: url(img/tabs_box_middle.png);
background-repeat: repeat-y;
background-color: transparent;
}

We assign the tabs_box_middle.png as a background image and set it to tile vertically (repeat-y). We set background-color to transparent to override the yellow background-color assigned in Part 1 of the tutorial.

 

#p7HGM_1.p7HGM05 .p7HGM_panel_content {
padding: 20px;
color: #000;
}

We set padding in the panel content DIV to 20px and color to #000 (black) to override the edits made in Part 1.

 

#p7HGM_1.p7HGM05 .p7HGMtrig {
margin-bottom: 0px;
background-image: url(img/tabs_box_top.png);
background-repeat: no-repeat;
background-position: left bottom;
padding-bottom: 16px;
}

We use the Trigger container DIV to assign the top box curve. The image is 16px tall so we position it at the bottom and set botton padding to 16px to ensure the full image will always display no matter how much or little content is in the footer.


#p7HGM_1.p7HGM05 .p7HGMtrig li {
margin-right: 0px;
}

We override the right margin we set in Part 1.

That's it!

Image Editing

Use the same methods you learned in Part 2 of this tutorial to edit the images used in this part, using the following Fireworks file:

HGM-Tabs.png

 

Back to: Part 1 | Part 2