SOLPARTMENU - sub menu colors vs main colors.

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

Home All Forums

Home

Using DNN Platf...

Skins, Themes, ...

SOLPARTMENU - sub menu colors vs main colors.

6/3/2007 11:12 AM

Joe Yaya

Joined: 5/18/2007

Posts: 23

SOLPARTMENU - sub menu colors vs main colors.

Look at the following screenshot:

problem screenshot

Notice how the main menu items (such as admin and Test Page1 Name) are in the same color and the sub menu items (such as Host Settings and Portal). I am trying to figure out how to make them DIFFERENT colors. I can make different colors for the mouseover but not for the non mouseover items!

I've tried a good amount of things including ordering classes in the CSS file and adding class references to the SOLPARTMENU tag in the ascx file. I have also disabled any "MainMenu_" items which I think might might interfere in the default.css. Obviously I haven't found the solution yet.

URL: http://site421.mysite4now.net/richregister/dnn

Any help would be appreciated. Code is pasted below. Thanks! Joe.

My SOLPARTMENU in my ascx is defined as follows:

<table class="EchoMenu">
<tr>
<td><dnn:SOLPARTMENU runat="server" id="dnnSOLPARTMENU" rootmenuitembreadcrumbcssclass="MainMenu_RootMenuItemActive"
submenuitemselectedcssclass="MainMenu_SubMenuItemSelected"
userootbreadcrumbarrow="false"
leftseparatorbreadcrumb="<img src="images/richecho_menusel_lft.gif">"
rightseparatorbreadcrumb="<img src="images/richecho_menusel_rgt.gif">"
menubarheight="32"
menuborderwidth="0"
menuitemheight="28"
usearrows = "false"/></td>
</tr>
</table>

The CSS is as follows:

body
{
    position: absolute;
    background-image: url(images/richecho_topbar.gif);
    background-repeat: repeat-x;
    height: 33px;
    left: 0px;
    top: 0px ;
    width:100%;
    z-index:100 ;}

.header1 {
    /*background-image: url(images/richecho_up_lft.jpg) ;
    background-repeat: no-repeat;*/
    position: absolute;
    height: 129px;
    width: 155px ;
    left: 0px;
    top: 0px;
    z-index:-10 ;
    float: left;
    clear: right;}

    .EchoMenu
    {
        background-image:    url(images/richecho_menubar.gif);
        background-repeat: repeat-x;
        position: absolute;
        max-height: 32px;
        height: 32px;
        left: 0px;
        top: 130px;
        z-index:1;
        width:100%;
        float: left; }

    table.EchoBody
    {
        position: absolute;
        top: 162px;
        left: 0px;
    }

    table.EchoLogo
    {
        position: absolute;
        top: 15px;
        left: 15px;
                z-index:-8;
    }

        .MainMenu_MenuItemSel
        {
                font-family: Arial,Sans-Serif;
                color: #124355;
                background-color: transparent;
        }

.MainMenu_SubMenu {
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
    background-color: #eadeb2;
        color: #000000;
}

        .MainMenu_MenuItem
        {
                font-family: Arial,Sans-Serif;
                color: #ffffff
        }

        .MainMenu_RootMenuItemActive
    {
        background-image: url(images/richecho_menusel_ctr.gif);
        background-repeat: repeat-x;
        max-height: 28px;
        height: 28px;
        padding-right: 0px;
        padding-left: 0px;
        font-weight: bold;
        font-size: 12px;
        vertical-align: middle;
        font-family: Arial,Sans-Serif;
                color: #000000;
    }

.MainMenu_SubMenuItemSelected
{
color: #006633;
}

6/3/2007 11:21 PM

Joe Yaya

Joined: 5/18/2007

Posts: 23

Re: SOLPARTMENU - sub menu colors vs main colors.

Well, I've chan ged it up and I still have a similar problem. See screeshot below:

menu prob 2

Now the sub menu text color (pages, site settings, etc) is different from the non active main menu text item color (home, etc) but the tabbed text color (admin) is now the same as the non active main menu text item color. The frustration continues.

Relevant postions of my ASCX file and CSS are pasted below. Any help greatly appreciated. joe.

<dnn:SOLPARTMENU runat="server" id="dnnSOLPARTMENU"
rootmenuitemcssclass="MainMenu_RootMenuItem"
rootmenuitembreadcrumbcssclass="MainMenu_RootMenuItemActive"
submenuitemselectedcssclass="MainMenu_SubMenuItemSelected"
userootbreadcrumbarrow="false"
leftseparatorbreadcrumb="<img src="images/richecho_menusel_lft.gif">"
rightseparatorbreadcrumb="<img src="images/richecho_menusel_rgt.gif">"
menubarheight="32"
menuborderwidth="0"
menuitemheight="28"
usearrows = "false"/>

CSS:
.MainMenu_RootMenuItemActive
    {
    /* active bc background but no text color change - in original */
                font-family: Arial,Sans-Serif;
                color: #000000;
        background-image: url(images/richecho_menusel_ctr.gif);
        background-repeat: repeat-x;
        max-height: 28px;
        height: 28px;
        padding-right: 0px;
        padding-left: 0px;
                font-size: 9px;
        vertical-align: middle;


    }

        .MainMenu_MenuItemSel
        {
/* sub menu item selected - In original */
    cursor: pointer;
    cursor: hand;
    color: black;
    font-size: 9pt;
    font-style: normal;

                font-family: Arial,Sans-Serif;
                color: #ffffff;
                background-color: #25cb78;
                font-weight: normal;
        }

        .MainMenu_MenuItem
        {
       /* submenu not selected - in original*/
        cursor: pointer;
    cursor: hand;

    font-style: normal;
    border-left: white 0px solid;
    border-bottom: white 0px solid;
    border-top: white 0px solid;
    border-right: white 0px solid;
    background-color: Transparent;

                font-family: Arial,Sans-Serif, Helvetica;
                color: #000000;
                font-weight: normal;
                font-size: 9pt;
        }

