Modulo news pro gk4 con virtuemart  

Hola Enrique

Lo que puedes hacer es subir un poco el botón , pero colocar el precio al costado del nombre no creo que sea lo correcto ya que hay nombres que ocupan toda la línea.

Para subir el botón debes agregar un margen top negativo, tal como se muestra en la pantalla adjunta de ejemplo usando el firebug (complemento del navegador firefox), allí te indica el archivo y la línea a agregar.

Saludos.

Buenas tardes Jhon,

He seguido tus indicaciones, he estado modificando algunos archivos, ahora se me queda así:

Lo que me falta es ajustar el texto "agregar al carro" en el fondo rojo de la imagen sin que me pise el carrito...
o también se puede poner más ancha la imagen, pero si la pongo mas ancha se me vuelve a ir abajo.

Saludos, Enrique P.

Hola Enrique,

según tienes ubicado el botón de añadir al carrito, veo que lo mejor sería que quitaras la imagen de fondo del carrito que aparece en los botones. De lo contrario, tendrías que establecer un tamaño de texto para el botón demasiado pequeño.

Prueba a añadir a tu hoja de estilos esta regla CSS:

.addtocart-button{
background-image: none !important;
background-color: #751003 !important;
}

Lo que hace es quitar la imagen de fondo, y establecer el color de fondo del botón al rojo granate que tienes en la web.

Espero que te sirva.

Saludos,
Rafa Noguera

Buenas tardes Rafa,

Así me sale ahora con el código que me añadido :

y si optamos por poner el botón un poco más largo?, o es mejor solución la que me comentas arriba?

Saludos, Enrique P.

Hola Enrique,

examinando con Firebug la web, no veo aplicadas las reglas css a los elementos, por lo que entiendo que no has aplicado las reglas a la hoja de estilos apropiada.

Aplica los estilos a la siguiente hoja de estilos de tu web:

templates/gk_yourshop/css/vm.css

Saludos,
Rafa Noguera

Buenas tardes Rafa,

Las acabo de aplicar al archivo vm.css y la he quitado de donde las apliqué que fue en template.css, pero me sigue saliendo igual.

Se puede poner el botón más grande?, o no es una buena solución?

Saludos, Enrique P.

Hola,

Para que funcionen los estilos que te ha indicado Rafa tendrías que probar a editar editar el archivo templates/gk_yourshop/css/style2.css y, previa copia de seguridad del archivo, borrar el siguiente código:

span.addtocart-button input.addtocart-button {background: url("../images/style2/cart_btn.png") no-repeat scroll left -1px transparent !important;}

Ten en cuenta que este cambio te afectará al botón de añadir al carro en todos los sitios donde se muestre, incluido en la ficha de producto.

Hola Pablo,

Ya me funcionó, ahora para distinguir un poco cuando alguien ponga el ratón encima de "agregar al carro", he añadido las algunos estilos, son los que te señalo en la siguiente imagen :

pero para darle un nuevo color de fondo al botón cuando se esté encima de el, la etiqueta background-color no me está funcionando como ves, no me la coge.

Tengo que poner un background-image?

Saludos, Enrique P.

Hola Enrique

Para que cambie de color cuando pasa el mouse debes usar el hover, prueba con un código similar al siguiente cambiando blue por el color deseado.

span.addtocart-button:hover , input.addtocart-button:hover{
	background:blue!important;
}

Saludos.

Buenas tardes Jhon,

Me funciona correctamente, pero he puesto las letras en mayúsculas con la siguiente etiqueta :

text-transform: uppercase;

y ahora el botón se me desconfigura pero solo en los productos del "Inicio", lo he puesto para que se vea mejor el botón.

Saludos, Enrique P.

Hola Enrique

Veo que se desconfigura por que los textos que son muy largos:

"Agregar a carro"

En la imagen adjunta verás que si se quita el artículo "a" se acomoda, la flecha azul, si no hay precio si se ve por que tiene mucho espacio, flecha verde.

Finalmente la flecha roja muestra todo el texto "Agregar a carro" , por que es muy largo se baja al siguiente renglón.

En este punto tienes dos opciones, o reducir el tamaño del precio o reducir el texto o el tamaño de letra de "Agregar a carro"

Saludos.

Buenas tardes Jhon,

Podemos reducir el texto transformado en mayúsculas?

Saludos, Enrique P.

Hola Enrique,

Quitando el parámetro CSS que te adjunto en captura se debería solucionar el problema:

Saludos.

Buenas Jhonny,

Comenté lo que me dijiste "letter-spacing", y añadí la transformación en mayúsculas pero no se soluciona...

Esta bien realizado no?

Saludos, Enrique P.