Navbar

[Micogian]

Esatto, adesso mi pare sia a posto.

Adesso devi sostituire i pulsanti. Puoi anche lasciare quelli che si sono ora nel css, basta poi non usarli nel file html.
Nel css devi aggiungere delle righe simili a quelle relative agli attuali bottoni in maniera che poi nel file html li richiami.
Il tutto è molto semplice, deve esistere una immagine che viene richiamata dalla parola assegnata al pulsante e questa parola è la "classe" che verrà utilizzata nel file html del menu.

[paoloaccordion]

Ho fatto come descritto. ho aggiunto un bottone col nome facebook il link è ok ma non vedo l'animazione.

[Micogian]

E' probabile che tu non abbia inserito tutte le righe necessarie nel CSS.
Ad esempio, vedi il link "Forum". Per ogni volta che nel css c'è una riga che contiene "Forum" ci deve essere una analoga che contiene "Facebook".
Attenzione a come si aggiungono però, non alla fine ma prima dei valori messi tra parentesi graffe.
Inoltre, essendo una modifica sia al CSS che al template va aggiornata la cache di entrambe.

[paoloaccordion]

Codice: Seleziona tutto

* Button images  */
.but-home span	{ background: transparent none 0 0 no-repeat; }
.but-forum span { background: transparent none 0 0 no-repeat; }
.but-facebook span { background: transparent none 0 0 no-repeat; }
.but-menu_normal span { background: transparent none 0 0 no-repeat; }
.but-menu_plus span { background: transparent none 0 0 no-repeat; }

/* Big button dimensions */
#navbar li.but-home  { width: 66px; }
#navbar li.but-forum  { width: 59px; }
#navbar li.but-facebook  { width: 59px; }
#navbar li.but-menu_normal { width: 91px; }
#navbar li.but-menu_plus  { width: 91px; }

/* Big button images */
.but-home span	{ background-image: url("{T_THEME_PATH}/menu/img/but_home.gif"); }
.but-forum span { background: url("{T_THEME_PATH}/menu/img/but_forum.gif"); }
.but-facebook span { background: url("{T_THEME_PATH}/menu/img/but_facebook.gif"); }
.but-menu_normal span { background: url("{T_THEME_PATH}/menu/img/but_menu_normal.gif"); }
.but-menu_plus span { background: url("{T_THEME_PATH}/menu/img/but_menu_plus.gif"); }

/* Always active states */
body.home li.but-home span,
body.forum li.but-forum span,
body.facebook li.but-facebook span,
body.menu_normal li.but-menu_normal span,
body.menu_plus  li.but-menu_plus span  {
	background-position: 0 -64px;
}

/* Always hover for active states */
body.home #navbar li.but-home span:hover,
body.forum #navbar li.but-forum span:hover,
body.facebook #navbar li.but-facebook span:hover,
body.menu_normal #navbar li.but-menu_normal span:hover,
body.menu_plus #navbar li.but-menu_plus span:hover {
	background-position: 0 -32px;
}

/* @end */

[paoloaccordion]

Codice: Seleziona tutto

#navbar #searchbox {
	display: block;
	float: right;
	width: 165px;
	height: 30px;
	margin: 0px;
	background: url("{T_THEME_PATH}/menu/img/bg_search.gif") 0 0 no-repeat;
	position: static;
}

#navbar #searchbox fieldset {
	border: none;
	padding-top: 6px;
}

#navbar #searchbox input {
	width: 125px;
	height: 19px !important;
	margin-left: 28px;
	border: none !important;
	background-image: url("{T_THEME_PATH}/menu/img/search_back.gif");
	background-repeat: no-repeat;
	background-color: transparent !important;
	font-size: 1.1em !important;
	padding-top: 2px;
}

.headerbar{
	margin-bottom: 1px;
}

/* Navbar */
#navbar {
	height: 30px;
	clear: both;
	margin: 1px 0 5px 0;
	background: url("{T_THEME_PATH}/menu/img/bg_navbar.gif") repeat-x 0 0;
}

#navbar ul {
	list-style: none;
	display: block;
}

#navbar li {
	float: left;
}

/* Rollover state */
#navbar li {
	height: 30px;
	margin: 0;
	background-position: 0 -33px;
	display: block;
	position: relative;
	overflow: visible;
}

/* Rolloff state */
#navbar li a, #navbar li a:link {
	display: block;
	width: 100%;
	height: 31px;
	background-position: 0 -1px;
	position: relative;
	overflow: hidden;
}

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
/*#navbar li span a strong		{ display: none; }*/
/*#navbar li span a:hover	{ background-image: none; }*/
#navbar li span 			{ position: absolute; width: 100%; height: 100%; cursor: pointer; margin-top: -1px;}
#navbar li a:hover span 	{ background-position: 0 -32px; }
#navbar li a .hovering 		{ background-position: 0 -32px; }

