[CLOSED] [1.0] Portlet header icon

**betamax** · Aug 13, 2010, 10:10 PM

Is there a style associated with the portlet header that would allow for an icon positioned next to the header text, similar to the style used for putting an icon in an ext button? If not, is there a way to accomplish that?

**geoffrey.mcgill** · Aug 13, 2010, 10:18 PM

Hi,

How about the .Icon property?

Example

<ext:Portlet runat="server" Title="My Portlet" Icon="Accept" />

Hope this helps.

**betamax** · Aug 16, 2010, 7:18 PM

Not really what I was looking for. That property is looking for an integer corresponding to a predefined ext icon.

I need to set the icon property to a custom icon (a url) based on it's content. Portlets are created dynamically, so examples from codebehind are far more useful than markup.

what I was orginally asking was more related to:
If I set .IconCls = "MyIconClass" I am able to create the space for the icon but I can't get an icon to show up using:

.MyIconClass x-panel-header x-unselectable x-panel-icon{
    background-image:url("/UI/PortletIcons/ucIcon1.png");    
}

I see this in firebug:

class = 'x-panel-header x-unselectable x-panel-icon MyIconClass'

In the end, I really need to set the icon property to a custom icon url in codebehind, since each will be different, but I am also curious also about what I was missing in the css.

**Vladimir** · Aug 17, 2010, 3:04 PM

Hi,

Just use the following css rule

.MyIconClass{
    background-image:url("/UI/PortletIcons/ucIcon1.png") !important;    
}

**betamax** · Aug 18, 2010, 7:00 PM

Too general. That is overriden by my styling of .x-panel .x-panel-header. And changing the background image of that causes me to lose my repeating background image across the header of the portlet.
Seems like some direct manipulation of

.x-panel-icon

would do what I need.

**geoffrey.mcgill** · Aug 18, 2010, 8:15 PM

Originally Posted by betamax

Too general. That is overriden by my styling of .x-panel .x-panel-header. And changing the background image of that causes me to lose my repeating background image across the header of the portlet.
Seems like some direct manipulation of

.x-panel-icon

would do what I need.

The css class by Vladimir should not do what you are describing if you're setting .IconCls="MyIconClass".

If it is doing what you are describing, then there's something else going on somewhere. You'll need to post a full (but very simplified) .aspx code sample demonstrating the whole scenario.

**betamax** · Aug 20, 2010, 3:22 PM

Here is a simple example of a 2 column portal with 2 portlets. The portlets are assigned ctlCls="PortletStyle1". One portlet has IconCls="MyIconClass".
A area is allocated for the icon (see screenshot FireFox_PortletStyle1.jpg), but the background_image is overridden (see screenhot Firebug_PortletStyle1.jpg)

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="PortletTest1.aspx.vb" Inherits="WebApplication1.PortletTest1" %> 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!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 runat="server">
    <title></title>
    <link rel="Stylesheet" type="text/css" href="portletstyle1.css" />
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <div>
        <ext:Portal ID="Portal1" runat="server" Layout="column" Title="Unstyled Portal" Height="500">
            <Items>
                <ext:PortalColumn ID="PortalColumn1" runat="server" ColumnWidth=".5" DefaultAnchor="100%"
                    Layout="anchor" StyleSpec="padding:10px 0 10px 10px">
                    <Items>
                        <ext:Portlet ID="Portlet1" runat="server" Padding="5" Title="Styled Portlet with IconCls" CtCls="PortletStyle1" IconCls="MyIconClass">
                        <Content>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
                        </Content>
                        </ext:Portlet>
                    </Items>
                </ext:PortalColumn>      
                <ext:PortalColumn ID="PortalColumn2" runat="server" ColumnWidth=".5" DefaultAnchor="100%"
                    Layout="anchor" StyleSpec="padding:10px 0 10px 10px">
                    <Items>
                        <ext:Portlet ID="Portlet2" runat="server" Padding="5" Title="Styled Portlet without IconCls" CtCls="PortletStyle1" >
                        <Content>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
                        </Content>
                        </ext:Portlet>
                    </Items>
                </ext:PortalColumn>                
            </Items>
        </ext:Portal>
    </div>
    </form>
</body>
</html>

portletstyle1.css

/*portlet css to match Athoria styling */
 
