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

Similar Messages

Pen tool changing colors on gradient when saving

I am having issues when I save a file.
The shapes I have created (with the pen tool) and added specific gradients to, change colors. When I reopen the fill all the shapes have changed to the two colors that are currently on the foreground and background. Hence all the gradients are just those two colors and all the work matching and adding colors has been lost.
What am I doing or not doing that will prevent this from happening?

Which operating system are you using?
You need to go to Help>Updates in photoshop to install the latest updates.
If in photoshop cs6, if you go to Help>System Info and look at the top line, what version does it say?

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.

Changing color stop gradients by eyedropping objects on art board

I'd like to be able to change a single color stop on a gradient by picking a color of an object on the art board. I know you can make custom swatches then pull them onto the gradient, but that doesnt work when you just want to add a color on the fly. Also if you want to change a color stop using the color picker it should come up with the color that the stop currently is, not something else. Thanks!

When the color stop in the gradient is selected, take the eyedropper, press shift and click on the color you want applied to the stop.
Pressing shift means sometimes that colors will be converted through color management though. For example when clicking on a placed photo.

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

Spry Accordion Panels - Individual Colors

Hi and Thanks in advance.
How do I go about individually coloring each panel in Spry Accordion Widget. I check the CSS but it seems to be directed at the "whole" Spry Accordion and I would like each panel to have a different color. Is that possible?
Regards
Glen

Certainly. Apply a unique ID to each panel in the accordion and set a color for each in the CSS file:
This is what I added to the css file:
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: 200px;
.AccordionPanelContent#content1 {
    background-color: red;
.AccordionPanelContent#content2 {
    background-color: yellow;
And this is what the html now looks like:
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent" id="content1">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent" id="content2">Content 2</div>
</div>
</div>
You can do the same with the tabs. If you apply the IDs to the div class="AccordionPanel", you will also affect the tabs. In that case, leave off the .AccordionPanelContent in the style selector and insert .AccordionPanel#content1, for example.
Beth

Illustrator crashes when changing color on gradient tool.

In any file, even a brand new, empty artboard, when I double click on the color box on the gradient tool bar ON THE OBJECT (not on the Gradient tool box, I've included an image below) to change the color, Illustrator crashes every single time without fail.
I can't seem to find the issue. I'm running on Windows 7 Pro
http://i.imgur.com/shXeEJ9.jpg

quietstorm,
Are all the faces of the Verdana and Tahoma fonts installed and enabled/activated through the OS (not font mangement) as TTF (not OTF)?
The following is a general list of things you may try when the issue is not in a specific file (you may have tried/done some of them already); 1) and 2) are the easy ones for temporary strangenesses, and 3) and 4) are specifically aimed at possibly corrupt preferences); 5) is a list in itself, and 6) is the last resort.
1) Close down Illy and open again;
2) Restart the computer (you may do that up to 3 times);
3) Close down Illy and press Ctrl+Alt+Shift/Cmd+Option+Shift during startup (easy but irreversible);
4) Move the folder (follow the link with that name) with Illy closed (more tedious but also more thorough and reversible);
5) Look through and try out the relevant among the Other options (follow the link with that name, Item 7) is a list of usual suspects among other applications that may disturb and confuse Illy, Item 15) applies to CC, CS6, and maybe CS5);
Even more seriously, you may:
6) Uninstall, run the Cleaner Tool (if you have CS3/CS4/CS5/CS6/CC), and reinstall.
http://www.adobe.com/support/contact/cscleanertool.html

How to change color in Accordion Widget

According to the text on the Accordion Panel Widget in Exchange, it's very easy to change the colors. So easy, that apparently no explanation is needed! I know I have to open the file in Photoshop or Illustrator and then import the altered file back into my Library. But I can't figure out how to export the file and open it. Do I do it directly from Muse somehow? Or must I locate the file in a folder - and where on my Mac would that folder be? Help is very much appreciated! Jesper

Hi Brad,
The widget is the Accordion Panel Widget by the Adobe Muse Team on Muse Exchange: http://muse.adobe.com/exchange-library/accordion-panel-widget.
Changing fill colors will only fill in the background, not the ribbon itself.
I read another query about the same widget on this forum, where it was noted that you have to open the file on Photoshop or Illustrator, and that seemed to be the correct answer. My question is how you you export (and the import back) the file.

