Avisos
Vaciar todo

Insertar imagen en cabecera

13 Respuestas
3 Usuarios
0 Reactions
1,185 Visitas
Respuestas: 8
Active Member
Topic starter
 

Buenas tardes.

Según la captura adjunta, me gustaría saber si hay alguna manera de poder incorporar un .png y sustituir el icono del telefono que está dentro del recuadro en rojo.
También me gustaría saber cual es el .css que hay que tocar para cambiar el color del texto del "Llámanos ahora" que aparece en el mismo recuadro.

Muchas gracias.

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 17/08/2016 10:01 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Con respecto al tema de cambiar el icono, puedes agregar una imagen por html, tienes que modificar el siguiente archivo :

/themes/default-bootstrap/modules/blockcontact/nav.tpl

Ubica el código html de :

Eliminalo y reemplazalo por otro.

Saludos.


 
Respondido : 17/08/2016 10:33 pm
Respuestas: 8
Active Member
Topic starter
 

Buenos días.

Después de muchas pruebas modificando el siguiente codigo que me había indicado

... por este otro:

WhatsApp

... y viendo que no hacia nada... he optado por una prueba que podría ser reveladora, y no es otra que borrar todo el contenido de dicho archivo "nav.tpl"... y cual es mi sorpresa que el resultado sigue siendo el mismo... por lo que, tendrá que ser otro archivo el que haya que tocar.

PD: en todas las pruebas realizadas he borrado toda la caché del navegador, por lo que ese detalle queda descartado.

Muchas gracias.


 
Respondido : 25/09/2016 1:31 pm
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hola Carlos.

Modifica el código por el siguiente:

WhatsApp

Otra opción es modificarlo por css

.shop-phone i {
  background: rgba(0, 0, 0, 0) url("http://www.comercialimperial.com/tienda/img/whatsapp_icono.png") repeat scroll 0 0
}

Un saludo


 
Respondido : 25/09/2016 2:30 pm
Respuestas: 8
Active Member
Topic starter
 

He probado con la primera opción y nada... sigue sin modificarse nada.

En cuanto a la segunda, he modificado el "/themes/default-bootstrap/css/global.css" con el codigo que me ha indicado ..,. y tampoco... ¿cual es el CSS que puedo personalizar y que sobreescribe al resto?

Muchas gracias.


 
Respondido : 25/09/2016 2:50 pm
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hola Carlos.
Ok, prueba añadiendo lo siguiente en global.css.

.shop-phone {
    float: left;
    line-height: 18px;
    padding: 5px 0 10px;
    background: rgba(0, 0, 0, 0) url("http://www.comercialimperial.com/tienda/img/whatsapp_icono.png") repeat scroll 0 0;
}

Tendrás que modificar el tamaño del icono hasta que aparezca en las dimensione que necesites.

Un saludo


 
Respondido : 25/09/2016 3:02 pm
Respuestas: 8
Active Member
Topic starter
 

Buenas noches.

En las 2 imagenes adjuntas puede ver el resultado de sus 2 propuestas anteriores en cuanto a CSS:
icono_whatsapp_en_cabecera_2.jpg
.shop-phone i {
background: rgba(0, 0, 0, 0) url("http://www.comercialimperial.com/tienda/img/whatsapp_icono.png") repeat scroll 0 0
}

icono_whatsapp_en_cabecera_3.jpg
.shop-phone {
float: left;
line-height: 18px;
padding: 5px 0 10px;
background: rgba(0, 0, 0, 0) url("http://www.comercialimperial.com/tienda/img/whatsapp_icono.png") repeat scroll 0 0;
}

En ambas opciones (redimension a parte de las dimensiones del logotipo de whatsapp), el icono original del teléfono NO desaparece... y lo que quiero es sustituir dicho icono por el de Whatsapp (no ponerlo el nuevo icono como fondo).

Muchas gracias.


 
Respondido : 25/09/2016 9:40 pm
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hola Carlos.

Para eliminar el icono, prueba añadiendo lo siguiente:

.shop-phone .icon{
display:none;
}

Un saludo


 
Respondido : 26/09/2016 9:38 am
Respuestas: 8
Active Member
Topic starter
 

Buenos días.

El icono de la cabecera NO se oculta con el ultimo código que me comentó... ¿alguna otra idea para ocultarlo?

Muchas gracias.


 
Respondido : 04/10/2016 11:19 am
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hola Carlos, Buenos Días.

Supongo que lo que quieres es añadir el icono de ' whatsapp '
Estos icono son parte de la fuente ' fontawesome ', entre los muchos iconos de esta fuente se encuentra el de ' whatsapp '

Para añadirlo solo tienes que sustituir la linea:

Por esta:

El resultado es el siguiente:

Nota: Recuerda eliminar los códigos que te pasamos anteriormente.

Un saludo


 
Respondido : 04/10/2016 1:45 pm
Respuestas: 8
Active Member
Topic starter
 

Buenas...

En el archivo /themes/default-bootstrap/modules/blockcontact/nav.tpl he sustituido lo que me has dicho ... incluso con este otro codigo que he encontrado en algún foro:
aria-hidden="true">

... pero nada... sigue apareciendome el icono original del telefono

Te envío mi nav.tpl y mi global.css a ver que puedo tener mal y me cuentas....


 
Respondido : 04/10/2016 2:51 pm
Respuestas: 8
Active Member
Topic starter
 

Ya he encontrado la solución por si quiere dejarla documentada para otros casos

#En /themes/default-bootstrap/css/global.css hay que sustituir esta linea

.icon-phone:before {
content: ""; }

por esta otra:

.icon-phone:before {
content: "f232"; }


 
Respondido : 04/10/2016 3:03 pm
Pepe
 Pepe
Respuestas: 41129
Illustrious Member Admin
 

Hola Carlos.

Jejeje, que bien 😉 , me alegro que lo solucionaras, seguro que nos vendrá bien tanto a nosotros como a otros usuarios.

Gracias por compartirlo.

Cerramos el hilo

Un saludo


 
Respondido : 04/10/2016 3:18 pm