paste the code of the rendered page then tell me what color you want for what page.
mark
'ellnav-vert' menu problem
Re: 'ellnav-vert' menu problem
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]
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]
Re: 'ellnav-vert' menu problem
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
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