.MainMenu_RootMenuItem TD
{
    /* root menu items not sel incl breadcrumb */
        cursor: pointer;
    cursor: hand;
    font-style: normal;
    border-left: white 0px solid;
    border-bottom: white 0px solid;
    border-top: white 0px solid;
    border-right: white 0px solid;
    background-color: Transparent;

                font-family: Arial,Sans-Serif, Helvetica;
                color: #ffffff;
                font-weight: normal;
                font-size: 9pt;
}

.MainMenu_SubMenu {
/* no text color effect - in original*/
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
    background-color: #eadeb2;
        color: #000000;
        font-weight: normal;
}

.MainMenu_SubMenuItemSelected
{
/* in original */
color: #006633;
font-weight: normal;
background-color: #d2b85b;
}

6/4/2007 5:53 AM

Tom Mortensen

Joined: 3/31/2004

Posts: 48

Re: SOLPARTMENU - sub menu colors vs main colors. Modified By Tom Mortensen on 6/4/2007 6:44:39 AM

Hi JoeYaya.

From your site it appears that you figured it out.

The Solpart menu is not a trivial thing to style, so remember to share your knowledge - others could face the same challenge and end up here, searching for a hint.

\tom

Edit: Formatting

6/4/2007 8:32 AM

Joe Yaya

Joined: 5/18/2007

Posts: 23

Re: SOLPARTMENU - sub menu colors vs main colors.

oneniner wrote

Hi JoeYaya.

From your site it appears that you figured it out.

The Solpart menu is not a trivial thing to style, so remember to share your knowledge - others could face the same challenge and end up here, searching for a hint.

\tom

Well actually not. I replied to my own mesage to give an update but the message never appeared.

Observe the following screenshot:

screen shot 2

Now a different but related problem appears. Now the main menu item text (Home. etc.) and the tabbed item text (Admin) are the same color while the sub menu items are another color. Utimately the problem is that I cannot seem to specify three different colors. (1) Main menu items not under tab (2) Main menu item under the tab and (3) sub menu items. Ultimately the problem is that they should all three be separate colors.

relevant source code snips of how I got the above are pasted below.

So again any help would be appreciated.

Joe.

ASCX:

CSS:

.MainMenu_RootMenuItemActive
    {
    /* active bc background but no text color change - in original */
                font-family: Arial,Sans-Serif;
                color: #000000;
        background-image: url(images/richecho_menusel_ctr.gif);
        background-repeat: repeat-x;
        max-height: 28px;
        height: 28px;
        padding-right: 0px;
        padding-left: 0px;
                font-size: 9px;
        vertical-align: middle;
    }

        .MainMenu_MenuItemSel
        {
/* sub menu item selected - In original */
    cursor: pointer;
    cursor: hand;
    color: black;
    font-size: 9pt;
    font-style: normal;

                font-family: Arial,Sans-Serif;
                color: #ffffff;
                background-color: #25cb78;
                font-weight: normal;
        }

        .MainMenu_MenuItem
        {
       /* submenu not selected - in original*/
        cursor: pointer;
    cursor: hand;

    font-style: normal;
    border-left: white 0px solid;
    border-bottom: white 0px solid;
    border-top: white 0px solid;
    border-right: white 0px solid;
    background-color: Transparent;

                font-family: Arial,Sans-Serif, Helvetica;
                color: #000000;
                font-weight: normal;
                font-size: 9pt;
        }

.MainMenu_RootMenuItem TD
{
    /* root menu items not sel incl breadcrumb */
        cursor: pointer;
    cursor: hand;
    font-style: normal;
    border-left: white 0px solid;
    border-bottom: white 0px solid;
    border-top: white 0px solid;
    border-right: white 0px solid;
    background-color: Transparent;

                font-family: Arial,Sans-Serif, Helvetica;
                color: #ffffff;
                font-weight: normal;
                font-size: 9pt;
}

.MainMenu_SubMenu {
/* no text color effect - in original*/
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
    background-color: #eadeb2;
        color: #000000;
        font-weight: normal;
}

.MainMenu_SubMenuItemSelected
{
/* in original */
color: #006633;
font-weight: normal;
background-color: #d2b85b;
}

6/4/2007 11:25 AM

Tom Mortensen

Joined: 3/31/2004

Posts: 48

Re: SOLPARTMENU - sub menu colors vs main colors.

Sorry. It's the #&%¤% forum - it's a known issue, but it's the first time it actually pulled that on me :(

Here goes with the CSS:

.MainMenu_MenuItem {
color: <color of all text in the menu>;
}

.MainMenu_RootMenuItem {
color: <color of the text in the menu bar. Overrules the above and voilá - two different colors>;
}.

.MainMenu_RootMenuItemSelected {
color: <color of the text in the menu bar on mouse-over>;
}

.MainMenu_MenuItemSel {
color: <color of the text in the drop-down menu on mouse-over>;
}

Hope this helps.

\tom

Page 1 of 3

Home

Using DNN Platf...

Skins, Themes, ...

SOLPARTMENU - sub menu colors vs main colors.

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)