Is it possible to apply a custom theme to the secondary menu block that I have alongside the primary menu block in the SuckerFish menu region? I want to show it in reverse colors from the primary menu block.

CommentFileSizeAuthor
#3 menu blocks.jpeg60.31 KBBeernink
#1 sfmenuecolor.png41.2 KBkisugiai

Comments

kisugiai’s picture

kisugiai commented
StatusFileSize
new sfmenuecolor.png41.2 KB

of course you can

you have to find out how the menu its called in the suckerfish menu
eg.: menu-block-8

then take an new css file maybe custome.css put this in the litejazz/css folder add the two image files every were in my example its litejazz/images
and fill in the custome.file above code
after that enter in the theme or aperance settings at local content file css/custome.css and aktivate it go to performance and clear cache and if all right the it coult loks like at exsample picture.

#suckerfishmenu .menu-block-8 {
  background: #104a91 url(../images/menu-bg-custome.png) repeat-x;
}

#suckerfishmenu .menu-block-8 a {
  background: #104a91 url(../images/menu-bg-custome.png) repeat-x;
  color: #fff;
  border-right: #999 solid 1px;
}

#suckerfishmenu .menu-block-8 a:active,
#suckerfishmenu .menu-block-8 a:hover {
  background: darkblue url(../images/menu-bg-over-custome.png) repeat-x;
  border-right: #999 solid 1px;
}

/* second-level lists */

#suckerfishmenu .menu-block-8 ul.menu ul {
  background: #999;
}

#suckerfishmenu .menu-block-8 ul.menu li li a:link,
#suckerfishmenu .menu-block-8 ul.menu li li a:visited {
  color: #fff;
  background: darkblue;
  border-bottom: 1px #aaa solid;
  border-left: 1px #999 solid;
}

#suckerfishmenu .menu-block-8 ul.menu li li.expanded a {
	background: darkblue url(../images/menu_arrow.png) 100% 50% no-repeat;
}

#suckerfishmenu .menu-block-8 ul.menu li li.expanded a:active,
#suckerfishmenu .menu-block-8 ul.menu li li.expanded a:hover {
	background: #104a91 url(../images/menu_arrow.png) 100% 50% no-repeat;
}

#suckerfishmenu .menu-block-8 ul.menu li ul a:active,
#suckerfishmenu .menu-block-8 ul.menu li ul a:hover {
  background: #104a91;
}

#suckerfishmenu .menu-block-8 ul.menu li li.expanded ul.menu a {
  background: darkblue;
}

#suckerfishmenu .menu-block-8 ul.menu li li.expanded ul.menu a:active,
#suckerfishmenu .menu-block-8 ul.menu li li.expanded ul.menu a:hover {
  background: #104a91;
}

#suckerfishmenu .menu-block-8 ul.menu li li.expanded ul.menu li.expanded a {
	background: darkblue url(../images/menu_arrow.png) 100% 50% no-repeat;
}

#suckerfishmenu .menu-block-8 ul.menu li li.expanded ul.menu li.expanded a:active,
#suckerfishmenu .menu-block-8 ul.menu li li.expanded ul.menu li.expanded a:hover {
	background: #104a91 url(../images/menu_arrow.png) 100% 50% no-repeat;
}


#suckerfishmenu .menu-block-8 ul.menu li ul a {
  color: #fff;
}

#suckerfishmenu .menu-block-8 ul.menu li ul a:active,
#suckerfishmenu .menu-block-8 ul.menu li ul a:hover {
  color: #fff;
  background: #104a91;
}

keep care this is made on Drupal 6 i am not sure if its work on D7 becase it coult be thats the the css classes have diffrent nams

Beernink’s picture

Beernink commented

Hi Alyx, thank you very much for the detailed response! I will try it out tomorrow and let you know how I get on. Again - much appreciated!

Beernink’s picture

Beernink commented
StatusFileSize
new menu blocks.jpeg60.31 KB

I found an easier way to do it, which is to use the Block Theme functionality. I used your code example to apply it to the couple of themes that I then applied to the two menu blocks. See attached image for final result. The donatemenublock theme puts a red background on the Donate menu item (which has its own menu), and the secondmenublock flushes the secondary menu items right.

#suckerfishmenu .secondmenublock  {
	background: #EF7D0B;
	color: white; 
	float: right;
	margin-right: 5px;
}

#suckerfishmenu .donatemenublock  {
	background: red;
	color: white; 
}
kisugiai’s picture

kisugiai commented

well i have blocktheme funtionality in the theme but i am not sure what what will happents with blocktheme.

the flushes you can try to use a float style
the second point is, the menu order is dependent from block structure

btw.

you site with zen theme locks nice :)

a little hint if you have all settings correctly you shoud use the css aggreation

kisugiai’s picture

kisugiai commented
Status: Active » Closed (fixed)