By hilrap on
Hi there,
since my css skills ain't all too brilliant, help would be muuuuuch appreciated ?
I need to ad to my horizontal navigation a rollover for secondary links, similar in style to: http://www.lifestylefood.com.au/
CuteMenu is up and running, but theming it really seems a challenge. Where can i get rid of the "title" displayed before menu ("CuteMenu: primary-links")?
Could anyone advise how to implement current style of primary links into cutemenu css?
At my current drupal theme I'm using the following css code for my horizontal navigation:
.pr-menu {overflow:hidden; padding:0 0 0 13px;}
ul.primary-links {margin:0px; padding:0; list-style:none; text-align:center;}
ul.primary-links li { float:left; padding:0px 2px 0px 0px; background:url(images/bg-li.gif) no-repeat right 0}
ul.primary-links li a { color:#000; text-decoration:none; font-size:13px; display:block; padding:19px 0px 15px 0px; font-weight:bold; background:url(images/bg-li2.gif) top repeat-x; width:118px;}
ul.primary-links li.active a
ul.primary-links li a:hover { background:#FFFFFF; color:#23468b}
ul.primary-links li.first a { background:url(images/bg-li-first.gif) top left no-repeat;}
ul.primary-links li.last a { background:url(images/bg-li-last.gif) top left no-repeat;}
ul.primary-links li.first a.active
ul.primary-links li.first a:hover { background:url(images/li-first-active.gif) top left no-repeat; color:#23468b}
ul.primary-links li.last a.active
ul.primary-links li.last a:hover { background:url(images/li-last-active.gif) top left no-repeat; color:#23468b}
ul.primary-links li.last { padding:0; background:none;}
The default Css for CuteMenu reads the following:
.cutemenu-bar {
clear: both;
display: block;
}
.cutemenu-baritem {
float: left;
display: block;
margin: 0px 20px;
padding: 0px;
height: 30px;
color: #eeeeee;
}
.cutemenu-active {
color: white;
}
.cutemenu-baritem-left {
display: block;
margin: 0;
padding: 0 0 0 11px;
background: url(images/green-button-left.png) no-repeat 0 0;
}
.cutemenu-baritem-right {
display: block;
margin: 0;
padding: 0 11px 0 0;
background: url(images/green-button-right.png) no-repeat 100% 0;
}
.cutemenu-baritem-content {
display: block;
background: url(images/green-button-center.png) repeat-x 0 0;
margin: 0px;
padding: 4px 9px 0;
height: 30px;
font-size: 15px;
}
.cutemenu-baritem-content .cutemenu-link {
display: block;
color: #eeeeee;
text-decoration: none;
}
.cutemenu-baritem-content .cutemenu-link:hover {
display: block;
color: white;
text-decoration: none;
}
.cutemenu-baritem a {
display: block;
}
/* By default, hide the sub-menus, these are dropdowns */
.cutemenu-dropdown-wrapper {
position: absolute;
margin: 5px 0 0 0;
display: none;
z-index: 10;
text-align: left;
}
.cutemenu-dropdown-topleft {
background: url(images/green-dropdown-topleft-square.png) no-repeat 0 0;
}
.cutemenu-dropdown-top {
margin-left: 11px;
margin-right: 11px;
padding-top: 11px;
background: url(images/green-dropdown-top.png) repeat-x 0 0;
}
.cutemenu-dropdown-topright {
background: url(images/green-dropdown-topright.png) no-repeat 100% 0;
}
.cutemenu-dropdown-bottomleft {
background: url(images/green-dropdown-bottomleft.png) no-repeat 0 100%;
}
.cutemenu-dropdown-bottom {
margin-left: 11px;
margin-right: 11px;
padding-top: 11px;
background: url(images/green-dropdown-bottom.png) repeat-x 0 100%;
}
.cutemenu-dropdown-bottomright {
background: url(images/green-dropdown-bottomright.png) no-repeat 100% 100%;
}
.cutemenu-dropdown-left {
margin: 0px;
padding: 0px;
}
.cutemenu-dropdown-content {
display: block;
background: #cfec93 url(images/green-dropdown-center.png) repeat-x 0 0;
min-height: 300px;
border-left: 1px #797979 solid;
border-right: 1px #797979 solid;
margin: 0px;
padding: 5px 10px;
}
.cutemenu-title {
padding: 5px 0;
height: 20px;
font-size: 12px;
font-weight: bold;
font-style: italic;
text-align: center;
border-bottom: 1px #e0eecc solid;
color: #000066;
}
.cutemenu-subitem {
padding: 5px 0;
font-size: 10px;
white-space: nowrap;
border-bottom: 1px #e0eecc solid;
}
.cutemenu-subitem-active {
background: url(images/white-gradient.png) repeat-x 0 0;
}
.cutemenu-subitem a {
display: block;
margin: 0;
padding: 0 10px;
color: black;
height: 20px;
font-weight: bold;
text-decoration: none;
}
.cutemenu-subitem a:hover {
color: #884400;
}
.cutemenu-dropdown-header {
padding: 0px;
margin: 0px;
min-height: 50px;
}
.cutemenu-dropdown-header p {
padding: 0px;
margin: 0px;
}
.cutemenu-dropdown-footer {
padding: 0px;
margin: 0px;
}
.cutemenu-dropdown-footer p {
padding: 0px;
margin: 0px;
}
Any help would really be great!!
Kind regards,
hilrap
Comments
This part i could
This part i could solve:
..removed the title from row 77 within the cutemenu.module file !!
####################################################
Now my difficulties with the CSS: if I apply default structure from CuteMenu, it seems I have to display buttons that all look alike. My left and right buttons however are slightly rounded (at top corner), whereas the middle buttons are equal... Anyone a solution how to change the CSS?
No one here with a sound
No one here with a sound knowlege of this module?