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

hilrap’s picture

This part i could solve:

Where can i get rid of the "title" displayed before menu ("CuteMenu: primary-links")?

..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?

hilrap’s picture

No one here with a sound knowlege of this module?