Change AspNet-Menu-Leaf element style

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.
8/9/2010 3:36:05 PM
Gravatar
Total Posts 3

Change AspNet-Menu-Leaf element style

By default li.AspNet-Menu-Leaf element for site menu has "float:left" inline (in HTML file, not CSS). This messes me up since I want to center the menu.

Where/how can I change this? Thank you.

8/10/2010 1:05:01 PM
Gravatar
Total Posts 18439

Re: Change AspNet-Menu-Leaf element style

I've encountered a number of issues like this under .NET 4, it seems they have javascript that sets those inline styles on the menu.

The only solution I've found is in CSS to use the !important, like if you want to remove that float you could do this in CSS:

li.AspNet-Menu-Leaf { float:none !important; }

Hope it helps,

Joe

12/1/2010 1:26:40 PM
Gravatar
Total Posts 36

Re: Change Menu style

Hello Joe, i have been trying to customize my own menu. I have imported my skin from a working HTML i had created previously. I have managed to make the menu look the same way as i have in the html. I was wondering if there is anyway that i can create like a divTop similar to the divLeft, divCenter, divRight. That will let me create the menu bar by adding a ContentTemplate where i can have full control of the menu navigaton bar.

12/1/2010 1:51:04 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Change AspNet-Menu-Leaf element style

Hi, see this document about using more than the three content panels, which will let you have a top and bottom panel. I have to admit that your premise about placing a menu inside another element seems a bit suspect though. Are you creating a separate menu that will be on your site in addition to the site menus?

12/1/2010 1:55:40 PM
Gravatar
Total Posts 36

Re: Change AspNet-Menu-Leaf element style

No im just trying to use one menu, but have control over it, so i can customize it in a future. Like if i might want to add hover and active states to the tabs in my menu bar. Thats why i was thinking if i can add like a divTop  so i can include the menu in a plain html.

12/1/2010 2:34:24 PM
Gravatar
Total Posts 2253

Re: Change AspNet-Menu-Leaf element style

Hi,

I think you are getting confused as to how the menus work in mojoPortal. 

In order to apply style to a menu item on hover or for the current page, you need to use the styles I outlined to you in your post.

For instance, if you want the background color of the menu item for the current page to blue, you would have the following in your CSS.

li.AspNet-Menu-SelectedLeaf {background-color: blue;}

If you wanted the a menu item to be underlined when you hover over it, you would have the following in your CSS.

a.AspNet-Menu:hover{text-decoration: underline;}

The many skins included in mojoPortal have different types of menus, you can look at the stylemenu.css files in the skins to get ideas of how to manipulate the menus.

HTH,
Joe D.
 

12/1/2010 3:28:40 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Change AspNet-Menu-Leaf element style

It might be helpful to back up slightly too, since you seem to be confused about how the menu itself gets on the page. If you take a look at a layout.master file for a delivered skin, you will see the site's menu gets included via a portal element like this (from the layout.master of the andreasviklund-02 skin):

    <div id="topmenu">
    <portal:SiteMenu id="SiteMenu1" runat="server"
                UseTreeView="false"  HideMenuOnSiteMap="false"
                Direction="Horizontal" TopLevelOnly="true"></portal:SiteMenu>

    </div>
 

That places the menu in the same spot on each page (in this case, TopLevelOnly is used since a vertical menu will also be used on pages as needed for the second and lower options). Again, from the andreasviklund-02 skin, this is the code for the left content pane, with the vertical menu declared:

        <asp:Panel id="divLeft" runat="server" cssclass="leftside" visible="True" SkinID="pnlPlain">
            <portal:PageMenu id="PageMenu1" runat="server" UseTreeView="true" TreeViewShowExpandCollapse="true"  />
            <a id="startcontent"></a>
            <asp:contentplaceholder ID="leftContent" runat="server"></asp:contentplaceholder>
        </asp:Panel>

Once the menu(s) are placed in layout.master,  then as Joe said, you style the elements of the menu using CSS. You may want to review this document to gain a better understanding of how the mojoPortal layout.master file works, and how all the elements of the page are placed.

You really don't want to "take control" of a menu by putting it into an HTML element. The power of a CMS like mojoPortal is that the site builds your menu dynamically for you. You just tell your skin where it should be placed, sit back, and watch the magic happen. cool

Jamie

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