My Illustrator does not allow me to change colors using swatches panel. Help pleas.

Few days ago I started having strange problems with my Illustrator CS5 application. I am using MacBook Pro with Intel Processor. After major update on the Mac OS few days ago I noticed I can not change colors in my drawings using swatches panel. The function on my Illustrator CS5 stopped working. When I select object and try to change its fill or stroke color using fill and stroke from the options bar above work space, none of the swatches would work. The are there how ever nothing hapends when I select them, the color remains the same.The same thing happens if I try to use the swatch panel, I select the object then I try to select new color from swatch but the fill or stroke does not change. I can only change color on my drawings using the color panel but that is not useful for me since I need to get precise colors using approved color swatches ether from pantone library or approved by client.
The other strange thing is my selection tool does not deselect when I click outside on or of the artboard, the object remains selected until I reselect another object or use the keyboard short cut to deselect it.
I have tried various options to resolve the issue from deleting and reseting preference to completely uninstalling and reinstalling Illustrator CS5. I even installed back my old CS4 version because I had to complete a project and the same issue is happens there as well. I also reset the application using Time Machine from few months ago when it was working correctly. What happens when I reset or reinstall the app, it works for about 10 min correctly as it should and and then it reverts to the same problem. I am out of options and do not know what else I could do to fix this. Right now I am working on my old Mac tower G5 and CS4 where everything works as it is suppose to, but I really need to get this fixed. Can any one help or has solution for my problem? Please.

hey i m working on my illustrator and i m having many problems with my swatches
for example i use the green phosphorique i don't get this color i get another green
and many colors too it's like illustrator chooses for you the only green color
so please i kind of need help i can show you pictures of that i print screen viewed them.. so anybody who can help... pleaaaaaaaaaase contact me because i m having a project now..
my e mail is [email protected] i would be thankful
i even tried to download the illustrator on my friend's computer also i m having this problem ....

Why can't I change the width of my accordion panel?

I'm trying to set the width of this accordion panel by dragging the middle handle to the left so that it lines up with the page guide, making it 920px instead of 925px. Everytime I do this, it springs back to the right again, to 925px. I've tried setting the actual dimensions in pixels from 925 to 920, but it won't change. Why is this?

Refer to the following thread with a possible solution - http://forums.adobe.com/message/5140254
Thanks,
Vinayak

Change colors in Layer's Panel

From yesterday my layer's panel changed the active layer light blue color to dark blue color like this.
How can I change this blue to the original like this? Is better to see all options.
Thx in advanced:

You can change the color by right clicking on your desktop and
choosing Properties>Appearace>Advanced.
Choose Selected Items, click on the color, click other. In the color picker
enter the color value in the red, green and blue boxes, click Add to Custom Colors
and click okay. (you can get the color values by opening your screenshot in photoshop
and reading the values with the eyedropper tool)
This effects all applications, not just photoshop.
MTSTUNER

How to solve illustrator cs6 save as cs5 problem about the stroke(when the stroke with clipping mask and color is gradient, save as cs5 will change to embed ).

how to solve illustrator cs6 save as cs5 problem about the stroke(when the stroke with clipping mask and color is gradient, save as cs5 will change to embed ).

Because it was not possible to apply a gradient to a stroke in CS5. When you open the file in CS5, it is reduced to something that can be rendered in CS5.

How to change colors in some Muse Widgets

Hi,
After getting the perfect answer to my question about using new widgets from http://muse.adobe.com/widget-manager , I now have another one.
Customizing the widgets has been extremely easy except of only one part I cannot figure out: changing the color in some of them. Precisely, "Accordion (Panel Widget)" < http://muse.adobe.com/widget/panel-accordion-adobe >
I tried customizing the colors to fit my site's theme in photoshop but I could not replace the default colored banners/flags. Also, I do believe the banners are supposed to be able to be stretched across the screen to make it look 3D -- I was unable to resize them, either, like I could with similar widgets.
I absolutely love this widget but need guidance as to how to customize it for my site. It is perfect for the very long Press page and the Video Gallery. Here is my page in demo mode so you can see what I mean: < http://torgexperiment.businesscatalyst.com/video-gallery.html >
I need to add this to the live site ASAP as the film is doing quite well and is now premiering internationally.
Thanks,
Jill

