Hola

El tema es este: http://www.webdesignforo.net/t2194-ocultar-perfil?highlight=ocultar+perfil pero, en caso de que el código sea diferente, que sea para PunBB.

Andreii escribió: un código o algo para ocultar el perfil de los users en los post sin necesidad de tener un boton o algo, que sea con solo pasar el cursor por el avatar y que salga la info!

Sería el código que proporcionó Slash+ pero no puedo visualizarlo... porque esta en Hide.

Prueba esto:

Código:

.user-info {
 display: none;
}

.user div:hover + div {
 display: block;
}

.user-info:hover {
 display: block;
}

Hola,
Quizás ese código te afecte la posición de otras cosas, te recomiendo usar visibility hidden y visible

Código:

.user-info {visibility: hidden;}.user-info:hover{visibility: visible;}

Con transición

Código:

.user-info {opacity: 0;visibility: hidden; transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s;-ms-transition-duration: 1s;-khtml-transition-duration: 1s;}.user-info:hover{visibility: visible; opacity: 1;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s;-ms-transition-duration: 1s;-khtml-transition-duration: 1s;}

No se si funcione este último pero bueno, quizás.

El mío no afecta a nada más siempre y cuando no hayas editado el template. En el tuyo Ayax si utilizas la propiedad visibility el elemento sigue ocupando espacio...

El código de Ayax, no me funciona...

En cuanto al de Tubilok, funciona casi perfectamente... lo único que me gustaría perfeccionarlo un pelín más... ¿cómo? ... solo se abre cuando le paso el mouse por encima del avatar (y se despliega la información esa)... el caso esque la información del perfil es muuuuuy larga y entonces... un user no puede leerlo todo, y enontces me gusaría que mientras esté el mouse encima de esa información (la que se oculta) se mantenga visible.
Porque actualmente, se oculta.

No sé si me expliqué :s
Kakashi

De eso me di cuenta por eso edite el código ayer, no sé si lo has visto, es añadiendo esta parte:

Código:

.user-info:hover {
 display: block;
}

Sí compañero, lo vi hoy antes de postear

Lo que, en ocasiones, falla un poco... Pero supongo que no podrá perfeccionarse más... En tal caso, podeis cerrar... y GRACIAS de nuevo =D

Kakashi

Autor : Celina ( Miembro de Staff de FDF )

Si es esto :



Hace lo siguiente..

Vas a
Panel de Administracion >> Visualización >> Colores >> Css Stylesheet y pegas el siguiente codigo CSS:

Código:



.perfiloculto{
background: #a90329;
-moz-border-radius:7px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width:160px;
font-family: georgia,serif;
font-size: 11px;
font-variant: small-caps;
text-shadow:5px 2px 5px #ffc9d2;
    -moz-box-shadow:inset 0px 0px 13px #fad5de;
    -webkit-box-shadow:inset 0px 0px 13px #fad5de;
    box-shadow:inset 0px 0px 13px #fad5de;
}

.perfil0
{
width: 100px;
font-family: georgia,serif;
font-size: 12px;
font-variant: small-caps;
border: none;
text-align: center;
}
.ombrelab{
text-shadow: #646464 1px 1px 1px;
text-align: center;}


Ahora vas a las Templates

Panel de Administracion >> Visualizacion >> Templates

Accedemos al modo edición del template viewtopic_body y buscamos la zona donde se ubica el avatar: (Esto es para ubicarnos más facilmente)

Código:

 
      {postrow.displayed.RANK_IMAGE}
</div>
</div>
                                                 

Justo después de esa parte, está el contenido del perfil que es el siguiente.

Código:


            <div class="user-info">
                        {postrow.displayed.ONLINE_IMG}
                        <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        <!-- END profile_field -->
                        {postrow.displayed.POSTER_RPG}
                    </div>
                  </div>

Hay que seleccionar el código, quitarlo y susituirlo por :

Código:




