iconos en la barra horizontal  

Página 1 / 2
 
SANDRO
 SANDRO
Estimable Member

Buenas tardes de nuevo.
Nos gustaría que en la barra del menú horizontal superior, en lugar de que apareciese "home" nos gustaría que apareciese un icono de una casa., y así sucesivamente con el resto de enlaces.
En lugar de envío, un icono de transporte...
Estamos utilizando la plantilla cilene, no se si eso influye.
Muchas gracias.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 03/09/2016 5:41 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Te refieres al menú de inicio en :
http://demopacktienda.webempresa.eu/prestashop_cilene/index.php

Puedes agregar iconos por CSS y FontAwesom que veo que ya carga el theme, por ejemplo el siguiente código define que para los items de menú se agregará iconos antes del enlace:

#block_top_menu .sf-menu li a:before{
	font-family:"FontAwesome";
	display:inline;
	margin-right:5px;
}

Luego este código de complemento agerga un icono de casa para el inicio es decir el li:nth-child(1), para el segundo seria li:nth-child(2), etc

#block_top_menu .sf-menu li:nth-child(1) a:before{
	content: "f015";
}

Estos códigos puedes agregarlos al final del archivo :
/themes/Cilene/css/customuser.css

Ahora bien de donde sacas estos valores de "f015", etc

Si buscas en tu archivo :
Contenido solo visible a usuarios registrados , por ejemplo busca .icon-home, verás igualmente que hay varios iconos ya definidos

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 03/09/2016 6:08 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

SANDRO
 SANDRO
Estimable Member

Muchisimas gracias por contestar tan rápido, pero por favor, si pudieras indicarme como hacer todos esos cambios...no tengo ni idea de programación.
Dime paso a paso como realizarlo.
Gracias.

ResponderCitar
Respondido : 03/09/2016 6:19 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Para que pruees que funciona ubica este archivo :
/themes/Cilene/css/customuser.css

Puedes usar el Administrador de Archivos de tu Cpanel para ubicar y editar este archivo, revisa :
https://www.webempresa.com/blog/administrador-de-archivos-de-cpanel-como-buscar-archivos.html

Al final de todo coloca el código CSS que te adjuntè:

#block_top_menu .sf-menu li a:before{
	font-family:"FontAwesome";
	display:inline;
	margin-right:5px;
}

#block_top_menu .sf-menu li:nth-child(1) a:before{
	content: "f015";
}

La última porción de código hace que aparezca un icono de casa en el inicio de tu sitio, verifica si aparece

Si quieres otro icono, sería un código similar al código final cambiando el 1 por el ítem de menú y el content, el content como te comenté lo puedes conseguir del archivo gobal.css , aqui busca clases con .icon- , por ejemplo .icon-home, etc.

Aunque no es exactamente lo mismo, este artículo te puede servir de referencia:
https://decodecms.com/insertar-una-fuente-de-iconos-en-wordpress/
Especialmente el punto 4 en donde se usa el content.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 03/09/2016 7:56 pm

Cursos Gratuitos WordPress

SANDRO
 SANDRO
Estimable Member

Hola de nuevo.
Te adjunto un pantallazo para mostrar hasta donde he llegado, pero no se cual es el siguiente paso.
Me lo puedes indicar?
Gracias.

ResponderCitar
Respondido : 03/09/2016 11:09 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Sandro,

Con el archivo que tienes seleccionado en el Administrador de Archivos tienes que abrirlo con el "Editor de Código" que ves arriba y al final del archivo abierto colocar los códigos indicados por Jhon.

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 04/09/2016 5:15 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

SANDRO
 SANDRO
Estimable Member

Buenos días
He seguido sus indicaciones pero me pregunta la codificación de caracteres que utilizar:
Vienen preseleccionado UTF-8, debo elegir esa o tiene que ser otra de la lista desplegable que viene?
Siento preguntar tanto pero al no saber, tengo miedo de estropear algo.
Gracias

ResponderCitar
Respondido : 04/09/2016 12:04 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Sandro, Buenos Días.

