So you like the functionality of the Adobe Spry Tabbed Panels, but their drab appearance doesn’t go well with the overall design of your Web site. Meanwhile, you have been hoping that Adobe would eventually give you the ability to change their appearance with little or no CSS experience. Perhaps I have the solution you have been hoping to find and use on your Web site using the Sliding Door and CSS Sprites technique.
I would recommend using Macromedia Dreamweaver 8 or Adobe Dreamweaver CS3 (or better) with the Spry Framework widget already installed. If you don’t have Spry preinstalled in Dreamweaver, go to it’s homepage and download the extension…
http://labs.adobe.com/technologies/spry/home.html
After it is installed, try adding a Spry Tabbed Panels widget on one of your Web pages. The widget will automatically embed code into your HTML as well as create a javascript (SpryTabbedPanels.js) and CSS (SpryTabbedPanels.css) file. Besides the embedded HTML code, javascript and CSS file, you will need to create, or edit, a GIF (spryTabbedPanels.gif) file that would work well with the overall design of your Web site. Place this GIF file in the images folder on the root of your Web site (example: /images/spryTabbedPanels.gif).
You will need to add some additional HTML to your Spry Tabbed Panels unordered list.
Find the following HTML…
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″>Tab 1</li>
<li class=”TabbedPanelsTab” tabindex=”0″>Tab 2</li>
</ul>
Add a hyperlink around both Tab 1 and Tab 2. I would also recommend sequentially numbering the tabindex as illustrated below…
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″><a href=”#Tab1″>Tab 1</a></li>
<li class=”TabbedPanelsTab” tabindex=”1″><a href=”#Tab1″>Tab 2</a></li>
</ul>
Open the SpryTabbedPanels.css and go to the very bottom of the page in Dreamweaver’s code view. Copy and paste the following beneath all of the original CSS…
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */
/* Revision by Craig Malcolm Petrou of cpetrou.com */
.TabbedPanels {
margin: 0 5px 20px 0;
width: 570px;
}
.TabbedPanelsContent {
background-position: bottom;
padding: 9px;
}
.TabbedPanelsContentGroup {
background-color: #FFF;
border: 1px solid #4E4087;
}
.TabbedPanelsTab {
background-color: #FFF;
border: solid 0 #FFF;
font: bold 90% “Trebuchet MS”, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
text-align: center;
height: 30px;
}
.TabbedPanelsTabHover {
background-color: #FFF;
}
.TabbedPanelsTabSelected {
background-color: #FFF;
}
ul.TabbedPanelsTabGroup a {
display: block;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% 0;
padding: 7px 10px 5px 0;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 -31px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% -31px;
}
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */
Examples of sites using this updated Adobe Spry Tabbed Panels code include…
Need help with Adobe Spry Tabbed Panels? Reach out to us and we will help you with your implementation.
Craig Petrou is a Webmaster for Pennsylvania’s largest credit union, PSECU; owner of cpetrou a Harrisburg, Pennsylvania, based advertising and marketing agency focused on web, print and multimedia; and Marketing Director for Tap ‘n Arts Dance Studio.
great advice thanks!
Do you know how I can install sliding doors using html?
For more information on the Sliding Doors of CSS, go to…
http://www.alistapart.com/articles/slidingdoors/
For more information on CSS Sprites, go to…
http://www.alistapart.com/articles/sprites/
for more information on combining Sliding Doors with CSS Sprites, go to…
http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites
I hope this helps… or at least points you in the right direction.
Craig Petrou is a Webmaster for Pennsylvania’s largest credit union, PSECU; owner of cpetrou a Harrisburg, Pennsylvania, based advertising and marketing agency focused on web, print and multimedia; and Marketing Director for Tap ‘n Arts Dance Studio.
nice one – saved me a lot of time. thanks!
this is exactly what I’ve been looking for but I can’t seem to get it to work. What did I do wrong? Please help! Everytime I click a tab in the preview IE won’t show the page.
thanks in advance.
here is the html:
Untitled Document
instructor
events
school news
Teacher-to-Teacher Forum
Teaching Tips/Lesson Plans
Instructor Scholarships and Awards
Instructor Professional Development
Student Scholarship
event 1
event 2
event 3
school news jfdksafjdksaj
aksjfd;asjfdk;sajfkd
jkdfjsa;jfkdsaj;fjdksajfkd;sjakfjdas;
jdka;jfdka;jfkdja;fjdkajsfjdas;jfd;ajf
and the CSS:
@charset “UTF-8”;
/* SpryTabbedPanels.css – Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
*
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
*/
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
*
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
*
* The name of the class (“TabbedPanels”) used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
*/
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
*
* The name of the class (“TabbedPanelsTabGroup”) used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab “button” that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
*
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
*
* The name of the class (“TabbedPanelsTab”) used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
*/
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class “TabbedPanelsTabHover” is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
*/
.TabbedPanelsTabHover {
background-color: #CCC;
}
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class “TabbedPanelsTabSelected” is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
*
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
*/
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
}
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
*/
.TabbedPanelsTab a {
color: black;
text-decoration: none;
}
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
*
* The name of the class (“TabbedPanelsContentGroup”) used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
*/
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
}
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
*
* The name of the class (“TabbedPanelsContent”) used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
*/
.TabbedPanelsContent {
padding: 4px;
}
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class “TabbedPanelsContentVisible” is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
*/
.TabbedPanelsContentVisible {
}
/* Vertical Tabbed Panels
*
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
*
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the “VTabbedPanels” class on the top-level widget
* container element, instead of “TabbedPanels”.
*/
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
*/
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
*/
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
*/
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
*/
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */
/* Revision by Craig Malcolm Petrou of cpetrou.com */
.TabbedPanels {
margin: 0 5px 20px 0;
width: 570px;
}
.TabbedPanelsContent {
background-position: bottom;
padding: 9px;
}
.TabbedPanelsContentGroup {
background-color: #FFF;
border: 1px solid #4E4087;
}
.TabbedPanelsTab {
background-color: #FFF;
border: solid 0 #FFF;
font: bold 90% “Trebuchet MS”, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
text-align: center;
height: 30px;
}
.TabbedPanelsTabHover {
background-color: #FFF;
}
.TabbedPanelsTabSelected {
background-color: #FFF;
}
ul.TabbedPanelsTabGroup a {
display: block;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% 0;
padding: 7px 10px 5px 0;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 -31px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% -31px;
}
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */
Here is a working example…
http://www.allensmemorylane.com/contact/
Here is the basic HTML…
Tab 1
Tab 2
Tab 3
Content for Tab 1.
Content for Tab 2.
Content for Tab 3.
Here is the basic CSS to place after the Spry / Dreamweaver generated CSS…
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */
/* Revision by Craig Malcolm Petrou of cpetrou.com */
.TabbedPanels {
margin: 10px 0 5px 0;
}
.TabbedPanelsTab {
font-weight: bold;
font-size: 100%;
background-color: #FFF;
border: solid 0 #FFF;
}
.TabbedPanelsTabHover {
background-color: #FFF;
}
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #FFF;
position: relative;
}
.TabbedPanelsContentGroup {
background-color: #FFF;
}
ul.TabbedPanelsTabGroup a {
display: block;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/tabbedpanels.gif) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/tabbedpanels.gif) no-repeat 100% 0;
padding: 7px 10px 5px 0;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/tabbedpanels.gif) no-repeat 0 -41px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/tabbedpanels.gif) no-repeat 100% -41px;
}
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */
Let me know if this works for you.
—
Sincerely,
Craig Malcolm Petrou
craig@cpetrou.com
http://www.cpetrou.com
This is for Spry 1.4 from what I can see.
Dreamweaver CS4 has Spry 1.6.1 and it’s not working with this fix.
I could really need a solution for 1.6.1.
Spry 1.6.1 is also available for CS3 as a separate download.