Get rid of PageMenu style="float:left;"

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
4/28/2011 9:52:45 AM
Gravatar
Total Posts 18444

Re: Get rid of PageMenu style="float:left;"

When I view the source of your page I see the style blocks for the menus at the top which means either UseNet35Mode is working or you are actually running under .NET 3.5.

If you are running under .NET 3.5 then there is no javascript adding the float:left and if you are running .NET 4 but UseNet35Mode is enabled it also has no javascript, so the float must actually be coming from CSS.

If you are hosted under .NET 3.5 with Medium Trust, see also the important notes about medium trust at the bottom of the Understanding the theme.skin file document.

Hope it helps,

Joe

4/28/2011 10:38:09 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

At this point, I'll go with the override, but in case you feel like chasing it down any further, here's my system information and layout.master (minus chat script and phone numbers):

The rest of my skin files are all from the latest artisteer 3.0 vertical menu 2 skin, except layout.master which I manually integrated.  I guess I must have missed the UseArtisteer change from that skin, but I think I got the rest of the big changes.

mojoPortal Version 2.3.6.5 MSSQL
Operating System Microsoft Windows NT 5.2.3790 Service Pack 2
ASP.NET Info v4.0.30319 Running in Full Trust
Server Time Zone Eastern Daylight Time
Server Local Time (GMT -4) 4/28/2011 11:34:51 AM
Greenwich Mean Time (GMT/UTC) 4/28/2011 3:34:51 PM

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="~/App_MasterPages/layout.Master.cs"
    Inherits="mojoPortal.Web.layout" %>

<!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" dir="ltr" lang="en-US" xml:lang="en">
<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="redmond"
        UseIconsForAdminLinks="false" UseTextLinksForFeatureSettings="false" EnableNonClickablePageLinks="true" />
    <portal:IEStyleIncludes ID="IEStyleIncludes1" runat="server" IncludeHtml5Script="false"
        IE6CssFile="style.ie6.css" IE7CssFile="style.ie7.css" />
    <portal:MetaContent ID="MetaContent" runat="server" />
    <!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<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" IncludeSizzle="true" />
    <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="script.js" />
    <link rel="alternate" type="application/rss+xml" title="DidItBetter Site Feed" href="http://www.diditbetter.com/rss.aspx" />
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Architects+Daughter|Ubuntu:bold" />
    <meta name="google-site-verification" content="k28qxC9lUuCaoGSNaMo3PRRd2lbToaqKumllDGyYQFY" />
