Insertar imagen en cabecera  

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.

Buenos días.

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

... por este otro:

... 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.

Hola Carlos.

Modifica el código por el siguiente:

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

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.

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

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.

Hola Carlos.

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

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

Un saludo

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.

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

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....

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"; }

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