'ellnav-vert' menu problem

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: 'ellnav-vert' menu problem

Post by Dr.CSS »

paste the code of the rendered page then tell me what color you want for what page.

  mark
chipus

Re: 'ellnav-vert' menu problem

Post by chipus »

hi Mark,

The attachment below is the rendered page

The color of the menu is ok now.

As i said, i'd like to have:
      The current page will become RED
      If the current page have no children, then its parent will have the color RED

What should i do with my stylesheet then

Thx a lot , mark



[attachment deleted by admin]
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: 'ellnav-vert' menu problem

Post by Dr.CSS »

when you post back paste the code of the rendered page into this edit window, then tell me what color you want for what page.
like so,,, 99.9% of this is the CSS for the menu here www.bluoakom.com/ that menu has class' and a class'as you will see very handy for styling every last thing,,, here goes,,

/* LINKS */
        #contenthead
a,
a:link
a:active, a:visited {color: #222;
text-decoration: none;background-color:#6F8C5A;
}
        #contenthead
        a:hover {color: #fff;
text-decoration: underline;background:#6F8C5A;
}
        .breadcrumbs
a,
a:link
a:active, a:visited {color: #222;
text-decoration: none;background-color:none;
}
        .breadcrumbs
        a:hover {color: #fff;
text-decoration: underline;background:#6F8C5A;
}
        #flat
a,
a:link
a:active, a:visited {color: #3981FE;
text-decoration: none;background:#FFF;
}
        #flat
        a:hover {color: #595959;
text-decoration: underline;background:#FFF;
}
        .NewsSummary
a,
a:link
a:active, a:visited {color: #3981FE;
text-decoration: none;
}
        .NewsSummary
        a:hover {color: #595959;
text-decoration: underline;
}

#main a,
a:link
a:active, a:visited {color: #595959;
text-decoration: underline;background:#FFF;
}
#main a:hover {color: #595959;
text-decoration: none;background:#FFF;
}

        #menu #a15
        a,
a:link
a:active, a:visited {color: #595959;
text-decoration: none;background: #9FC2FE ;
}
        #menu #a31
        a,
a:link
a:active, a:visited {color: #595959;
text-decoration: none;background: #9FC2FE ;
}
        #menu #a19
        a,
a:link
a:active, a:visited {color: #595959;
text-decoration: none; background-image: url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a24
        a,
a:link
a:active, a:visited {color: #595959;
text-decoration: none;background: #9FC2FE;
}
        #menu #a25
        a,
a:link
a:active, a:visited {color: #595959;
text-decoration: none;background: #9FC2FE;
}
        #menu #a32
        a,
a:link
a:active, a:visited {color: #595959;
text-decoration: none;background: #9FC2FE;
}
        #menu #a34
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background:#d19052;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a13
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background:#d19052;
        }
        #menu #a35
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background:#d19052;
        }
        #menu #a22
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background:#d19052;
        }
        #menu #a17
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background:#d19052;
        }
        #menu #a36
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background:#d19052;
        }
        #menu #a38
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background:#d19052;
        }
        #menu #a43
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #8bccf0 ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
        }

        #menu #a44
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #8bccf0 ;
}
        #menu #a45
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #8bccf0 ;
}
        #menu #a46
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #8bccf0 ;
}
        #menu #a42
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #955300 ;
}
        #menu #a40
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #a4a6ed ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a41
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #a4a6ed ;
}
        #menu #a37
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #2a8c92 ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a33
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #2a8c92 ;
}
        #menu #a30
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #9FC2FE ;
}
        #menu #a47
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #AEB0B2 ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a48
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #AEB0B2 ;
}
        #menu #a49
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #AEB0B2 ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a50
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #AEB0B2 ;
}
        #menu #a51
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #AEB0B2 ;
}
        #menu #a52
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #AEB0B2 ;
}
        #menu #a53
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #9FC2FE ;
}
        #menu #a39
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #9FC2FE ;
}
        #menu #a59
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #AEB0B2 ;
}
        #menu #a58
        a,
a:link
a:active, a:visited {color: #000;
text-decoration: none;background: #AEB0B2 ;
}

        /* Hover */
