Cargando...

Bret

1
Buscar contenido
Enviar mensaje privadoSitio web del usuarioContacto: Skype
Rango
Sexo
Mensajes
Última visita
Miembro desde

Foro Nube » Servicios » Soporte Foroactivo

Foro Cerrado
Este foro se encuentra cerrado de forma indefinida. Puedes utilizarlo para revisar material antiguo que desees recuperar.

[PHPBB3] Datos del perfil encima del avatar, con fondo

Creado por ,

Mensaje [Página 1 de 1.]

craz-y

Publicado Dom 21 Sep - 1:38

#1
craz-y
Antes que nada, decir que ya he leído con anticipación la duda resuelta de Quinn [ ésta ], y aunque funciona a la perfección el código que le han proporcionado, quería saber si era posible que se le pusiese un color o imagen de fondo, para ocultar la imagen del avatar. He probado un código que encontré en otro foro de ayuda, pero ese no me permite seleccionar los links de 'Web del autor', o 'MP' Triste.

¿Es posible hacerlo? Gracias de antemano <3.

A 0 usuarios le gusta esto
Bret

Publicado Dom 21 Sep - 11:57

#2
Bret
Administrador
La verdad es que no entendí muy bien la pregunta. ¿Quieres el mismo código que el de Quinn pero que en vez de que los perfiles tengan avatares tengan un color sólido o una imagen o quieres que los usuarios que no tienen un avatar que aparezca otra cosa?

A 0 usuarios le gusta esto
craz-y

Publicado Dom 21 Sep - 18:57

#3
craz-y
Uy Triste No, en realidad, lo que quiero es el mismo efecto de la petición de Quinn, pero con el code que le dieron, la información aparece encima del avatar, sin ningún fondo. A mi, lo que me gustaría hacer sería que, al pasar el ratón encima del avatar, aparezca la información con el hover, sí; pero que el avatar se opaque un poco con un color de fondo. Algo similar a ésto: https://i.imgur.com/B0GhDSL.png

A 0 usuarios le gusta esto
Kaylee

Publicado Dom 21 Sep - 20:57

#4
Kaylee
A ver, creo que entonces tu .postprofile debería tener un color de fondo a tu gusto, y luego sería añadir esto:
Código:
.postprofile dt img{
transition:ease-in-out 0.5s;
opacity:1;
}
.postprofile:hover dt img{
opacity:0.7; /*Puedes cambiarlo por el valor que quieras*/
}

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)
Bret

Publicado Dom 21 Sep - 21:26

#5
Bret
Administrador
Lo que tienes que hacer es utilizar el mismo código que el de Quinn pero agregar este también:

Código:
.postprofile dl dt:hover { opacity: 0.5; }

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)
craz-y

Publicado Dom 21 Sep - 21:38

#6
craz-y
Kay, Bret, ambos me han funcionado ésta vez *-*. Graacias <3.

Peeero, comenzó otro problema Triste y es que, cuando quiero darle clic a algún link -por ej, los botoncitos de MP y Web del autor-, se me oculta la información. En imagenes: Cuando el ratón está en un espacio vacío por debajo de la información del perfil [ Imagen ]. Cuando el ratón está justo encima de algun cuadrito de información, por ej, el boton de Visitar web del autor [ Imagen ]. Tengo éste CSS, que modifica el perfil, no sé qué puede estar fallando -sufre Llorando -

Código:
/*Perfil del autor*/
.postprofile dl { min-height: 400px; }
.postprofile dl dt { position: absolute;z-index: 1; }
.postprofile dl dt:hover ~ dd { opacity: 1; }

.postprofile dl dd { position: relative; z-index: 2;opacity: 0; }