<div class="perfiloculto" onClick="this.firstChild.value=(this.firstChild.value=='Ver perfil')?'Ocultar perfil':'Ver perfil';this.lastChild.style.display=(this.firstChild.value=='Ver perfil')?'none':'block';" style="text-align: center;"><input type="button" value="Ver perfil" class="perfil0"/><div style="display: none;  text-align:left;">
</div>
  <div id=""></div>
     
 
  <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
 
              <div class="user-info">
                        {postrow.displayed.ONLINE_IMG}
                        <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        <!-- END profile_field -->
                        {postrow.displayed.POSTER_RPG}
                    </div>
                  </div>
                                                  </div>
<br /><br />


Deberías tener esto :

Spoiler:

Por último no debemos olvidarnos de registrar los cambios en el template y publicarlo
Por supuesto podéis modificar los CSS y los colores a sus gustos.

Hola!

Si lees lo que puse... en el primer post, lo que quiero es efecto hover, como dice el titulo, no mediante un botón.

Gracias,

x.x mira am logre hacer esto pero es super super modificado a mano xDD

asi se ve pero es por que tengo amm un tamaña fijo de avaatar no se si se vea igual en tu foro QQ
http://fbcom.foroactivo.mx/t1-tu-primer-tema#2

y bueno si lo quieres este es el code nwn

Código:

 
.user {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: 500px;
  display: block;
  height:90px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align:center;
  width: 500px;
  -webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
  display: block;
  margin: 0;
  padding: 10px;
  height: 83px;
  margin: 0;
  overflow: auto;
  padding: 10px;
}
.user:hover { /* que se despliega al poner el cursor del ratón encima */
height: 100%;
  -webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
  cursor:pointer;
}

[Hawkeye* funciona ... pero como dices hay que tener fijo un valor para el avatar

¿Podrías hacerlo proporcional al avatar? :s

Es decir, si el avatar, mide por ejemplo 200px de alto, que se vean 280px del perfil... si el avatar mide 100px de alto, que se vean 180px de perfil...
...si no hay avatar que haya X px de perfil.

Saludos y gracias

PD. Reputación dada

>----< awwww me pones a estudiar oe xDDD
wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
si pude xDDD am mira mira este es el code dime si te funciono

Código:

.user-info {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: block;
 height: 0px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align:center;
  -webkit-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
  display: block;
  margin: 0;
  padding: 10px;
  height: opx;
  margin: 0;
  overflow: auto;

}
.user-info:hover { /* que se despliega al poner el cursor del ratón encima */
height: 100%;
  -webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
  cursor:pointer;
}

Agradezco tu ayuda, y por eso te doy reputación... sin embargo, el hecho de que quede eso de "mensajes" medio visible no me gusta, pero... el resto está perfecto.

....Si no es molestia, ¿podrías arreglarlo? ... o explicarme como... sería? .. sino me quedaré con el code

Gracias, enserio! Y perdona las molestias

am pudes dejarme tu foro en hide esq no se como se ve en el tuyo o.o

Foro de pruebas donde estoy trabajando:



Un ejemplo de tema:

Ahi se ven dos tamaños diferentes de avatar... y el mismo efecto, que es lo que quiero... pero no quiero que se vea eso de "mensajes" si no pasas el mouse por encima....
o almenos, para que quede... un poco mejor, que solo se vea "mensaje" y al pasar el mouse que se despliegue todo.
Pero que no quede cortado

saludos y gracias

Código:

 .user-info {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: block;
 height: 0px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align:center;
  -webkit-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
  display: block;
  margin: 0;
  padding: 1px;
  height: opx;
  margin-top: 0px;
  overflow: auto;

}
.user-info:hover { /* que se despliega al poner el cursor del ratón encima */
height: 100%;
  -webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
  cursor:pointer;
}


Es el mismo código compañera....

Gracias, igualmente =D

Supongo... que podreis cerrar

si es el mismo pero ya lo probaste =_=?

Hola compañero!

Necesito que confirmes si deseas dar por terminado el tema

[Hawkeye* escribió:si es el mismo pero ya lo probaste =_=?

Sí, por eso dije que era el mismo code...es el que dejé puesto...

lomin456 escribió:Hola compañero!

Necesito que confirmes si deseas dar por terminado el tema

Sí, si no se puede solucionar, supongo que igualmente, Hawkeye ha sido de GRAN ayuda

GRACIAS!

Perfecto

Entonces cierro y muevo a Soporte Finalizado