Custom collapse/expand icons for accordion layout panesl

[SMS]

Hi all,

Is there anyway I can change the default expand/collapse icons for panels inside an accordion layout?

Thanks

[Daniil]

Hi,

I believe it's possible via css styles. Just review the styles which are currently used to provides the icons and override them.

[SMS]

Hi, Thanks, but what are the right CSS classes to edit, I'm trying to change the collapse/expand icons with custom ones in a portal-portlet confituration?

<ext:Portal ID="Portal1" runat="server" AutoWidth="true" Layout="column" Height="600">
                                    <Items>
                                        <ext:PortalColumn ID="PortalColumn1" runat="server" ColumnWidth="0.33" DefaultAnchor="100%"
                                            Layout="anchor" StyleSpec="padding:10px 10px 10px 10px">
                                            <Items>
                                                <ext:Portlet Icon="Cog" ID="Portlet1" runat="server" Html="Portlet 1" Padding="5" Title="Pending Tasks">
                                                </ext:Portlet>
                                                <ext:Portlet Icon="Cog" ID="Portlet2" runat="server" Html="Portlet 2" Padding="5" Title="Unassigned Pending Tasks">
                                                </ext:Portlet>
                                            </Items>
                                        </ext:PortalColumn>
                                    </Items>
</ext:Portal>

[Daniil]

Did you investigate css styles using FF FireBug or IE DeveloperTools, etc.?

[SMS]

Yes I did, but when I change the Background image property of the class .x-tool-toggle, the tool disappears completely! and the new image isn't there:

.x-tool-toggle
        {
            background-image: url(../../Resources/images/tick.png);
        }
.x-panel-collapsed .x-tool-toggle
        {
            background-image: url(../../Resources/images/tick.png);
        }

[Daniil]

As far as I can see you should override background-image for "x-tool" class, not "x-tool-toggle".