Spry Accordions, Tabbed Panels, and Collapsible Panels: changing colors

I wanted to alert everyone to a great new Community article published by our very own David Powers. The article details the various best practices and methods for changing the colors of Accordion, Tabbed Panels, and Collapsible Panels widgets, including tab backgrounds, borders, and so on.
Here's the article:
http://kb2.adobe.com/community/publishing/504/cpsid_50437.html
Customization questions are pretty frequent in both the Spry and Dreamweaver forums. This new styling guide is sure to answer lots of peoples' questions.
Furthermore, the appearance of such an article is a great example of how Community content can interact and live symbiotically with Adobe Help. We've linked directly to David's piece from our own customization pages for the Spry Accordion, Tabbed Panels, and Collapsible Panels widgets:
Customize the Accordion widget
Customize the Tabbed Panels widget
Customize the Collapsible Panels widget
Thanks a lot to David for hammering out this article.
If you're interested in publishing Community articles of your own, you can download the Community Publishing AIR application and get right to work!

The borders you see, are called outline, its a accesiblity feature of the browsers,
Actually called 'focus' lines :-)
Here's an article about the Bluefocus lines seen in Safari.
http://www.brunobergher.com/blog/2009/01/19/safaris-blue-focus-lines/
Without creating a Spry widget myself right now to test, but I'm sure thata there is a 'focus' rule in the css...
trying the
{outline:none;}
on that rule.

Similar Messages

Spry Tabbed Panels changing bkg on hover?

I'm trying to use a tabbed panel widget for a client but each
tab uses a different background image for each tab. Now it was easy
to use a different background for each tab when they first appear.
Just make a series of classes and assign one of them per each tab.
Fine. Now my problem is I also want different images when you
rollover each tab and I can't figure that out. Right now I get the
same background image on hover no matter which tab I rollover. I
saw here on the forums a way to have a different background for
each selected tab, but I want this for the hover effect instead? Is
it possible without having to play around with the .js file?

Turns out I figured it out myself from the other link. You do
something like this:
.TabbedPanelsTabHover#TabbedPanelsCF {
background-image: url(../images/tabs/1_off.gif);
.TabbedPanelsTabHover#TabbedPanels2 {
background-image: url(../images/tabs/2_off.gif);
.TabbedPanelsTabHover#TabbedPanels3 {
background-image: url(../images/tabs/3_off.gif);
and it works....

Spry Accord. Panel - How to make it closed Please help!

Hi, I would like to ask for your help with the following:
I made a spry accord. panel. I was wondering how to make the first tab being closed when I open up the following page. Somehow when I made it, it created that the first tab stays open all the time. I was wondering if I can make it being closed and only open when I click on the Artisan Collection.
Thank you so much for your help in advance! Agi
Here is the link and you will see the panel on the left handside:
http://mallinfurniture.com/browse_c01.html

Hi,
Thank you so much for the answers. I tried what you recommended. An error message came up saying the following. Also, I noticed something weird in my coding... Maybe that is why it is not working. I copy the coding as well. Thank you so much for taking the time to help me out!!!
Error message: "This document contains JavaScript code for a widget that no longer exists. If you don't remove the code, the browser might display JavaScript errors when loading the page. Would you like Dreamweaver to find all the instances of this code for you?" Ok, No.
When I click on Ok. Nothing happens. What am I doing wrong?
Coding - the end of my page:
<script type="text/javascript">

</script>
<script type="text/javascript">
 </script> </body>
</html>
It looks like I have double of that. When I removed the first accordion, all of my panels were opened...
What could ne wrong?
Thank you! Agi

Spry - Vertical Tabbed Panel

Hey guys,
I looked around this site and I could find an answer to this but I couldn’t, so I thought I would pop this question in.
I want to make a vertical Tabbed Panel but I want it to be split into different categories.
The category heading is not clickable but its sub item are clickable, e.g.
Group A – Not clickable                     | Content Panel
Tab1 – Shows content panel 1            |
Tab2 – Shows content panel 2            |
Group B– Not clickable                      |
Tab3 – Shows content panel 3            |
Tab4 – Shows content panel 4            |
I tried a few ideas but with not luck. If anyone could point me in the right direction I would be very grateful.

