Hi,
Having problem with ComponentArt Menu styling. I am trying to display the Menu Item "text with image" in DotNetNuke version 4.9.0 or above. The problem facing is the css of the text is not applying in it. When I test the module in DotNetNuke legacy version it's working fine.
Below is the code:
testMenu.ascx file:
<%@ Control Language="vb" Inherits="Modules.SMCP_Navigation.View" CodeFile="View.ascx.vb"
AutoEventWireup="false" Explicit="True" %>
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>
<link href="<%= System.Configuration.ConfigurationManager.AppSettings("SMCP-ApplicationCSS") & "/StyleSheet.css" %>"
rel="stylesheet" type="text/css" />
<table width="100%" border="0">
<tr>
<td>
<ComponentArt:Menu ID="muMeetingConvention" Orientation="Horizontal" EnableViewState="false"
runat="server" AutoPostBackOnSelect="false" DefaultGroupCssClass="MenuGroup"
DefaultItemLookId="DefaultItemLook" DefaultGroupItemSpacing="2" ExpandTransition="Fade"
CollapseTransition="Fade" ExpandDelay="100" DefaultItemTextWrap="true" ImagesBaseUrl="/dnn514/desktopmodules/SMCP_Navigation/images"
DefaultItemTextAlign="Left">
<ItemLooks>
<ComponentArt:ItemLook LookId="TopItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover"
ActiveCssClass="MenuItemActive" />
<ComponentArt:ItemLook LookId="PRItemLook" CssClass="MenuItemPendingRegistration"
HoverCssClass="MenuItemHoverPendingRegistration" ExpandedCssClass="MenuItemExpanded" />
<ComponentArt:ItemLook LookId="ImageItemLook" CssClass="MenuItemPendingRegistration"
HoverCssClass="MenuItemHoverPendingRegistration" ExpandedCssClass="MenuItemExpanded"
RightIconUrl="scroll_down.gif.gif" RightIconWidth="18px" />
<ComponentArt:ItemLook LookId="DefaultItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover"
ActiveCssClass="MenuItemActive" />
<ComponentArt:ItemLook LookId="SubItemLook" CssClass="SubMenuItem" />
</ItemLooks>
<ServerTemplates>
<ComponentArt:NavigationCustomTemplate ID="CustomMenu">
<Template>
<table border="0" width="250px" cellpadding="0" cellspacing="0" style="background-color: White;">
<tr>
<td>
</td>
<td>
<h1>
<asp:Label ID="lblJustAdded" runat="server" Text="Just Added:" Style="font-family: Arial;
color: Navy;" Font-Bold="true" Font-Size="Large"></asp:Label>
</h1>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:DataList ID="dlstPR" runat="server" DataKeyField="CID" Width="225px">
<ItemTemplate>
<table border="0">
<tr>
<td>
<b>Tag: </b>
<%#DataBinder.Eval(Container.DataItem, "CatalogTag")%>
<br />
<b>Type: </b>
<%#DataBinder.Eval(Container.DataItem, "Catalog")%>
<br />
<b>Price: $</b><%#DataBinder.Eval(Container.DataItem, "Price", "{0}")%>
</td>
</tr>
<tr>
<td valign="middle" align="center" colspan="5">
<hr style="margin-top: 5px; margin-bottom: 5px" align="center" width="225px">
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:LinkButton ID="lnkbtnViewAllPendingRegistration" Text="View All Pending Registration"
runat="server" Style="font-family: Arial; color: Navy;" Font-Bold="true" Font-Size="Medium"></asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</Template>
</ComponentArt:NavigationCustomTemplate>
</ServerTemplates>
</ComponentArt:Menu>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
testMenu.ascx.vb file:
Imports DotNetNuke
Imports System.Web.UI
Imports DotNetNuke.Entities.Modules.Communications
Namespace Modules.SMCP_Navigation
''' -----------------------------------------------------------------------------
''' <summary>
''' The View class displays the content
''' </summary>
''' <remarks>
''' </remarks>
''' <history>
''' </history>
''' -----------------------------------------------------------------------------
Partial Class View
Inherits Entities.Modules.PortalModuleBase
Implements Entities.Modules.Communications.IModuleCommunicator
Public Event ModuleCommunication(ByVal sender As Object, ByVal e As DotNetNuke.Entities.Modules.Communications.ModuleCommunicationEventArgs) Implements DotNetNuke.Entities.Modules.Communications.IModuleCommunicator.ModuleCommunication
#Region "Event Handlers"
''' -----------------------------------------------------------------------------
''' <summary>
''' Page_Load runs when the control is loaded
''' </summary>
''' <remarks>
''' </remarks>
''' <history>
''' </history>
''' -----------------------------------------------------------------------------
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Try
Call BuildBasicMenu()
Call LoadPendingRegistration()
Catch exc As Exception
ProcessModuleLoadException(Me, exc)
End Try
End Sub
#End Region
Protected Sub BuildBasicMenu()
Dim objMenuData As ComponentArt.Web.UI.MenuItem
Try
objMenuData = New ComponentArt.Web.UI.MenuItem()
objMenuData.ID = "RFAM"
objMenuData.Text = "CD Catalog"
objMenuData.Value = 1
objMenuData.AutoPostBackOnSelect = True
objMenuData.LookId = "TopItemLook"
muMeetingConvention.Items.Add(objMenuData)
objMenuData = New ComponentArt.Web.UI.MenuItem()
objMenuData.ID = "PR"
objMenuData.Text = "DVD Catalog"
objMenuData.Value = 2
objMenuData.AutoPostBackOnSelect = True
objMenuData.LookId = "PRItemLook"
muMeetingConvention.Items.Add(objMenuData)
objMenuData = New ComponentArt.Web.UI.MenuItem()
objMenuData.ID = "img"
objMenuData.Text = ""
objMenuData.Value = 3
objMenuData.AutoPostBackOnSelect = True
objMenuData.LookId = "ImageItemLook"
muMeetingConvention.Items.Add(objMenuData)
objMenuData = New ComponentArt.Web.UI.MenuItem()
objMenuData.ID = "CM"
objMenuData.ServerTemplateId = "CustomMenu"
objMenuData.LookId = "SubItemLook"
muMeetingConvention.Items(2).Items.Add(objMenuData)
objMenuData = New ComponentArt.Web.UI.MenuItem()
objMenuData.ID = "PPR"
objMenuData.Text = "HD Catalog"
objMenuData.Value = 4
objMenuData.AutoPostBackOnSelect = True
objMenuData.LookId = "TopItemLook"
muMeetingConvention.Items.Add(objMenuData)
objMenuData = New ComponentArt.Web.UI.MenuItem()
objMenuData.ID = "MPR"
objMenuData.Text = "DVDRip Catalog"
objMenuData.Value = 5
objMenuData.AutoPostBackOnSelect = True
objMenuData.LookId = "TopItemLook"
muMeetingConvention.Items.Add(objMenuData)
Catch exp As Exception
Throw exp
Finally
If objMenuData IsNot Nothing Then objMenuData.Dispose()
End Try
End Sub
Protected Sub LoadPendingRegistration()
Try
Dim dtbPendingRegistration As New DataTable("PendingRegistration")
dtbPendingRegistration.Columns.Add(New DataColumn("CID", GetType(Integer)))
dtbPendingRegistration.Columns.Add(New DataColumn("CatalogTag", GetType(String)))
dtbPendingRegistration.Columns.Add(New DataColumn("Catalog", GetType(String)))
dtbPendingRegistration.Columns.Add(New DataColumn("Price", GetType(Decimal)))
Dim drwEntry As DataRow = dtbPendingRegistration.NewRow()
drwEntry("CID") = 1
drwEntry("CatalogTag") = "SunShine"
drwEntry("Catalog") = "DVD"
drwEntry("Price") = 75
dtbPendingRegistration.Rows.Add(drwEntry)
drwEntry = dtbPendingRegistration.NewRow()
drwEntry("CID") = 2
drwEntry("CatalogTag") = "2012"
drwEntry("Catalog") = "DVD"
drwEntry("Price") = 75
dtbPendingRegistration.Rows.Add(drwEntry)
drwEntry = dtbPendingRegistration.NewRow()
drwEntry("CID") = 3
drwEntry("CatalogTag") = "Iron Man"
drwEntry("Catalog") = "DVD"
drwEntry("Price") = 75
dtbPendingRegistration.Rows.Add(drwEntry)
Dim SubMenuItem As ComponentArt.Web.UI.MenuItem = muMeetingConvention.Items(1).Items(0)
Dim dlstPendingRegistration As DataList = DirectCast(SubMenuItem.FindControl("dlstPR"), DataList)
dlstPendingRegistration.DataSource = dtbPendingRegistration.DefaultView()
dlstPendingRegistration.DataBind()
Catch exp As Exception
Throw exp
End Try
End Sub
End Class
End Namespace
StyleSheet.css
/* Menu Style Start */
.MenuGroup
{
border-top-color: gray;
border-left-color: gray;
border-style: none;
border-width: 0px 2px 0px 2px;
border-color: #99CCFF;
padding: 0px;
margin: 0px;
background-color: #0093E0;
}
.MenuItem
{
border-style: none;
border-color: #99CCFF;
padding: 0px 10px 0px 10px;
margin: 0px 10px 0px 10px;
background-color: #333399;
color: #FFFFFF;
font-family: verdana;
font-size: 12px;
font-weight: bold;
cursor: pointer;
text-align: left;
width: 105px;
height: 60px;
}
.MenuItemHover
{
border-style: none;
padding: 0px 10px 0px 10px;
margin: 0px 10px 0px 10px;
background-color: #6699FF;
color: white;
font-family: verdana;
font-size: 12px;
font-weight: bold;
cursor: pointer;
width: 105px;
}
.MenuItemActive
{
border-style: none;
padding: 0px 10px 0px 10px;
margin: 0px 10px 0px 10px;
background-color: #6699FF;
color: white;
font-family: verdana;
font-size: 12px;
font-weight: bold;
cursor: pointer;
width: 105px;
}
.MenuItemPendingRegistration
{
border: 0px none #FFFFFF;
padding: 0px 0px 0px 15px;
margin: 0px;
background-color: #333399;
color: #FFFFFF;
font-family: verdana;
font-size: 12px;
font-weight: bold;
cursor: pointer;
text-align: left;
width: 120px;
height: 60px;
}
.MenuItemHoverPendingRegistration
{
border: 0px none #99CCFF;
padding: 0px 0px 0px 15px;
margin: 0px;
background-color: #6699FF;
color: white;
font-family: verdana;
font-size: 12px;
font-weight: bold;
cursor: pointer;
width: 120px;
height: 60px;
}
.MenuItemActivePendingRegistration
{
border-style: none;
border-width: 0px;
border-color: #99CCFF;
padding: 0px 0px 0px 15px;
margin: 0px;
background-color: #6699FF;
color: white;
font-family: verdana;
font-size: 12px;
font-weight: bold;
cursor: pointer;
width: 120px;
height: 60px;
}
.MenuItemExpanded
{
border-style: none;
border-width: 0px;
border-color: #99CCFF;
padding: 0px 0px 0px 15px;
margin: 0px;
background-color: #6699FF;
color: white;
font-family: verdana;
font-size: 12px;
font-weight: bold;
cursor: pointer;
width: 120px;
height: 60px;
}
.SubMenuItem
{
border: 1px solid #999999;
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
color: #FFFFFF;
font-family: verdana;
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
/* Menu Style End */
Regards,
Omer Rasheed