.postprofile {
border-top: 10px solid rgb(18, 18, 18);
    border-left:10px solid rgb(18, 18, 18);
    border-right: 10px solid rgb(18, 18, 18);
    border-bottom: 1px solid #fff;
  box-shadow: 0px 10px 0px 0px rgb(18, 18, 18);
background-color: rgb(18, 18, 18);  
float: right;
    display: inline;
min-height: 80px;
position: relative;
width: 210px;
  margin-right: -9px;
margin-top: -5px;
  margin-left: -5px;
  font-size: 9px;
letter-spacing: 1px;
text-align: center;
font-family: lekton;
text-transform: uppercase; text-transform: uppercase; color: white; font-weight: normal; letter-spacing: 1px;
}
.postprofile dd, .postprofile dt {
margin-left: 0px;
  line-height: 1.2em;
}

    dd img {
    margin-top: -11px;
    }

.postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a {
font-family: roboto condensed;
font-size: 15px;
color: rgb(255, 255, 255);
letter-spacing: 3px;}

.postprofile dt a img {
max-width:210px;
margin-top: -5px;
  margin-left: 0px;
}
.postprofile dt img{
transition:ease-in-out 0.5s;
opacity:1;
}
.postprofile:hover dt img{
opacity:0; /*Puedes cambiarlo por el valor que quieras*/
}

A 0 usuarios le gusta esto
Kaylee

Publicado Dom 21 Sep - 21:47

#7
Kaylee
Busca esta parte:
Código:
.postprofile dl dt:hover ~ dd { opacity: 1; }

Y cámbialo por esto:
Código:
.postprorile:hover dd {opacity:1;}
Y debería arreglarse. Si no, avísame ^^

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)
craz-y

Publicado Dom 21 Sep - 22:21

#8
craz-y
¡Se arregló! Pero creo que el CSS me odia lo suficiente, porque cada vez que algo se arregla, algo nuevo aparece xd Y ahora es que, el hover incluye al rango con ese code -es decir, no sale normalmente, y al momento de pasar el ratón por el avatar, sí sale-. ¿Hay alguna manera de sacarlo, para que esté estático allí? Avergonzado

A 0 usuarios le gusta esto
Kaylee

Publicado Dom 21 Sep - 22:42

#9
Kaylee
Sorry, fallo mío, no me fijé bien en el código que ya tenías. Sustituye lo que te di por lo siguiente:
Código:
.postprorile:hover dt~dd {opacity:1;}

Creo que ahora sí ^^Uu sorry!

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)
Bret

Publicado Dom 21 Sep - 22:50

#10
Bret
Administrador
Kaylee escribió:Sorry, fallo mío, no me fijé bien en el código que ya tenías. Sustituye lo que te di por lo siguiente:
Código:
.postprorile:hover dt~dd {opacity:1;}

Creo que ahora sí ^^Uu sorry!

Nótese que es .postprofile, no .postprorile, que Kaylee se equivocó.

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (2 votos)
craz-y

Publicado Dom 21 Sep - 23:10

#11
craz-y
Siento que estoy molestando mucho xdd Ahora no me sale el rango ni siquiera al pasar el ratón por encima del avatar Triste Si acomodé ese detalle, gracias por eso, Bret <3.

A 0 usuarios le gusta esto
Kaylee

Publicado Lun 22 Sep - 19:15

#12
Kaylee
¿Podrías poner el foro en hide por aquí? Porque se hace difícil ver el error sin tener el foro en cuestión donde ocurre >3<
¡Gracias!

A 0 usuarios le gusta esto
craz-y

Publicado Mar 23 Sep - 21:50

#13
craz-y
¡Claro! El foro es éste: <3. Gracias por la ayuda, de verdad.

A 0 usuarios le gusta esto
Bret

Publicado Mar 23 Sep - 22:40

#14
Bret
Administrador
Veamos, el rango debería aparecer así:

Código:
.postprofile dt + dd { opacity: 1; position: absolute; top: ALTURADELAVATARpx; }

El asunto es que que sepas que en ese hilo que nos pasaste no tienes rango.

A 0 usuarios le gusta esto
Kaylee

Publicado Dom 5 Oct - 12:35

#15
Kaylee
Cierro por inactividad.

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

#16

A 0 usuarios le gusta esto

Con la tecnología de Foroactivo y punBB