A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.
Hi there!
Thanks in advance to Joe Audette for his incredable work on exciting mojoPortal CMS! :)
I have created my own custom skin for mojoPortal. It is working and looking as I've planned. Now I'm trying to choose icons for menu items. But they aren't appears. What else can I do to achive my goal?
you should provide more information about your custom skin, like what skin did you base it on and how you have the menu controls configured in layout.master and/or provide a link to your site and then maybe we can help.
Here is code of my skin:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="~/App_MasterPages/layout.Master.cs" Inherits="mojoPortal.Web.layout" %>
<!DOCTYPE html> <html> <head id="Head1" runat="server"> <title></title> <%-- JQueryUIThemeName valid options are: base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader --%> <portal:StyleSheetCombiner ID="StyleSheetCombiner" runat="server" JQueryUIThemeName="cupertino" UseIconsForAdminLinks="false" /> <portal:IEStyleIncludes ID="IEStyleIncludes1" runat="server" IncludeHtml5Script="true" /> <portal:MetaContent ID="MetaContent" runat="server" /> <!--[if IE]> <meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" /><meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" /> <![endif]--> <portal:Favicon ID="Favicon1" runat="server" /> <portal:ScriptLoader ID="ScriptLoader1" runat="server" /> </head> <body class="pagebody"> <portal:AnalyticsAsyncTopScript ID="analyticsTop" runat="server" /> <form id="frmMain" runat="server"> <asp:SiteMapDataSource ID="SiteMapData" runat="server" ShowStartingNode="false" /> <asp:SiteMapDataSource ID="PageMapDataSource" runat="server" ShowStartingNode="false" /> <asp:SiteMapDataSource ID="ChildPageSiteMapData" runat="server" ShowStartingNode="false" /> <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" /> <ul id="user-menu"> <portal:WelcomeMessage ID="WelcomeMessage" runat="server" RenderAsListItem="true" ListItemCss="firstnav" /> <%--<portal:HomeLink ID="HomeLink" runat="server" RenderAsListItem="true" />--%> <%--<portal:SiteMapLink ID="SiteMapLink2" runat="server" CssClass="sitelink" RenderAsListItem="true" />--%> <portal:MyPageLink ID="MyPageLink1" runat="server" RenderAsListItem="true" /> <portal:UserProfileLink ID="UserProfileLink" runat="server" RenderAsListItem="true" /> <portal:MailboxLink ID="MailboxLink1" runat="server" RenderAsListItem="true" /> <portal:MemberListLink ID="MemberListLink" runat="server" RenderAsListItem="true" /> <portal:RegisterLink ID="RegisterLink" runat="server" RenderAsListItem="true" /> <%--<portal:LoginLink ID="LoginLink" runat="server" RenderAsListItem="true" />--%> <portal:LogoutLink ID="LogoutLink" runat="server" RenderAsListItem="true" /> </ul> <%-- <portal:SkipLink ID="SkipLink1" runat="server" />--%> <div id="startcontent" name="startcontent"> <table align="center" border="0" width="97%" cellspacing="0" cellpadding="0"> <tr height="120" align="right"> <td width="220" align="left" id="log_tab"> <portal:SiteLogo ID="SiteLogo" runat="server" /> </td> <td width="987" align="left"> <table align="right"> <tr align="right"> <td> <a name="top" class="link2"> </a> </td> <td width="300px"> <strong id="subtitle"></strong> </td> <td align="right" width="30px"> <a href="/"> <img border="0px" hspace="20px" height="10" alt="На главную" src="<%= SkinBaseUrl %>images/home.jpg" width="11" /></a> </td> <td align="right" width="30px"> <a href="SiteMap.aspx"> <img border="0px" hspace="20px" alt="Карта сайта" src="<%= SkinBaseUrl %>images/map.jpg" /></a> </td> <td align="right" width="30px"> <a href="mailto:info@escape.ru"> <img border="0px" hspace="20px" alt="Написать письмо" src="<%= SkinBaseUrl %>images/mail.jpg" /></a> </td> </tr> </table> <br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="800" height="100" id="rolik2" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="<%= SkinBaseUrl %>swf/rolik2.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="<%= SkinBaseUrl %>swf/rolik2.swf" quality="high" bgcolor="#ffffff" width="800" height="100" name="rolik2" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </td> </tr> </table> <table align="center" id="fild_tab"> <tr align="left" valign="baseline" id="top_tab"> <td width="35%" height="33px" style="border-top: solid 2px; padding-top: 6px; border: #8a97be; background: #cedcee"> <samp id="slog_text"> <b> <portal:SiteSlogan ID="SiteSlogan" runat="server" /></b></samp> </td> <td align="right" width="65%" style="border-top: 2px solid; border: #8a97be; background: #cedcee"> <span id="top_text"> <ul id="top-menu"> <li><a href="/">О компании</a></li> <li><a href="/technologies.aspx">Технологии</a></li> <li><a href="#">Проекты</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">События</a></li> <li><a href="#">Контакты</a></li> </ul> </span> </td> </tr> </table> <table align="center" id="fild_tab1"> <tr> <td valign="top" width="220" height="30" id="fild_tab2"> <table id="fild_tab11"> <tr valign="top"> <td> <portal:SiteMenu ID="SiteMenu1" runat="server" UseTreeView="false" UseSpanInLinks="true" HideMenuOnSiteMap="false" Direction="Vertical" TopLevelOnly="true"></portal:SiteMenu> </td> </tr> <!--<tr > <td valign="top"><br /><img src="images/razd.png" /><br /> </td> </tr> <tr > <td valign="top"> <input type="text" maxlength="25" class="textfild>" <button><img align="absmiddle" src="images/search_beg.jpg" style="margin-left:5px" ></button> </td> </tr>--> <tr> <td valign="top"> <img src="<%= SkinBaseUrl %>images/sect.png" alt="" /><br /> </td> </tr> <tr valign="top"> <td> <%--<uc1:logotips ID="Logotips1" runat="server" />--%> Logos </td> </tr> <tr> <td valign="top"> <img src="<%= SkinBaseUrl %>images/sect.png" alt="" /><br /> </td> </tr> <tr valign="top"> <td> <portal:SearchInput ID="SearchInput1" LinkOnly="False" runat="server" /> </td> </tr> <tr> <td valign="top"> <img src="<%= SkinBaseUrl %>images/sect.png" alt="" /><br /> </td> </tr> <tr valign="top"> <td> <%--<uc2:NewsControl ID="NewsControl1" runat="server" />--%> News column <asp:Panel ID="divLeft" runat="server" CssClass="leftside" Visible="True" SkinID="pnlPlain"> <portal:PageMenu ID="PageMenu1" runat="server" UseTreeView="true" TreeViewShowExpandCollapse="true" /> <a id="A1"></a> <asp:ContentPlaceHolder ID="leftContent" runat="server"> </asp:ContentPlaceHolder> </asp:Panel> </td> </tr> </table> </td> <td width="4px" bgcolor="#cedcee"> </td> <td align="left" valign="top" style="padding-left: 10px; padding-right: 0px; margin-left: 10px; margin-right: 0px"> <asp:Panel ID="divCenter" runat="server" Visible="True" CssClass="center-rightandleftmargins" SkinID="pnlPlain"> <portal:Breadcrumbs ID="Breadcrumbs" runat="server"></portal:Breadcrumbs> <portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu> <asp:ContentPlaceHolder ID="mainContent" runat="server"> </asp:ContentPlaceHolder> </asp:Panel> <asp:Panel ID="divRight" runat="server" Visible="True" CssClass="rightside" SkinID="pnlPlain"> <asp:ContentPlaceHolder ID="rightContent" runat="server"> </asp:ContentPlaceHolder> </asp:Panel> </td> </tr> <tr height="30px"> <td colspan="3" style="border-bottom: 2px solid; border: #8a97be; background: #cedcee"> </td> </tr> </table> <table align="center" width="97%"> <tr valign="top"> <td align="right"> <span id="cop"> <portal:CopyrightLabel ID="CopyrightLabel" runat="server" ShowYear="true" BeginYear="1992" /> </span> <br /> </td> </tr> </table> </div> <script type="text/javascript"> function HideMenuToolbar() { $("#toolbar").fadeOut(); $("#toolbarbut").fadeIn("slow"); } function ShowMenuToolbar() { $("#toolbar").fadeIn(); $("#toolbarbut").fadeOut("slow"); } $(document).ready(function () { $("span.downarr a").click(function () { HideMenuToolbar(); Set_Cookie('openstate', 'closed') }); $("span.showbar a").click(function () { ShowMenuToolbar(); Set_Cookie('openstate', 'open') }); $("span.downarr a, span.showbar a").click(function () { return false; }); var openState = Get_Cookie('openstate'); if (openState != null) { if (openState == 'closed') { HideMenuToolbar(); } if (openState == 'open') { ShowMenuToolbar(); } } }); </script> <portal:AutoHidePanel ID="ah1" runat="server"> <div id="toolbarbut"> <span class="showbar"><a href="#">show bar</a></span> </div> <div id="toolbar"> <div class="toolbarleft"> </div> <div class="toolbarright"> <span class="downarr"><a href="#"></a></span> <portal:AdminMenuLink ID="lnkAdminMenu" runat="server" /> <portal:FileManagerLink ID="lnkFileManager" runat="server" /> <portal:NewPageLink ID="lnkNewPage" runat="server" /> <portal:PageEditFeaturesLink ID="lnkPageContent" runat="server" /> <portal:PageEditSettingsLink ID="lnkPageSettings" runat="server" /> <asp:ContentPlaceHolder ID="pageEditContent" runat="server"> </asp:ContentPlaceHolder> </div> </div> </portal:AutoHidePanel> <portal:Woopra ID="woopra11" runat="server" /> </form> <portal:AnalyticsAsyncBottomScript ID="analyticsBottom" runat="server" /> </body> </html>
Hi,
Look for .pageicons in your CSS and make sure it isn't set to display: none.
HTH, Joe D.
Not all of the menu configurations render the images in the menu. In addition to what Joe Davis said, in layout.master you will need to change <portal:SiteMenu, remove the UseSpanInLinks="true" or set it to false.
Hope it helps,
Joe
Thank you very much, Joe Audette, your advice was very helpful!