</head>
<body class="pagebody" id="Body" runat="server">
<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" />
    <div id="art-page-background-simple-gradient">
    </div>
    <div id="art-page-background-glare">
        <div id="art-page-background-glare-image">
        </div>
    </div>
    <div id="art-main">
        <div class="art-sheet">
            <div class="art-sheet-tl">
            </div>
            <div class="art-sheet-tr">
            </div>
            <div class="art-sheet-bl">
            </div>
            <div class="art-sheet-br">
            </div>
            <div class="art-sheet-tc">
            </div>
            <div class="art-sheet-bc">
            </div>
            <div class="art-sheet-cl">
            </div>
            <div class="art-sheet-cr">
            </div>
            <div class="art-sheet-cc">
            </div>
            <div class="art-sheet-body">
                <div class="art-header">
                    <div class="art-header-png"></div>
                    <div class="art-header-jpeg">
                    </div>
                    <div class="art-logo">
                        <portal:SkipLink ID="SkipLink1" runat="server" />
                        <mp:InsecurePanel ID="InsecurePanel1" runat="server" CssClass="addthisbutton">
                            <portal:mojoAddThisButton ID="at2" runat="server" AccountId="" ButtonImageUrl="~/Data/SiteImages/addthisbookmarkbutton.gif"
                                Text="Share This Using Popular Bookmarking Services" CustomBrand="" CustomLogoUrl=""
                                CustomLogoBackgroundColor="" />
                        </mp:InsecurePanel>
                    </div>
                </div>
                <div class="art-nav">
                    <div class="l">
                    </div>
                    <div class="r">
                    </div>
                    <portal:SearchInput ID="SearchInput1" LinkOnly="False" RenderAsListItem="false" runat="server" />
                    <portal:SiteMenu ID="SiteMenu1" runat="server" UseTreeView="false" UseArtisteer="true"
                        HideMenuOnSiteMap="false" Direction="Horizontal" TopLevelOnly="false"></portal:SiteMenu>
                </div>
                        <asp:Panel ID="divAlt1" runat="server" CssClass="altcontent1">
                            <asp:ContentPlaceHolder ID="altContent1" runat="server"></asp:ContentPlaceHolder>
                        </asp:Panel>
                <div class="art-content-layout">
                <div class="art-content-layout-row">
                    <asp:Panel ID="divLeft" runat="server" CssClass="art-layout-cell art-sidebar1 leftside" Visible="True"
                        SkinID="pnlPlain">
                        <asp:ContentPlaceHolder ID="leftContent" runat="server">
                        </asp:ContentPlaceHolder>
                    </asp:Panel>
                    <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>
                        <a id="startcontent"></a>
                        <asp:ContentPlaceHolder ID="mainContent" runat="server">
                        </asp:ContentPlaceHolder>
                    </asp:Panel>
                    <asp:Panel ID="divRight" runat="server" Visible="True" CssClass="art-layout-cell art-sidebar2 rightside"
                        SkinID="pnlPlain">
                        <asp:ContentPlaceHolder ID="rightContent" runat="server">
                        </asp:ContentPlaceHolder>
                            <portal:PageMenu id="PageMenu1" runat="server" UseArtisteer="true" UseTreeView="false" IsSubMenu="true" TreeViewShowExpandCollapse="false"  />
                    </asp:Panel>
                    </div>
                </div>
                        <asp:Panel ID="divAltContent2" runat="server" CssClass="altcontent2">
                        <asp:ContentPlaceHolder ID="altContent2" runat="server"></asp:ContentPlaceHolder>
                        </asp:Panel>

                <div class="cleared">
                </div>
                <div class="art-footer">
                    <div class="art-footer-t"></div>
                    <div class="art-footer-l"></div>
                    <div class="art-footer-b"></div>
                    <div class="art-footer-r"></div>
                    <div class="art-footer-body">
                        <div class="floatpanel">
                            <div class="floatpanel section" style="width:10%">
                                <ul>
                                    <li class="firstnav"><a href="/Default.aspx">Home</a></li>
                                    <li><a href="/downloads.aspx">Downloads</a></li>
                                    <li><a href="/promotions.aspx">Promotions</a></li>
                                    <li><a href="http://store.diditbetter.com/">Store</a></li>
                                    <li><a href="/Secure/Register.aspx">Register</a></li>
                                </ul>
                            </div>
                            <div class="floatpanel section" style="width:20%">
                                <ul>
                                    <li class="firstnav"><a href="/products.aspx">Products</a></li>
                                    <li><a href="/add2exchange-enterprise.aspx">Add2Exchange Enterprise</a></li>
                                    <li><a href="/add2exchange-standard.aspx">Add2Exchange Standard</a></li>
                                    <li><a href="/taskcontroller.aspx">TaskController</a></li>
                                    <li><a href="/didit.aspx">DidIT! CRM</a></li>
                                </ul>
                            </div>
                            <div class="floatpanel section" style="width:12%">
                                <ul>
                                    <li class="firstnav"><a href="http://support.diditbetter.com/">Support</a></li>
                                    <li><a href="http://support.diditbetter.com/forums.aspx">Forums</a></li>
                                    <li><a href="http://support.diditbetter.com/knowledgebase.aspx">Knowledgebase</a></li>
                                    <li><a href="http://support.diditbetter.com/guides.aspx">Guides</a></li>
                                    <li><a href="http://support.diditbetter.com/faq.aspx">FAQ</a></li>
                                </ul>
                            </div>
                            <div class="floatpanel section" style="width:13%">
                                <ul>
                                    <li class="firstnav"><a href="/company.aspx">Company</a></li>
                                    <li><a href="/contact.aspx">Contact</a></li>
                                    <li><a href="/blog.aspx">Blog</a></li>
                                    <li><a href="/news.aspx">News</a></li>
                                    <li><a href="/resellers">Resellers</a></li>
                                </ul>
                            </div>
                            <div class="floatpanel section" style="width:29%">
                                <iframe class="centered" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FDidItBettercom-Software%2F160122340676863&amp;width=250&amp;colorscheme=light&amp;show_faces=false&amp;stream=false&amp;header=false&amp;height=66" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:66px;margin-top:7px" allowTransparency="true"></iframe>
                            </div>
                            <div class="floatpanel section" style="width:16%">
                                <a class="eletter" href="/eletter/" title="Subscribe to our newsletter"></a>
                                <a class="rss" href="http://www.diditbetter.com/feeds.aspx" title="Click to view our available feeds"></a>
                                <a class="twitter" href="http://twitter.com/diditbetter" title="Follow us on twitter"></a>
                                <a class="linkedin" href="http://www.linkedin.com/company/1379976" title="Follow us on LinkedIn"></a>
                                <a title="Bookmark us on Digg" class="digg" href="http://digg.com/submit?url=http%3a%2f%2fsupport.diditbetter.com%2f&amp;title=DidItBetter+Support+-+Home"></a>
                                <a title="Bookmark us on Delicious" class="delicious" href="http://delicious.com/save?url=http%3a%2f%2fsupport.diditbetter.com%2f&amp;title=DidItBetter+Support+-+Home"></a>
                                <a title="Bookmark us on StumbleUpon" class="stumble" href="http://www.stumbleupon.com/submit?url=http%3a%2f%2fsupport.diditbetter.com%2f&amp;title=DidItBetter+Support+-+Home"></a>
                                <a class="youtube" href="http://www.youtube.com/user/diditbettersoftware" title="Watch the DidItBetter Channel on YouTube"></a>
                            </div>
                        </div>
                        <div class="art-footer-text">
                            <p>
                                <portal:WelcomeMessage ID="WelcomeMessage" runat="server" CssClass="sitemaplink" />
                                |
                                <portal:SiteMapLink ID="SiteMapLink1" runat="server" CssClass="sitemaplink" />
                                |
                                <portal:SkinPreview ID="SkinPreview1" runat="server"></portal:SkinPreview>
                                |
                                Copyright 2011 DidItBetter Software
                                |
                                <strong></strong>
                                |
                                <strong></strong>
                                |
                                <portal:UserProfileLink ID="UserProfileLink" runat="server" CssClass="sitemaplink" />
                           </p>
                        </div>
                    </div>
                </div>
                <div class="cleared">
                </div>
            </div>
            <div class="cleared">
            </div>
        </div>
        <div class="cleared">
        </div>
        <p class="art-page-footer">
            <br />
            <br />
        </p>
    </div>
    <div class="topnavwrap">
    <div class="topnav">
                        <ul>
                            <portal:MyPageLink ID="MyPageLink1" runat="server" RenderAsListItem="true" />
                            <portal:MailboxLink ID="MailboxLink1" 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>
                    </div>
                    </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">
                &nbsp;
            </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>
 