/* Button images  */
.but-home span	{ background: transparent none 0 0 no-repeat; }
.but-forum span { background: transparent none 0 0 no-repeat; }
.but-menu_normal span { background: transparent none 0 0 no-repeat; }
.but-menu_plus span { background: transparent none 0 0 no-repeat; }

/* Big button dimensions */
#navbar li.but-home  { width: 66px; }
#navbar li.but-forum  { width: 59px; }
#navbar li.but-menu_normal { width: 91px; }
#navbar li.but-menu_plus  { width: 91px; }

/* Big button images */
.but-home span	{ background-image: url("{T_THEME_PATH}/menu/img/but_home.gif"); }
.but-forum span { background: url("{T_THEME_PATH}/menu/img/but_forum.gif"); }
.but-facebook span { background: url("{T_THEME_PATH}/menu/img/but_facebook.gif"); }
.but-menu_normal span { background: url("{T_THEME_PATH}/menu/img/but_menu_normal.gif"); }
.but-menu_plus span { background: url("{T_THEME_PATH}/menu/img/but_menu_plus.gif"); }

/* Always active states */
body.home li.but-home span,
body.facebook li.but-facebook span,
body.forum li.but-forum span,
body.menu_normal li.but-menu_normal span,
body.menu_plus  li.but-menu_plus span  {
	background-position: 0 -64px;
}

/* Always hover for active states */
body.home #navbar li.but-home span:hover,
body.forum #navbar li.but-forum span:hover,
body.facebook #navbar li.but-facebook span:hover,
body.menu_normal #navbar li.but-menu_normal span:hover,
body.menu_plus #navbar li.but-menu_plus span:hover {
	background-position: 0 -32px;
}

/* @group Submenu */

.sub-menu {
	background: transparent url("{T_THEME_PATH}/menu/img/bg_submenu_full.png") no-repeat 0 0;
	position: absolute;
	z-index: 999;
	padding: 10px 18px 0 14px;
	top: 25px;
	width: 400px;
	left: -20px;	
	overflow: visible;
	display: none;

}

.sub-menu-bottom {
	background: transparent url("{T_THEME_PATH}/menu/img/bg_submenu_full.png") no-repeat 0 bottom;
	bottom:-20px;
	clear:both;
	height:20px;
	left:0;
	position:absolute;
	width:400px;
}

.sub-menu-extra {
	padding-bottom: 10px;
}

.sub-menu-extra .sub-menu-bottom {
	background: transparent url("{T_THEME_PATH}/menu/img/bg_submenu_full.png") no-repeat 0 bottom;
	height: 45px;
	clear: both;
	width: 350px;
	position: absolute;
	bottom: -45px;
	left: 0;
	margin-top: 0;
	padding: 0 25px;
	padding-bottom: 0px;
	text-align: right;
}

#navbar .sub-menu-bottom a {
	border-top: 1px dashed #b2b8bd;
	display: block;
	padding-top: 10px;
	font-weight: bold;

}

#navbar .sub-menu-bottom a:hover {
	color: #105289;

}

#navbar li .sub-menu a {
	background: none;
	display:block;
	height:auto;
	overflow:hidden;
	position: static;
	width: auto;
	color: #FFF;

}

#navbar .sub-menu a:hover {
	color: #FFF;
	text-decoration: none;

}

.sub-menu ul {
	width: 180px;
	float: left;
	margin-left: 4px;
}

#navbar .sub-menu li {
	display: block;
	float:  none;
	height: auto;
	padding: 6px;
	padding-bottom: 8px;		
	margin-bottom: 4px;
}

#navbar li .sub-menu p {
	margin: 0;
	font-size: 10px;
}

/* External link image by jQuery UI */
#navbar li .sub-menu li:hover h4 a, #navbar .hover_ie h4 a, #navbar .hover_ie h4 a:hover {
	font-size: 13px;
	color: #105289;
	
}

#navbar li .sub-menu .last {
	margin: 0;

}

#navbar .sub-menu li:hover, .hover_ie {
	background: #c2eaff no-repeat;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 0px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0px 4px rgba(0,0,0,0.3);
	border:  1px solid #DDD;
	padding: 5px 5px 7px 5px;
}


#navbar .sub-menu li:hover a, #navbar .hover_ie p a, #navbar .hover_ie p a:hover {
	color: #333;
	text-shadow: none;
}

.on-top
{
	z-index: 10000;
}


#navbar .sub-menu li.external:hover {
	background-image: url("{T_THEME_PATH}/menu/img/bg_submenu_external.gif");
	background-position: 165px 5px;

}

/* @end */

[paoloaccordion]

Avevi ragione mancava qualche riga. Poi ho aumentato i px di facebook a 91
Grazie infinite!!!!!