No te preocupes, tienes todo el derecho a preguntar lo que te haga falta, nosotros estamos parea eso 😉

debo elegir esa o tiene que ser otra de la lista desplegable que viene?
Por defecto siempre te aparecera UTF-8, no tienes que cambiar nada.

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 04/09/2016 1:42 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

SANDRO
 SANDRO
Estimable Member

Acabo de insertar el código pero sigue sin aparecer la casa en lugar de inicio.
Adjunto un pantallazo de la tienda, marcando donde quiero sustituir las letras por iconos y otro con la modificación que he hecho en el código.
Si es muy complicado lo dejo para no liar alguna.

ResponderCitar
Respondido : 04/09/2016 4:24 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

HOla

En tu captura de pantalla reciente veo que si lograste insertar el còdigo pero lo insertaste dentro de /* */

En CSS estos son comentarios, debes insertarlo fuera de estas etiquetas de comentarios, es decir borra /* y */, del inicio y final de tu còdigo

Luego para que veas los cambios refresca tu navegador, debería aparecer un icono de casa al costado del texto inicio

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 04/09/2016 4:54 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

SANDRO
 SANDRO
Estimable Member

Muchas gracias, ya aparece la casa junto al inicio. Mi intención es cambiar la palabra inicio, por la casa y asi sucesivamente con el blog, transporte y contacto.
Ese icono lo podría poner mas grande??
Y para el resto de palabras, como el blog, transporte y contacto, el archivo a modificar es el mismo?? Pongo el mismo código debajo del que he insertado variando lo que indique la imagen??
Gracias

ResponderCitar
Respondido : 04/09/2016 5:01 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Lo más práctico es poner un icono delante del texto de cada item de menú

Si quieres eliminar el texto inicio lo veo más complicado, el problema es por la estructura que se crea.

Ten en cuenta que por accesibilidad es bueno que se vea el texto de al opcion

Si quieres seguir repitiendo iconos a las otras opciones de menú debes usar este código repetidamente :

#block_top_menu .sf-menu li:nth-child(1) a:before{
	content: "f015";
}

Evidentemente debes variar el númer 1 por el número de item y el content, que representa el icono, anteriormente te había indicado en donde buscar el content, en tu archivo global.css

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 04/09/2016 5:22 pm

Cursos Gratuitos WordPress

SANDRO
 SANDRO
Estimable Member

Perfecto, asi lo hare, dejando también el texto. Pero me podrías indicar donde busco los iconos que me indicas abajo?? En el administrador de archivos, o en prestashop o donde??

"Si buscas en tu archivo :
Este texto está oculto para usuarios no registrados
view-source: http://demopacktienda.webempresa.eu/prestashop_cilene/themes/Cilene/css/global.css
, por ejemplo busca .icon-home, verás igualmente que hay varios iconos ya definidos"

ResponderCitar
Respondido : 04/09/2016 5:29 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Si colocas esta url en la barra de direcciones de tu navegador :
view-source: http://demopacktienda.webempresa.eu/prestashop_cilene/themes/Cilene/css/global.css

Verás que aparece código CSS, luego si buscas (ctrl + ), y colocas esto : .icon-glass (este es el icono inicial en el código)

Verás que cada .icon-xxx tiene un content diferente, es este content que debes usar, por ejemplo si quieres poner otro icono de un signo más, usarías .icon-plus-sign , entonces tu código quedaría como:

#block_top_menu .sf-menu li:nth-child(2) a:before{
	content: "f055";
}

date cuenta que el .icon-plus-sign tiene el content f055 en el archivo global.css

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 04/09/2016 7:05 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

SANDRO
 SANDRO
Estimable Member

Muchisimas gracias por todo.
Ya esta resuelto.
Adjunto pantallazo para que veais los resultados.
Pense que no seria capaz de hacerlo.
Gracias por vuestra ayuda.

ResponderCitar
Respondido : 04/09/2016 7:41 pm
Página 1 / 2

Por favor Iniciar Sesión o Registro