Custom collapse/expand icons for accordion layout panesl

Page 1 of 2 12 LastLast
  1. #1

    Custom collapse/expand icons for accordion layout panels

    Hi all,

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

    Thanks
    Last edited by SMS; Apr 28, 2011 at 12:08 PM.
  2. #2
    Hi,

    I believe it's possible via css styles. Just review the styles which are currently used to provides the icons and override them.
  3. #3
    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>
  4. #4
    Did you investigate css styles using FF FireBug or IE DeveloperTools, etc.?
  5. #5
    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);
            }
  6. #6
    As far as I can see you should override background-image for "x-tool" class, not "x-tool-toggle".
  7. #7
    I tried that, the tool icon disappears completely! but is still clickable
  8. #8
    Could you provide a simplified sample code how you are trying?
  9. #9
    Never mind, I found the solution, as it turns out, the ext.net uses css sprites to display the panel tools' icons, so that's why we should reset the background position property to display the correct icon after changing:

    .x-tool-toggle
            {
                background-image: url(../../Resources/images/zoom_out.gif);
                background-position: 0 0;
            }
            .x-panel-collapsed .x-tool-toggle
            {
                background-image: url(../../Resources/images/zoom_in.gif);
                background-position: 0 0;
            }
    the obove code changes the default collapse/expand icons to the zoom in and zoom out ones :D

    thanks Daniil
  10. #10
    I guessed, but wanted to check.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] custom accordion layout issue
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 30, 2011, 12:32 AM
  2. Replies: 3
    Last Post: Aug 11, 2011, 11:07 AM
  3. Expand all panel items in accordion layout
    By DavidS in forum 1.x Help
    Replies: 4
    Last Post: Nov 25, 2010, 6:24 AM
  4. Tree "Expand All" and "Collapse All" icons
    By daneel in forum 1.x Help
    Replies: 1
    Last Post: Mar 18, 2010, 1:11 PM
  5. Replies: 1
    Last Post: May 06, 2009, 2:15 PM

Posting Permissions