What I would do is make small change the JavaScript file
Find Spry.Widget.TabbedPanels.prototype.getTabs and replace it with this function.
Spry.Widget.TabbedPanels.prototype.getTabs = function()
     var tabs = [];
     var tg = this.getTabGroup();
     if (tg)
          tabs = this.getElementChildren(tg);
     for(var i = 0; i < tabs.length; i++){
          if(!tabs[i].className.match('TabbedPanelsTab')){
               tabs.splice(i, 1); // remove because its not a tab
     return tabs;
It checks if your tabbedpanels tab have the class "TabbedPanelsTab" if it does, it will allow it to be tab
So now you can do..
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="tab1" tabindex="0">I do nothing</li>
<li class="TabbedPanelsTab tab2" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab tab3" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab tab4" tabindex="0">Tab 3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Tab 1 Content</div>
<div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
</div>
</div>

Tabbed panel changes not showing up

I'm using Dreamweaver CS5 on a Mac. A couple of years ago I created a website using tabbed panels (http://www.4dtr.com/Communication_Interpersonal.html), Recently, I went to make some modification to the tabs:
1. altered the text in the tab
2. Changed background colour of the tabbed panel)
3. Changed the font size
When I preview the changes in DW they seem to have worked...they also show up when I look in the Adobe Browser Lab. When I upload to the server however only the "altered text" modifications shows up. The change to background color as well as change to font size do not. What am I doing wrong? Help please...

The first thing I notice as I look at your CSS Panel is that many of your styles are existing in the page itself instead of in a linked CSS stylesheet.
Before you proceed, check through the list of styles in the CSS Styles Panel and delete styles that you don't need. Any style that has been completely superseded by another style further down on the list can be deleted. You should be left with only styles you want to be active.
It is simple to move those styles to an external stylesheet; you can do it right in the CSS Panel.
The aim is to have styles associated with the tabbed panels in the "SpryTabbedPanels.css" file, and to have no styles embedded in the page. Then you will make sure those external stylesheets are attached to all the pages that need those style. The on-page, embedded styles are shown in the CSS Panel (with "all" selected as the view) under labels that read: "<style>".
I would also recommend creating a global.css stylesheet for those other styles that also should occur throughout your site. Do File > New > Blank Page > CSS to create the new stylesheet. After you have created this stylesheet, attach it to your page. If you are working with a true template file (file extension is .dwt), I suggest attaching it to that template. With the page in question open, open the CSS Panel and click the chain icon at the bottom of the Panel. Select the newly created stylesheet to link it to the page.
Then select the styles you want to move, and keep holding the mouse down while you drag them under the appropriate stylesheet name in the CSS Styles Panel. You could also select them and right click, choosing 'move CSS styles'.
Here's some links to info about the CSS Styles Panel: http://help.adobe.com/en_US/Dreamweaver/CS5/Using/WSbb8fae38174aec9d-4fb84361126e2b2aaf3-8 000.html
The long and the short of it is: If a style was changed and the style sits on the page, that change is not reflected throughout the site, only on that page. If the style is moved (or created) on an external stylesheet, and the stylesheet is linked to all pages, that change will be reflected throughout the site.
N.B.: If you change the template file, be sure to propagate the changes to all the pages that are based on that template. And don't forget to upload the changed files...
Beth

Spry Accordion - Tabs open and then close after page loads

I am using a Spry Accordion menu driven from a database.
The menu opens up during the page load and then closes.
I'm using SpryAccordion.js 1.6.1
And to open a preset tab, I'm using:
<script type="text/javascript">

</script>
But, all of the tabs open and then close on page load.
My page:   http://www.texashotjobs.us/00C01.aspx
Any fix for this??
Thanks, Ron

Well to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
    if (panel != this.currentPanel)
        this.openPanel(panel);
    else
        this.closePanel();
    if (this.enableKeyboardNavigation)
        this.focus();
//    if (e.preventDefault) e.preventDefault();
//    else e.returnValue = false;
//    if (e.stopPropagation) e.stopPropagation();
//    else e.cancelBubble = true;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions

? How to add Flash text to Spry menu/tabbed panel

Hello,
Is there anyone who knows if it is possible to add flash text
to a tabbedpanel or spry menubar?
can you point me in any direction if possible or not ?
Thanks
-Lars

Hello,
Is there anyone who knows if it is possible to add flash text
to a tabbedpanel or spry menubar?
can you point me in any direction if possible or not ?
Thanks
-Lars

View Panel : Change color of data values in channel table

Hi,
Is there a way wherein I can change the color of a particular data value or data block in a channel in the VIEW panel and can this be done programtically? I am using DIAdem 2010.
Looking forward for your response
Thanks in advance
Priya

Hi Pria,
There is no way to change the color of various cells in a VIEW table. This can be done (for the text color, not the cell background) in a REPORT table with the help of a customer-defined UserCommand. I can send you an example of this if having the display in REPORT would help.
If you had a newer version of DIAdem, you could embed a SUDialog in a VIEW area, and this SUDialog could have an XTable control that would enable you to show this type of display-- not easy, and not with DIAdem 10.2, but at least something to consider.
Brad Turpin
DIAdem Product Support Engineer
National Instruments

Accordion panel-change color to gradient?

Hi,
I have a question regarding designing the accordion tabs.
I made an accordion panel on our website, however I found the tabs boring just to be plain gray. Does anybody know how to make the tabs background to be gradient? Thank you so much for your answer! Agi

Hi
You will have to find where the background-color is defined in your css file and replace this with either the css3/IEFilter for gradients or a background-image.
For css3/IEFilter background code see - http://www.pziecina.com/design/turorial_demos/background_gradients.php.
PZ

All invisibles are rectangles, and can't change color in prefs. Que pasa?

Can anyone help me figure out what's wrong? All invisibles are superscript rectangles and I can't change the invisibles color in Pages General Preferences.
I bought, then installed, the serial number over the '09 trial today. This is the first time I've seen this problem. So I reinstalled iWork. Same problem.
This did not come up in the trial, nor in '08.
Do I need to trash the prefs?
I can't work without invisibles, so this is really annoying.
Thank you, thank you, thank you to anyone who can help me.

I haven't heard about the problem either so we have to start somewhere.
Have you restarted your computer lately?
Start with deleting the com.apple.iwork.pages.plist from the User > Library > Preferences. Pages will create a new plist file. If you have the same problem in Keynotes and Numbers delete the plist files too.
If it doesn't work you can delete the iwork'09 folder in Macintosh HD > Library > Application support. Reinstall iWork and add the serial number again.
Create a new account (System preferences > Accounts) and try Pages in that account. does it work?

I drooped my ipad and the screen changed color

i dropped my daughter Ipad and the color changed...what can i do?

Take it to an Apple Store or Authorized Apple Service Center for diagnosis and appraisal.

IE Layout Bug Spry Tabbed Panels

hello,
I'm wondering if someone can help me.
I'm creating a spry vertical tabbed panel and there seems to
be a layout bug in IE, when the page loads the panel floats to the
top of the page and when I hover over it seems to go to the desired
possition. This does not happend in Firefox.
How can I make the tabs load in their original possition?
Thanks,
genao79

I had the exact same problem in IE 6. The tabs would appear
out of position (up and to the left of the tabbed content) until
the first mouseover, when they would snap into place. There was no
problem with IE 7 or FF.
Try adding a div with style="position: relative;" around your
tabbed panel. In my case, I had to add position: relative to my
container divs to get it to work properly. Seems to work fine now.

Spry Tabbed Panels 2 - Remember Last Tab

Using the Spry UI Tabbed Panels 2, has anyone found a way for the page to remember which tabbed was last viewed?
I can see that I can use the showPanel() method to set the panel, and I can use the getCurrentTabIndex() to retrieve the current tab index, but I am not sure what to do with them next.
I am thinking about maybe setting a cookie with the current tab index, but I don't know what to attach the onclick event to. Should I use a spry selector to add the onclick attribute to the a tag that is automatically generated?
Does anyone else have any clever ideas?
Cheers,
Steve

THANK YOU VERY MUCH GRAMPS!: THIS DID WORK!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spry Accordion</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script>
var Spry; if (!Spry) Spry = {}; if (!Spry.Utils) Spry.Utils = {};
// We need an unload listener so we can store the data when the user leaves the page
// SpryDOMUtils.js only provides us with a load listener so we create this function
Spry.Utils.addUnLoadListener = function(handler /* function */)
    if (typeof window.addEventListener != 'undefined')
        window.addEventListener('unload', handler, false);
    else if (typeof document.addEventListener != 'undefined')
        document.addEventListener('unload', handler, false);
    else if (typeof window.attachEvent != 'undefined')
        window.attachEvent('onunload', handler);
Spry.Utils.Cookie = function(type /* String*/, name /* String */, value /* String or number */, options /* object */){
    var name = name + '=';
    if(type == 'create'){
        // start cookie String creation
        var str = name + value;
        // check if we have options to add
        if(options){
            // convert days and create an expire setting
            if(options.days){
                var date = new Date();
                str += '; expires=' + (date.setTime(date.getTime() + (options.days * 86400000 /* one day 24 hours x 60 min x 60 seconds x 1000 milliseconds */))).toGMTString();
            // possible path settings
            if(options.path){
                str += '; path=' + options.path
            // allow cookies to be set per domain
            if(options.domain){
                str += '; domain=' + options.domain;
        } else {
            // always set the path to /
            str += '; path=/';
        // set the cookie
        document.cookie = str;
    } else if(type == 'read'){
        var c = document.cookie.split(';'),
            str = name,
            i = 0,
            length = c.length;
        // loop through our cookies
        for(; i < length; i++){
            while(c[i].charAt(0) == ' ')
                c[i] = c[i].substring(1,c[i].length);
                if(c[i].indexOf(str) == 0){
                    return c[i].substring(str.length,c[i].length);
        return false;
    } else {
        // remove the cookie, this is done by settings an empty cookie with a negative date
        Spry.Utils.Cookie('create',name,null,{days:-1});
var cookie = Spry.Utils.Cookie('read','panel');
//alert(cookie);
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: cookie ? parseFloat(cookie) : 0});
Spry.Utils.addUnLoadListener(function(){
    Spry.Utils.Cookie('create','panel',TabbedPanels1.getCurrentTabIndex());
</script>
</body>
</html>

Spry Tabbed Panels IE7 on load problem

Im having a problem with my new site. I used the spry
framework tabbed panels to make interactive navigation that loads
all my sites content in the panel similar to how old iframes used
to work. obviously the plus to this is i get to keep all my content
searchable on one page.
the problem im having is on my version of IE7 the very first
time i go the the site it loads every div section at once. so you
have every image and all the text in one window. then i get the
allow blocked content notice up at the top. after about 2 clicks it
goes back to normal and never appears again until i restart.
i checked on my partners comp and it didnt do this. im pretty
sure its an issue with my specific computer but i was hoping
somebody else knew what was going on so i can be sure its not a
problem with my code. i wouldnt be very pleased if half my audience
was having to click these options to fix the problem. let me know.
thank you!
EDIT: Nov 2 2007
i have decided to go with a new look for this site so i have
removed the url bc google indexed it and the offical product will
launch soon.
thanks for reading.
www.xancap.com

Hi Ben,
Ah, now that has helped, its a little bit better, but the performance in IE8 is very poor. Its not worth having the fade in IE8, its way too slow and jerky. I am tempted to go back to the old tabbed panels, see if its any better.
Thanks for your help, you seem to be the new resident expert!
Steve

Validation Errors with Spry tabbed panels with doctype XHTML 1.0 Strict

I'm getting errors while using the W3C Validation Service on my Strict XHTML 1.0 pages that use the SPRY Tabbed Panels. I've read a few places that W3C has no plans on 'fixing or relaxing" the restrictions. Is there any type of work around to the Spry Widget Tab panels code ??? All of my other pages validate nicely... hate to go back to Transitional afterconverting all my other code.
The DreamWeaver File validation also gives me errors but I think that is fed from W3C.
Any help would be appreciated. Thanks Pat
Line 31, Column 46: there is no attribute "tabindex"
… <li class="TabbedPanelsTab" tabindex="0">Want a professional looking Logo ?</…

Use Spry 2.0
You can see a live demo of Spry 2.0 widgets below (contains valid markup).
http://alt-web.com/sandbox/Spry-test.html
Unless you're incorporating XML applications into your web site, there is not much reason to use XHTML Strict doc types. That standard was last revised in 2002. It has since been replaced with HTML5.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Spry Accordions, Tabbed Panels, and Collapsible Panels: changing colors

Similar Messages

Maybe you are looking for