Hi, as you can see from the screenshot I provided, the widget uses 3 external images as backgrounds for the labels.
This means that you cannot change the color of the background directly in muse. You have to re-design the flags in Photoshop/Fireworks/Illustrator (or another application you like) and import as background image.
For the background width/height. You can choose:
1. Use the scale to fill option to adapt you image to the container's dimension. Be carefoul because if you size the image over the 100% you'll see it pixelated.
2. While you are re-redesign you flag with the right colour, choose also the right width/height valuse for your project.

How do I collapse all the accordion panels

The problem that I still have is that I am trying to close all the Accordions when clicking on the last panel.
I have looked at the Accordion.closePanel() , but that throws an error
http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
see the code below. Any help would be greatly appreciated. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
<div class="AccordionPanelContent">
<img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="3" />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
<div class="AccordionPanelContent2">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
width: 174px;
overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_blue.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTop {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_top.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 22px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelBot {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_bot.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: hidden;
margin: 0px;
.AccordionPanelContent2 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: auto;
margin: 0px;
height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;

Just so that you know for the next time, when you give us a URL, there is no need to post your code. This is by far the most preferred method for obtaining our assistance.
Having said that, place the fillowing in the HEAD section of your document, ensuring that you do have the file in that location
<script src="SpryAssets/SpryDOMUtils.js"></script>
Then, near the bottom of the page within the same SCRIPT content as your constructor(s), place the following code
Spry.$$(".AccordionPanelBot").addEventListener("click", function(){
Accordion1.closePanel();
The Spry Element Selector (Spry.$$) requires SpryDOMUtils.js. Here we place an event listener to your last tab with a class name of AccordionPanelBot, which when clicked will close the currently open panel(s).
I hope this helps.

Accordion Panel problem in IE

Using DW8 - and Interakt Ajax tookit, I have an Ajax panel
that contains the Spry Accordion. I have tried EVERYTHING, and
although it works perfectly in Firefox, the panels open slightly as
soon as you mouse over or open any of them. I have tried editing
everything I can think of in the code, the CSS and even editing in
doc type in the panel page.... but it still does it....just
slightly. Also...I can only use fixed height... becuase if I use
the auto-height... it slides up sluggishly, but ONLY if there is a
LOT of content. I am pulling my hair out.
I figured the only people who can help me at this point have
to live in Romania.... if any are watching this post... please
help!!!
Thanks guys, and gals.

Here is the CSS for that area: I tried setting margins in
every state just as an experiment? Maybe I need to use the
!important comment?
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* This is the selector for the main Accordion container. For
our default style,
* we draw borders on the left, right, and bottom. The top
border of the Accordion
* will be rendered by the first AccordionPanelTab which
never moves.
* If you want to constrain the width of the Accordion
widget, set a width on
* the Accordion container. By default, our accordion expands
horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector
is not necessary
* to make the widget function. You can use any class name
you want to style the
* Accordion container.
.Accordion {
border-left: solid 1px gray;
border-right: solid 1px gray;
border-bottom: solid 1px gray;
overflow: hidden;
/* This is the selector for the AccordionPanel container
which houses the
* panel tab and a panel content area. It doesn't render
visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This
container houses
* the title for the panel. This is also the container that
the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-weight: bold;
/* This is the selector for a Panel's Content area. It's
important to note that
* you should never put any padding on the panel's content
area if you plan to
* use the Accordions panel animations. Placing a non-zero
padding on the content
* area can cause the accordion to abruptly grow in height
while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on
the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in
this selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 150px;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open. The class "AccordionPanelOpen" is
programatically added and removed
* from panels as the user clicks on the tabs within the
Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover"
is programatically added
* and removed from panel tab containers as the mouse enters
and exits the tab container.
.AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelOpen .AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of all
the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is
programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;

Accordion panel-change color to gradient?

Similar Messages

Maybe you are looking for