#menu #a15
        :hover {
        color: #FFF;
text-decoration: underline;
        background: #9FC2FE ;
}
        #menu #a31
        :hover {
        color: #FFF;
text-decoration: underline;
        background: #9FC2FE ;
}
        #menu #a19
        :hover {
        color: #FFF;
text-decoration: none;
        background: #9FC2FE ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a24
        :hover {
        color: #FFF;
text-decoration: underline;
        background: #9FC2FE ;
}
        #menu #a25
        :hover {
        color: #FFF;
text-decoration: underline;
        background: #9FC2FE ;
}
        #menu #a32
        :hover {
        color: #FFF;
text-decoration: underline;
        background: #9FC2FE ;
}
        #menu #a34
        :hover {
        color: #FFF;
text-decoration: none;
        background: #b56e2b ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a22
        :hover {
        color: #FFF;
text-decoration: none;
        background: #b56e2b ;
}
        #menu #a17
        :hover {
        color: #FFF;
text-decoration: none;
        background: #b56e2b ;
}
        #menu #a13
        :hover {
        color: #FFF;
text-decoration: none;
        background: #b56e2b ;
}
        #menu #a35
        :hover {
        color: #FFF;
text-decoration: none;
        background: #b56e2b;
}
        #menu #a36
        :hover {
        color: #FFF;
text-decoration: none;
        background: #b56e2b ;
}
        #menu #a38
        :hover {
        color: #FFF;
text-decoration: none;
        background: #b56e2b;
}
        #menu #a43
        :hover {
        color: #FFF;
text-decoration: none;
        background: #64a7e8 ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a44
        :hover {
        color: #FFF;
text-decoration: none;
        background: #64a7e8 ;
}
        #menu #a45
        :hover {
        color: #FFF;
text-decoration: none;
        background: #64a7e8 ;
}
        #menu #a46
        :hover {
        color: #FFF;
text-decoration: none;
        background: #64a7e8 ;
}
        #menu #a42
        :hover {
        color: #FFF;
text-decoration: none;
        background: #6b3d00 ;
}
        #menu #a40
        :hover {
        color: #FFF;
text-decoration: none;
        background: #6970db ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a41
        :hover {
        color: #FFF;
text-decoration: none;
        background: #6970db ;
}
        #menu #a37
        :hover {
        color: #FFF;
text-decoration: none;
        background: #257A7E ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a33
        :hover {
        color: #FFF;
text-decoration: none;
        background: #257A7E ;
}
        #menu #a30
        :hover {
        color: #FFF;
text-decoration: none;
        background: #9FC2FE ;
}
        #menu #a47
        :hover {
        color: #FFF;
text-decoration: none;
        background: #939598 ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a48
        :hover {
        color: #FFF;
text-decoration: none;
        background: #939598 ;
}
        #menu #a49
        :hover {
        color: #FFF;
text-decoration: none;
        background: #939598 ;
        background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
        #menu #a50
        :hover {
        color: #FFF;
text-decoration: none;
        background: #939598 ;
}
        #menu #a51
        :hover {
        color: #FFF;
text-decoration: none;
        background: #939598 ;
}
        #menu #a52
        :hover {
        color: #FFF;
text-decoration: none;
        background: #939598 ;
}
        #menu #a58
        :hover {
        color: #FFF;
text-decoration: none;
        background: #939598 ;
}
        #menu #a59
        :hover {
        color: #FFF;
text-decoration: none;
        background: #939598 ;
}
        #menu #a53
        :hover {
        color: #FFF;
text-decoration: none;
        background: #9FC2FE;
}
        #menu #a39
        :hover {
        color: #FFF;
text-decoration: none;
        background: #9FC2FE ;
}

/* END LINKS */

think it's long enuf? yea it's one CSS called "Links" all the #a39 are made by making your own menu in  Layout » Menu Manager second tab 'File Templates' clik the dbl. paper icon left hand side, it will ask you to name it 'something' 'submit' it goes to the first tab now you can edit it CSS/Template style, every where you see id}" id}" you get of course <a id="a39" and <li id="a39" with those you can style away, warnig once you start you have to go all the way, if you have a long menu,, parents and kids just keep giving colors away,

  mark
Locked

Return to “Layout and Design (CSS & HTML)”