Alguien me da una mano con botonera top? [Solucionado]

nexxuseis · July 4, 2012

Me he bajado por ahi el modulo blocktopmenu, lo que quiero lograr es que tenga separadores

Yo lo hice directamente en la imagen de fondo, (muy artesanal de mi parte), yo quiero que sea con codigo para que cuando agregue un boton se vea automaticamente y no tenga que editar el fondo, el codigo es el siguiente...

blocktopmenu.tpl

		{if $MENU != ''}
	</div>
<!-- Menu -->
	<div class="sf-contener">
	  <ul class="sf-menu">
		{$MENU}
		{if $MENU_SEARCH}
		<li class="sf-search noBack" style="float:right">
		  <form id="searchbox" action="search.php" method="get">
			<input type="hidden" value="position" name="orderby"/>
			<input type="hidden" value="desc" name="orderway"/>
			<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query}{/if}" />
		  </form>
		</li>
		{/if}
	  </ul>
	<div class="sf-right"> </div>
	<script type="text/javascript" src="{$this_path}js/hoverIntent.js"></script>
	<script type="text/javascript" src="{$this_path}js/superfish-modified.js"></script>
	<link rel="stylesheet" type="text/css" href="{$this_path}css/superfish-modified.css" media="screen">
<!--/ Menu -->
	{/if}

Nose si hay que tocar .css o que, si me pudieran guiar un poco, Gracias

Edited July 11, 2012 by nexxuseis (see edit history)

shacker · July 11, 2012

si, es un css.

busca en el css del modulo que debe tener una clase para el li (lista)

y ahi le puedes agregar un

border-left:1px solid black

nexxuseis · July 11, 2012

Gracias Shacker, si me funciono pero con border-right, el color se lo cambio luego.

Una pregunta, alguna forma de que el ultimo separador no salga?, otra pregunta, si quiero usar una imagen en vez de un borde, lo que quiero es usar una imagen de 2px para darle un efecto hundido. Saludos, gracias

shacker · July 11, 2012

ahi podrias poner un

background :url(img/borde.png) right no-repeat

nexxuseis · July 11, 2012

Si!

Gracias Shacker. Un abrazo.

Edited July 11, 2012 by nexxuseis (see edit history)

nadie · July 11, 2012

Si!

Gracias Shacker. Un abrazo.

Si das el tema como solucionado, edita el titulo del tema y añade la palabra "Solucionado" al titulo, esto ayudara a mantener una mayor organización en el foro.

shacker · July 11, 2012

de nada. Saludos y un placer ayudarte. Por cierto quedo muy bonito. Puedes pegar e lcodigo aqui que pusiste para que le sea util a otros usuarios

nexxuseis · July 11, 2012

Este es todo el css de la botonera.


/*** ESSENTIAL STYLES ***/
.sf-contener {
 clear: both;
 margin: 10px 0;
 height: 35px;
 line-height: 35px;
 padding-left: 0px;
 font-family: Corbel;
 font-size: 16px;
 font-weight: bold;
 color: #308499;
}
.sf-right {
 margin-right: 0px;
 float: right;
 width: 0px;

}
.sf-menu, .sf-menu * {
   margin:            0;
   padding:        0;
   list-style:        none;
}
.sf-menu {
 float: left;
 width: 980px;
 height: 75px;
   line-height:    1.2;
   background: transparent url(../img/blocktopmenu.png) no-repeat;
}
.sf-menu ul {
   position:        absolute;
   top:            -999em;
   width:            10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
   width:            100%;
}
.sf-menu li:hover {
   visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
   float:            left;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 6px;
   padding-bottom: 10px;
   position:        relative;

   background : url(../img/separator.png) top right no-repeat

}
.sf-menu a {
   display:        block;
   position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
   left:            0;
   top:            2.7em; /* match top ul list item height */
   z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
   top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
   left:            10em; /* match ul width */
   top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
   top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
   left:            10em; /* match ul width */
   top:            0;
}

/*** DEMO SKIN ***/
.sf-menu {
   float:            left;
   margin-bottom:    0;
}
.sf-menu a {
 border: 0;
/*    border-left:    1px solid #fff;
   border-top:        1px solid #CFDEFF; */
   padding:         .75em 1em;
   text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
   color:            #ffffff;
}
.sf-menu li li {
   background:        #ebebed;/*#AABDE6;*/
}
.sf-menu li li li {
   background:        #ebebed;/*#9AAEDB;*/
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHoverForce,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
 background: transparent url(../img/blocktopmenu_hover.gif) repeat-x;
}
.sf-menu li.noBack:hover, .sf-menu li.sfHover.noBack, .sf-menu li.sfHoverForce.noBack,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
 background: inherit;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
   background:        #d0d3d8;
   outline:        0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
   padding-right:     2.25em;
   min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
   position:        absolute;
   display:        block;
   right:            .75em;
   top:            1.05em; /* IE6 only */
   width:            10px;
   height:            10px;
   text-indent:     -999em;
   overflow:        hidden;
   background:        url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
   top:            .8em;
   background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
   background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
   background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
   background:    url('../img/shadow.png') no-repeat bottom right;
   padding: 0 8px 9px 0;
   -moz-border-radius-bottomleft: 17px;
   -moz-border-radius-topright: 17px;
   -webkit-border-top-right-radius: 17px;
   -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
   background: transparent;
}
li.sf-search {
 background: inherit;
 float: right;
 line-height: 25px;
}
li.sf-search input {
 -moz-border-radius: 0 5px 5px 0;
 padding: 3px 0;
 padding-left: 20px;
 margin-top: 4px;
 background: #fff url(../img/search.gif) no-repeat left center;
}

Y solo modifique....

.sf-menu li {
float:   left;
padding-left: 8px;
padding-right: 8px;
padding-top: 6px;
padding-bottom: 10px;
position:  relative;
background : url(../img/separator.png) top right no-repeat
}

Edited July 11, 2012 by nexxuseis (see edit history)

shacker · July 11, 2012

muchas gracias. Seguro le viene bien a otros usuarios

Sign In

Alguien me da una mano con botonera top? [Solucionado]

Recommended Posts

nexxuseis

Link to comment

Share on other sites

shacker

Link to comment

Share on other sites

nexxuseis

Link to comment

Share on other sites

shacker

Link to comment

Share on other sites

nexxuseis

Link to comment

Share on other sites

nadie

Link to comment

Share on other sites

shacker

Link to comment

Share on other sites

nexxuseis

Link to comment

Share on other sites

shacker

Link to comment

Share on other sites

Browse

Activity

Go back to prestashop.com