4/28/2011 10:42:23 AM
Gravatar
Total Posts 18444

Re: Get rid of PageMenu style="float:left;"

 <portal:SiteMenu ID="SiteMenu1" runat="server" UseTreeView="false" UseArtisteer="true"
                        HideMenuOnSiteMap="false" Direction="Horizontal" TopLevelOnly="false"></portal:SiteMenu>

You still have UseArtisteer="true" which is why the new settings don't work, that makes it use the legacy artisteer menu.

4/28/2011 11:00:02 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

Just to clarify, as I posted before, when that was removed the menus don't render as menus at all, just ordered lists.  Since I'm a live site, I couldn't leave it that way and so added it back in.

4/28/2011 11:37:12 AM
Gravatar
Total Posts 18444

Re: Get rid of PageMenu style="float:left;"

That means either you don't have the right stuff in theme.skin or it is not noticing your changes to theme.skin. Editing theme.skin "should" clear the cache but I have seen times when it doesn't, you may need to touch Web.config after editing theme.skin to clear the theme cache.

Hope it helps,

Joe

4/28/2011 11:43:15 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

Thanks Joe, I appreciate the pointers.  At this point I'm going to let it ride with the direct css override as you suggested before.

Thanks again, both Joes.

4/28/2011 11:47:07 AM
Gravatar
Total Posts 18444

