(SOLUCIONADO) Inicio de sesión con un candado

[Jessy]

Hola a todos!

 

He buscado pero no encuentro a nadie que haya preguntado lo mismo. En mi plantilla, para iniciar sesión en la tienda, tienes que llevar el ratón encima de un candado, y éste especifica debajo "entrar" o "salir" en sus respectivos casos. Pero no lo veo claro para los clientes, y quisiera poner un texto que sustituya ese candado.

 

¿Podéis ayudarme? Gracias!

 

Edited July 8, 2014 by Jessy (see edit history)

[JuDrYa]

Se puede acceder a la pagina ¿?

[Jessy]

La verdad es que prefería que no, la tengo cerrada terminando los últimos detalles.

 

Pero creo que es imagen, porque me con el firebug me pone que es un icono. No sé si podría cambiarlo por un texto...

[JuDrYa]

Que theme usas?

[Jessy]

Compré hace unos meses el theme "responsive cigarette".

[Jessy]

Si el cliente no inicia sesión, aparece el candado, y tienes que posar el ratón sobre él para que te indique que ahí inicias sesión. Aparece así:

 

 

¿Puede ayudarme alguien? 

[JuDrYa]

Modifica el css y coloca un botón del tipo...

 

 

y otro para conectar.

[Jessy]

¿Te refieres a un icono o imagen como está ahora? (pero más grande o con texto para que se vea mejor) ¿Es eso?

 

¿Cómo lo modifico en el css? 

Edited July 3, 2014 by Jessy (see edit history)

[Jessy]

Quería solucionarlo modificando el icono del candado, pero no lo encuentro! Con el firebug, veo esto "<span><i class="icon-unlock"></i></span>" pero lo busco y no lo encuentro. ¿Esto es normal?

Edited July 8, 2014 by Jessy (see edit history)

[AlexProgramador]

En firebug te indica donde está ese código, si dejas el ratón encima de pone la ruta completa. Allí podrás hacer los cambios que quieras. 

 

Otra opción es buscar donde están esas imágenes que tienes actualmente y cambiarlas a lo bruto por las tuyas (con el texto que quieres) y ponerles el mismo nombre, pero es muy sucio :S

[Jessy]

Pues o no lo veo, o no está, porque por más que busco no veo el icono en la carpeta de img o icon, ni veo el nombre del icono en el firebug. Si pongo el ratón encima sí veo la ruta, pero no sé qué nombre tiene para poder cambiarlo. 

[JuDrYa]

Sin ver el tema original tuyo, intentare ayudarte.

Haz copia de los archivos que vayas a modificar, por si acaso poder restaurar.

Busca en tu .css

.blockuserinfo 
.logout, 
.blockuserinfo .login 
{
    background: url(" LA RUTA DE AQUI NO SE CUAL ES") repeat-x scroll 0 0 transparent;  --- RUTA DE TU IMAGEN
    border-radius: 3px;
    float: left;
    height: 21px;
    text-align: center;
    text-transform: uppercase;
    width: 21px; --- MODIFICA DEPENDIENDO DEL ANCHO DE TU IMAGEN
}

Para subir o bajar la imagen, para centrarla, modifica...

.blockuserinfo {
    position: absolute;
    right: 96px; --- MENOS VALOR IMAGEN MAS A LA DERECHA Y MAS VALOR A LA IZQUIERDA
    top: 30px; --- MENOS VALOR LA IMAGEN SUBE Y MAS VALOR LA IMAGEN BAJA
}

Se montara con el carrito de la izquierda, por lo que tendras que desplazar el carrito hacia la izquierda...

Para mover el carrito busca...

#header_user 
{
    position: absolute;
    right: 131px; --- MENOS VALOR IMAGEN MAS A LA DERECHA Y MAS VALOR A LA IZQUIERDA
    top: 32px; --- MENOS VALOR LA IMAGEN SUBE Y MAS VALOR LA IMAGEN BAJA
    z-index: 99;
}

Ve haciendo pruebas, pero siempre respaldando los originales.

[Jessy]

Sin ver el tema original tuyo, intentare ayudarte.

Haz copia de los archivos que vayas a modificar, por si acaso poder restaurar.

Busca en tu .css

.blockuserinfo 
.logout, 
.blockuserinfo .login 
{
    background: url(" LA RUTA DE AQUI NO SE CUAL ES") repeat-x scroll 0 0 transparent;  --- RUTA DE TU IMAGEN
    border-radius: 3px;
    float: left;
    height: 21px;
    text-align: center;
    text-transform: uppercase;
    width: 21px; --- MODIFICA DEPENDIENDO DEL ANCHO DE TU IMAGEN
}

 

 

