Hi all,
Is there anyway I can change the default expand/collapse icons for panels inside an accordion layout?
Thanks
Printable View
Hi all,
Is there anyway I can change the default expand/collapse icons for panels inside an accordion layout?
Thanks
Hi,
I believe it's possible via css styles. Just review the styles which are currently used to provides the icons and override them.
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?
Code:<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>
Did you investigate css styles using FF FireBug or IE DeveloperTools, etc.?
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:
Code:.x-tool-toggle
{
background-image: url(../../Resources/images/tick.png);
}
.x-panel-collapsed .x-tool-toggle
{
background-image: url(../../Resources/images/tick.png);
}
As far as I can see you should override background-image for "x-tool" class, not "x-tool-toggle".
I tried that, the tool icon disappears completely! but is still clickable
Could you provide a simplified sample code how you are trying?
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:
the obove code changes the default collapse/expand icons to the zoom in and zoom out ones :DCode:.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;
}
thanks Daniil
I guessed, but wanted to check.