.PortletStyle1 .x-panel-body, .x-panel-body-noheader, .x-column-layout-ct{   
    overflow:hidden !important;
    overflow-x:hidden !important; 
    overflow-y:hidden !important; 
    background-color: Transparent;
    border-style: none;
    border-top: none;    
}  
.PortletStyle1 .x-portal .x-panel-dd-spacer {
    margin-bottom:10px;
}
.PortletStyle1 .x-portlet {
    margin-bottom:5px;
} 
.PortletStyle1 .x-panel-tc {
    background: url("/images/portlet1_standard.png") 0 -158px repeat-x;
}
.PortletStyle1 .x-panel .x-panel-tl{
    background: url("/images/portlet1_standard.png") no-repeat scroll left -51px;
    border-bottom-color:#E6E6E6; 
    border-bottom : 0px;
}
.PortletStyle1 .x-panel-collapsed .x-panel-tl{
    background: url("/images/portlet1_standard.png") no-repeat scroll left -78px;
    border-bottom-color:#E6E6E6; 
    border-bottom : 0px;
    height:26px;
}
.PortletStyle1 .x-panel .x-panel-tr{
    background: url("/images/portlet1_standard.png") no-repeat scroll right 0px;
    border-bottom-color:#E6E6E6;
}       
.PortletStyle1 .x-panel-collapsed .x-panel-tr{
    background: url("/images/portlet1_standard.png") no-repeat scroll right -25px;
    border-bottom-color:#E6E6E6;
    height:26px;
}  
.PortletStyle1 .x-panel .x-panel-header{
    background: url("/images/portlet1_standard.png") 0 -158px repeat-x;
    padding:"10px 10px 0px 10px";
    color:#656565;
} 
.PortletStyle1 .x-panel-collapsed .x-panel-header{
    background: url("/images/portlet1_standard.png") 0 -158px repeat-x;
    color:#656565;
    height:16px;
} 
.PortletStyle1 .x-tool{
    background: url("/images/portlet1_standard.png");
}
.PortletStyle1 .x-panel-collapsed .x-tool-toggle {
    background-position: -1px -245px;
}
.PortletStyle1 .x-panel-collapsed .x-tool-toggle-over {
    background-position:-1px -295px;
}
.PortletStyle1 .x-tool-toggle {
    background-position:-1px -261px;
}
.PortletStyle1 .x-tool-toggle-over {
    background-position:-1px -313px;
}
.PortletStyle1 .x-panel-expanded .x-tool-toggle{
    background-position: -1px -261px;
}
.PortletStyle1 .x-tool-gear {
    background-position:-1px -329px;
}
.PortletStyle1 .x-tool-gear-over {
    background-position:-1px -347px;
}
.PortletStyle1 .x-tool-close {
    background-position: -1px -227px;
}
.PortletStyle1 .x-tool-close-over {
background-position:-1px -279px;
}
.PortletStyle1 .x-portlet .x-panel-body{
    background: url("/images/portlet1_standard.png") 0 -399px repeat-x;
    background-color:#FFFFFF;
    background-repeat: repeat-x;   
}  
.PortletStyle1 .x-panel-ml, .x-panel-mr  {
    background-color:#C9C9C9;
    background-image:none;
}  
.PortletStyle1 .x-panel-bc {
    background-color:#C9C9C9;
    background-image:none;
} 
 .PortletStyle1 .x-panel-br{
    background: url("/images/portlet1_standard.png") right -133px no-repeat;
    height:3px;
 
 } 
 .PortletStyle1 .x-panel-bl{
     background: url("/images/portlet1_standard.png") left -107px no-repeat;
     height:3px;
 } 
.PortletStyle1 .x-panel-tc, .x-panel-tl, .x-panel-tr {
    background-color:#C9C9C9;
    background-image: none;
} 
.PortletStyle1 .x-panel-mc {
    background-color:#DFDFDF;
}
 
.PortletStyle1 .x-portlet .x-panel-nofooter .x-panel-bc {
    height:2px;
    position:relative;
    top:1px;
}
 
.PortletStyle1 .MyIconClass{    
    background-image:url("/images/check_box.gif");    
}

Image files are attached. Create an "images" folder, or modify css accordingly.

**Vladimir** · Aug 22, 2010, 7:50 PM

Hi,

Please try this

.PortletStyle1 .x-panel .MyIconClass{    
    background-image:url("/images/check_box.gif") !important;    
}

**betamax** · Aug 23, 2010, 6:23 PM

Basically you're just reversing this:

That is overriden by my styling of .x-panel .x-panel-header. And changing the background image of that causes me to lose my repeating background image across the header of the portlet.

IOW, now this is overridding my background-image for the x-panel-header... and I still have no icon. Doing what you suggested seems no diiferent from just putting !important on the end of your original suggestion.
Did you try doing what you suggest in my example? If it doesn't work in the example, it's proabbly not going to help me.

**Vladimir** · Aug 23, 2010, 7:25 PM

Hi,

now this is overridding my background-image for the x-panel-header... and I still have no icon

Yes, because you try to apply two backgrounds to the one element (x-panel-header)
Why do you apply the following rule?

.PortletStyle1 .x-panel .x-panel-header{
       background: url("/images/portlet1_standard.png") 0 -158px repeat-x;
       padding:"10px 10px 0px 10px";
       color:#656565;
}

If icon is used then you have override rule for 'x-panel-tc' element

So, change x-panel-header by x-panel-tc

.PortletStyle1 .x-panel .x-panel-tc{
            background: url("/images/portlet1_standard.png") 0 -158px repeat-x;
            padding:"10px 10px 0px 10px";
            color:#656565;
        } 
        .PortletStyle1 .x-panel-collapsed .x-panel-tc{
            background: url("/images/portlet1_standard.png") 0 -158px repeat-x;
            color:#656565;
            height:16px;
        } 
.PortletStyle1 .x-panel .MyIconClass{        
            background-image:url("/images/check_box.gif") !important;   
        }

Thread: [CLOSED] [1.0] Portlet header icon

Thread Tools

Search Thread

Display

[CLOSED] [1.0] Portlet header icon

Simple Example of custom portlet styling

Similar Threads

portlet scroll header and borders

[CLOSED] [1.0] Possible to Add Icon to Grid Column Header?

[CLOSED] Shading line on portlet header

icon in the header column

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] [1.0] Portlet header icon

Thread Tools

Search Thread

Display

[CLOSED] [1.0] Portlet header icon

Simple Example of custom portlet styling

Similar Threads

portlet scroll header and borders

[CLOSED] [1.0] Possible to Add Icon to Grid Column Header?

[CLOSED] Shading line on portlet header

icon in the header column

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us