Aquí me sale esta ruta: 

.blockuserinfo .logout, 
.blockuserinfo .login {
	background: url("../img/header_lang.png") repeat-x scroll 0 0 transparent;
    float: left;
    height: 21px;
    text-align: center;
    text-transform: uppercase;
    width: 21px;
    border-radius: 3px;
} 

Pero abro esa imagen (header_lang.png y no es el candado, es una barrita negra. ¿Es normal eso?

Edited July 8, 2014 by Jessy (see edit history)

[JuDrYa]

Esa es la imagen que esta detrás del candado.

PRIMERO

O cambias esa imagen tal como te digo y anulas el candado, anulando la linea...

<span>
<i class="icon-lock"></i>
</span>

SEGUNDO

O por el contrario, anulas el...

background: url("../img/header_lang.png") repeat-x scroll 0 0 transparent;

y lo pones en...

.icon-lock:before {
     content: xxxxxxxxxxxxxxxx
}
***** CREO QUE ESTO ESTA EN THEMES/TU THEME/CSS/FONT.CSS *****

...sustituyendo el content: xxxxxxxxxxxxxxx.

Edited July 8, 2014 by JuDrYa (see edit history)

[JuDrYa]

Recuerda que tienes que modificar tambien el candado abierto.

 

 

Si escojes la segunda opción busca en el mismo archivo...

.icon-unlock:before {

[Jessy]

Esa es la imagen que esta detrás del candado.

PRIMERO

O cambias esa imagen tal como te digo y anulas el candado, anulando la linea...

<span>
<i class="icon-lock"></i>
</span>

 

Si hago esto, tengo que poner una imagen o icono, supongo. ¿Cómo lo hago?

[JuDrYa]

Pon un .png (imagen)

Haz copia de los archivos que vayas a modificar, por si acaso poder restaurar.
Busca en tu .css

.blockuserinfo 
.logout, 
.blockuserinfo .login 
{
    background: url("../img/header_lang.png") repeat-x scroll 0 0 transparent;  --- RUTA DE TU IMAGEN
    border-radius: 3px;
    float: left;
    height: 21px;
    text-align: center;
    text-transform: uppercase;
    width: 21px; --- MODIFICA DEPENDIENDO DEL ANCHO DE TU IMAGEN
}

 PON TU IMAGEN "loquesea.png" EN LA CARPETA DONDE ESTE "header_lang.png" (../img/header_lang.png)
Y CAMBIA ARRIBA url("../img/header_lang.png") POR url("../img/loquesea.png")

 

 

Para subir o bajar la imagen, para centrarla, modifica...

.blockuserinfo {
    position: absolute;
    right: 96px; --- MENOS VALOR IMAGEN MAS A LA DERECHA Y MAS VALOR A LA IZQUIERDA
    top: 30px; --- [MENOS VALOR LA IMAGEN SUBE Y MAS VALOR LA IMAGEN BAJA
}

Se montara con el carrito de la izquierda, por lo que tendras que desplazar el carrito hacia la izquierda...
Para mover el carrito busca...

#header_user 
{
    position: absolute;
    right: 131px; --- MENOS VALOR IMAGEN MAS A LA DERECHA Y MAS VALOR A LA IZQUIERDA
    top: 32px; --- MENOS VALOR LA IMAGEN SUBE Y MAS VALOR LA IMAGEN BAJA
    z-index: 99;
}

Ve haciendo pruebas, pero siempre respaldando los originales.

Edited July 8, 2014 by JuDrYa (see edit history)

[Jessy]

Estoy cambiando el tamaño del icono que quiero colocar, a ver si lo consigo y te digo algo. Gracias!! 

[Jessy]

He conseguido meter la imagen que quería, pero me sale por delante el icono del candado. ¿Dónde lo borro?

[JuDrYa]

Te lo puse antes....

 

O cambias esa imagen tal como te digo y anulas el candado, anulando la linea...

<span>
<i class="icon-lock"></i>
</span>

[Jessy]

Genial, por fin lo he conseguido, muchísimas gracias JuDrYa!! 

 

Te dejo una captura de lo que por fin he podido hacer. Gracias!!!

 

[Jessy]

JuDrYa, ¿podrías ayudarme de nuevo? Cuando inicio sesión aparece como quiero, pero para cerrar sesión me aparece el candado por detrás de la imagen de login que puse. Sé que tengo que anular esa línea como como me dijiste, pero no sé cómo ni dónde borrarlo!