Menuitems color 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"
Locked
amygdela

Menuitems color problem

Post by amygdela »

Hello,

My client wants this:
Image

A menu with a separate color for each item. I've never had to do this before so I never thought about it, but is it possible to add a separate CSS class for every menu-item in the CMSMS menustructure?
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Menuitems color problem

Post by Dr.CSS »

Sure is look at this menu, products, for an idea, this requires a lot of coding but it can be done. http://blueoakom.com/

You have to start by putting the node id in the link string id}"  and  id}"  the a in front of it "a{$node->id}" is because browsers don't like numbers for this, the $node->id is the number of the page.

Once you have the node id you use it to style the links this will lead to having to code every link in the menu so be ready to write a lot of CSS... yours will have to do with borders, around the a and the li...

Just to give you an idea this is the code for that menu... this is long... funny how pasting code in here makes it not as neat as it was, moving things in and out...

      #menu
        a,
a:link
a:active, a:visited {color: #595959;
text-decoration: none;background: #9FC2FE ;
}
        #menu a:hover {
        color: #FFF;
text-decoration: underline;
        background: #9FC2FE ;
}
        #menu .menuparent{background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
        }
        #menu .menuparent:hover{background-image:url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
        }

        #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 ;
}
Top
amygdela

Re: Menuitems color problem

Post by amygdela »

wow, that actually seems very do-able. Thanks, I'll try to implement this!!!
Top
Locked

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