Skip to main content

Accordion container

6 replies [Last post]
rafboard
Offline
Joined: 2007-08-23
Points: 0

Hello I´m using an accordion container widget in my application,and i want to change the default colour of it.

I suppose that i have to modify the file component.css of the widget,but i dont know which property i have to tune.

Thanks.

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
gmurray71
Offline
Joined: 2003-07-31
Points: 0

Hi,

I figured it out. There is one catch. Because Dojo in 0.4.3 uses JavaScript to load the styles you will need to reload the styles in the component.css after widget has been created:

Here is what I did:

In the component.css I updated the styles:

.dojoAccordionPane .label {
background:#85AEEC url(images/unselected.gif) repeat-x scroll left top;
border:1px solid #D9D9D9;
color:red;
font-size:0.9em;
font-weight:bold;
}

.dojoAccordionPane-selected .label {
background:#85AEEC url(images/selected.gif) repeat-x scroll left top;
border:1px solid #84A3D1;
}

I updated the images to be like the dojo ones but a different color. You can find the base dojo images used for the label at:

/resources/dojo/resources/libs/dojo/v0.4.3/src/widget/templates/images/soriaAccordionOff.gif

and

/resources/dojo/resources/libs/dojo/v0.4.3/src/widget/templates/images/soriaAccordionSelected.gif

Update the styles however you want:

Next you will need to make sure the styles get loaded after the widget is initialized:

I added the following code to the accordion widget component.js to reload the component.css after the widget is loaded:

this.postLoad = function() {
jmaki.loadStyle(wargs.widgetDir + "/component.css");
};

This level of customization will be easier with the 1.0 version of Dojo which uses CSS based themes rather than JavaScript to load the styles. For now this is the pretty much the only way you will be able to do this.

Let me know if things don't work correctly for you.

rafboard
Offline
Joined: 2007-08-23
Points: 0

thank you very much greg,now all it works perfect.

Greetings

gmurray71
Offline
Joined: 2003-07-31
Points: 0

Hi,

The underlying styles of the different accordion widgets is slightly different. Which one are you using?

We'll try to get you the right css overrides for the component.css.

-Greg

rafboard
Offline
Joined: 2007-08-23
Points: 0

Hi,

Im using the Dojo Accordion widget.The problem is that I can´t detect in the source code where the colour of the widget is set,so I dont know which property i have to use in the css file.

Message was edited by: rafboard

gmurray71
Offline
Joined: 2003-07-31
Points: 0

I use Firefox with Firebug to find out the correct styles. You don't need to go to the source. If you have not used the inspect feature of firebug I strongly suggest you give it a look. I'll give it a look and let you know what to update soon.

-G

rafboard
Offline
Joined: 2007-08-23
Points: 0

Ok, thank you very much Greg.