Re: Get rid of PageMenu style="float:left;"

one more thing I thought of, you need to copy theme.skin stuff from a skin exported from the same version of Artisteer as your design was exported from, because the menu/treeview container div css class is different in different versions and if you don't have the right one it won't work.

12/1/2011 9:53:04 AM
Gravatar
Total Posts 73

Re: Get rid of PageMenu style="float:left;"

I'm revisiting this thread after a long while.  Looking back on it, I sure seem thick.  Sorry for my newbishness.  I now have the ability to do offline development with WebMatrix, which is fantastic and makes these things so much easier to play with.  Thanks guys for your persistence and for supporting great development tools.

I started a new skin for another site using the latest artisteer30 skins in 2.3.7.0.  Artisteer 3 of course.

In the process, I went a bit deeper on making layout.master's tree structure match that of what Artisteer generates.  I got everything on this new skin looking great, but my old friend the pesky float was there, of course.

Looking back at your article on The Trouble With ASP.NET Menu, I saw the explanation for the additional classes is the Javascript associated with the menus.  I tooled around with this a bit and found a solution to disable that Javascript, so I figured I'd share it here. Fortunately, it's very simple.  See what you think.

The additional attributes on the menu markup, including the style: floats, comes from the ASP.NET AJAX scripts made specifically for the menu.  According to the articles I read, the script in question is fed to the page as "ScriptResource.axd", along with a set of query parameters tagged on the end to identify the desired script, since there's more than one.

Looking through the two ScriptResource.axd references served by the new design, I found the one that was manipulating the menu markup.  So far, so good.

I also ran across two articles on how to override these scripts through markup in the layout.master file.  They are here and here.  Apparently, the scripts are housed in .NET assemblies and pulled at run-time, so you can't change those scripts directly but you can instead specify that ASP should pull them as plain .js files from a path on your site.  Here's the additional markup:

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" >
<Scripts>
<asp:ScriptReference name="MenuStandards.js" assembly="System.Web" path="MenuStandards.js"/>
</Scripts>
</asp:ScriptManager>

The MenuStandards.js script does all of the manipulation.  To see it, you can either save the source of this script from the page before you update layout.master or you can download it from Microsoft's CDN at http://ajax.aspnetcdn.com/ajax/4.0/1/MenuStandards.js.  In fact, you can see a listing of all the scripts available from the CDN at http://www.asp.net/ajaxlibrary/CDNAjax4.ashx.

If you add the MenuStandards.js file in the same directory as layout.master and use the above scriptreference markup, you'll achieve the same effect with the page as the original, however it will be fetching MenuStandards.js from the filesystem and not from ScriptResources.axd, thus giving you control over what the script can do.

There would be two approaches, the surgical and the brute force.  The surgical method would be to cut out the pieces that you don't want from MenuStandards.js and leave the rest.

While this would probably be advisable when you aren't sure what functionality is supplied by the script aside from the annoying floats, I went with the brute force approach and it seems fine for me so far.  The brute force approach is of course to just empty out the file.  The menu renders as Artisteer intended now, at least with this skin.

For the record, I tried various methods of avoiding having to have a blank .js file by, for example, not including the path attribute in the scriptreference, but I couldn't find a way to make that approach work.

Hope this helps someone else as well.

One more thing, the technique on how I found the script name (and assembly) in the first place, since you can't divine that from ScriptResource.axd.  I found an article here which told me you can completely override all of the .NET scripts using a  scriptmanager attribute ScriptPath, which forces it to look for all such ScriptResource.axd scripts on the filesystem.  Doing this led to a combination of exceptions and 404s on the scripts the page was looking for, all given by their regular name and filesystem path.  The path happens to include the assembly name.  You can download each of the named files from the MS CDN (link above), create their path and put them in there to get past one exception to see the next.  Voila.

You must sign in to post in the forums. This thread is closed to new posts.