Cargando...
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] [pedido]Perfiles con pestañas

Creado por ,

Mensaje [Página 1 de 1.]

Publicado el Mar 30 Sep - 23:15

avatar
Bueno, estuve preguntando por tumblr a la creadora de unos perfiles que está aquí mismo y ni me había dado cuenta.

El caso es que me gustaría conseguir poner los datos del perfil mediante pestañas como en este foro:



Kay me contestó muy amablemente por su blog (sí, la anon sin tumblr soy yo xD) pero lamento decir que no he conseguido casi nada con lo de las variables (sé qe soy torpísima).

Si pudiérais ayudarme a conseguirlo (que no hace falta que sea el mismo efecto ni nada de eso, si no simplemente la estructura) estaría muy agradecida Corazón

A 0 usuarios le gusta esto

Publicado el Miér 1 Oct - 18:38

avatar
A ver, creo que soy la más indicada para contestar esto ^^

Bueno, no te puedo pasar el código del foro porque lógicamente está diseñado para ese foro de forma exclusiva. Como ya te dije por tumblr, el html sería algo así:

Código:
<div class="postprofile">
<div class="boton boton1"></div>
<div class="boton boton2"></div>
<div class="boton boton3"></div>
<div class="cont cont1"></div>
<div class="cont cont2"></div>
<div class="cont cont3"></div>
</div>

Y el jquery algo como lo que te pasé por tumblr, que eso ya no me lo sé de memoria.
Ahora bien, ¿qué es exactamente tu problema? ¿No sabes construir el jquery? ¿No sabes cuales son las variables que necesitas? Daaaatos, necesito daaatos <3

A 0 usuarios le gusta esto

Publicado el Miér 1 Oct - 19:52

avatar
Claro, claro, no quiero igual! Es decir, no esperaba menos, además de que daré los créditos correspondientes!!

¡Al lío! No sé las variables que necesito ni qué poner en los contenidos :S

Soy muy torpe y lo se :$

A 0 usuarios le gusta esto

Publicado el Miér 1 Oct - 20:32

avatar
A ver, te diré las variables del postprofile para que puedas disponer a tu antojo de ellas y ponerlas donde te plazca ^^ En los contenidos, por cierto, tienes que poner lo que quieras que vaya en cada caja. Es decir, en las distintas "pestañas" del perfil.

{postrow.displayed.POSTER_AVATAR} -> El avatar. Se genera dentro de un <img> él solito, así que no lo pongas como background del div o no funcionará.
{postrow.displayed.POSTER_NAME} -> Nombre del usuario. Se genera con un <a><span><strong></strong></span></a>.
{postrow.displayed.POSTER_RANK_NEW} -> Título del rango.
{postrow.displayed.RANK_IMAGE} -> Imagen del rango, también se genera dentro de un <img>.

Esto que te muestro ahora, en conjunto, tiene que verse así, es decir, estar dentro de lo de BEGIN profile_field y END profile_field, si no no furula bien.
Código:
<!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
{postrow.displayed.profile_field.LABEL} -> El título del campo de perfil, se genera dentro de un <span>-
{postrow.displayed.profile_field.CONTENT} -> El contenido del campo de perfil, se genera sin nada alrededor.
{postrow.displayed.profile_field.SEPARATOR} -> El separador que elijas al crear el campo (Ningún, volver a la línea, salto de línea, barra).
{postrow.displayed.PROFILE_IMG} -> Link e imagen al perfil del user.
{postrow.displayed.PM_IMG} -> Link e imagen para mandarle un mp al user.
{postrow.displayed.EMAIL_IMG} -> Link e imagen para mandarle un mp al user.

Y lo mismo que antes con el profile_field, esto tiene que verse así, y va con los links de perfil, mp y email:
Código:
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
Es básicamente para que aparezcan los campos del perfil de contacto personalizado (coimo la ficha o la cronología, yoquesé)

Y luego está el {postrow.displayed.POSTER_RPG} , el cual no he usado nunca y presupongo que será para la hoja de personaje.


Y con eso estaría todo ^^

A 0 usuarios le gusta esto

Publicado el Miér 1 Oct - 23:22

avatar
Uf, esto es demasiado complicado para mí.  A ver, he entendido que debo poner las variables dentro de los contenidos (según las que quiera mostrar o esconder) pero, debo hacerlo en el html o en el javascript?

Quizá me esté haciendo un lío yo sola pero pido paciencia porque soy medio inútil para estas cosas  Totalmente avergonza

A 0 usuarios le gusta esto

Publicado el Jue 2 Oct - 10:50

avatar
Con paciencia, Quinn, esto no se aprende en un día ^^

Las variables son del HTML. Te puedo dejar un ejemplo muy gráfico, a ver si se entiende mejor así.

Código:
<div class="postprofile">
<div class="boton boton1">1</div>
<div class="boton boton2">2</div>
<div class="boton boton3">3</div>
<div class="cont cont1">
{postrow.displayed.POSTER_AVATAR}
{postrow.displayed.POSTER_NAME}
</div>
<div class="cont cont2">
{postrow.displayed.RANK_IMAGE}
<!-- BEGIN profile_field -->
<span class="campo">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
</div>
<div class="cont cont3">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</div>
</div>

Y ahora te explico.

Como verás, al principio abro el postprofile. Todo bien. Pongo los tres botones (.boton1, .boton2, .boton3) y les pongo su consiguiente numerito dentro (porque quiero que aparezcan los números para que la gente sepa qué pestaña es (?))

Luego vienen los contenidos. El .cont1, como podrás observar, sólo tiene el avatar y el nombre de usuario (las variables correspondientes a estos).
El .cont2 lo primero que tiene es la imagen del rango, sin el título, porque yo no quiero el título, así que no pongo la variable de este. Justo después he abierto el BEGIN profile_field para poder poner los campos del perfil, en los que he puesto el contenido, sin su título (en lugar de salir Mensajes: 40 saldrá solo 40), poniéndole una class para poder trabajar con él. Cierro con END profile_field.
El .cont3 tiene tres imágenes por defecto que son las de perfil, mp y email, y luego pongo el BEGIN contact_field tal cual te lo puse en el code de arriba para poder llamar a los iconitos que yo creo desde mi PA para ficha, relaciones y crono.


No sé si lo habrás entendido mejor así ^^

PD: Del JS por ahora olvídate, hasta que no tengas el HTML y el CSS no te debes preocupar por él, porque te vas a liar aún más.

A 0 usuarios le gusta esto

Publicado el Jue 2 Oct - 23:28

avatar
Vale, creo que ahora lo he entendido, de esta manera si quiero darle formato al div de la primera pestaña (que contiene el avatar) puedo hacerlo con libertad. OK! Entendido! Ahora vengo con dudas antes de pasar al JS como tú dices.

Si por ejemplo quisiera añadir más "ventanas" con X contenido no tendría más problema que sumar otros divs al html y luego hacer lo mismo con el js no?

Y si por ejemplo, quiero que una pestaña este siempre activa qué tendría que hacer?

Y bueno, ya sería montar el js con algo así como me dijiste en el tumblr no?




Gracias de verdad por tomarte todo este trabajo para ayudarme! Corazón

A 0 usuarios le gusta esto

Publicado el Vie 3 Oct - 6:59

avatar
Tendrías que sumar el correspondiente .boton4 y el .cont4, exacto Riéndose

Para decidir qué pestaña dejas activa, pues sería cuando tú coloques con CSS los distintos .cont en el mismo sitio (lo más cómodo es un position:absolute), por ejemplo de esta forma:
Código:
.postprofile{
position:relative; /*Para que el absolute sólo afecte a cada perfil individualmente*/
}
.cont{
position:absolute;
top:0px;
}
Pues es cuestión de decirle lo siguiente:
Código:
.cont2, .cont3{
display:none;
}
Y liiisto Riéndose


Y el JS, como bien dices es coger lo que yo te di y hacerlo para las diferentes pestañas. Recuerda que lo que te pasé va dentro de document ready y eso, que creo que te lo pasé sin él

¡Estamos para eso! Saludos Riéndose

A 0 usuarios le gusta esto

Publicado el Vie 3 Oct - 13:00

avatar
Vale, lo he entendido, lo que pasa que creo que no he montado bien el js, he hech esto:



Código:
$(document).ready(function(){

$('.boton boton1').click(function () {$('.cont cont1"').slideDown(900);$('.cont cont2, .cont cont3,').slideUp(900)});

$('.boton boton2').click(function () {$('.cont cont2').slideDown(900);$('.cont cont1, .cont cont3,').slideUp(900)});

$('.boton boton3').click(function () {$('.cont cont3').slideDown(900);$('.cont cont1, .cont cont2,').slideUp(900)});

});

Pero no van las pestañas :C

A 0 usuarios le gusta esto

Publicado el Sáb 4 Oct - 23:35

avatar
¿Puedo hacer un up por aquí para que no se pierda el tema? <3

A 0 usuarios le gusta esto

Publicado el Dom 5 Oct - 1:40

avatar
Administrador
¡Hola!

Prueba el siguiente código que he creado Para instalarlo deberás seguir los siguientes pasos:

1. Busca en la plantilla viewtopic_body.html el siguiente cacho de código:

Código:
         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
               <dt>
                  {postrow.displayed.POSTER_AVATAR}
                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
               </dt>
               <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
               <dd><br /></dd>
               <dd>
                  <!-- 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}
               </dd>
               <dd><br /></dd>
               <dd>
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
               </dd>
            </dl>
         </div>

2. Reemplázalo por:

Código:
         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <div class="f_b">
               <span class="f_b1">Avatar</span>
               <span class="f_b2">Campos</span>
               <span class="f_b3">Contacto</span>
            </div>
            <div class="f_a">
               <div class="f_a1">
                  {postrow.displayed.POSTER_AVATAR}
                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
                  <br />{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
               </div>
               <div class="f_a2">
                  <!-- 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 class="f_a3">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
               </div>
            </div>
            
         </div>
Como podrás haberte fijado, he cambiado todos las etiquetas DD y DT por DIVs, lo cual hará más lógico ese apartado y permite una mayor libertad de uso de etiquetas.

3. Agrega el siguiente CSS:

Código:
.f_a > div { display: none; }
.f_a > .f_a1 { display: block; }

4. Instala el siguiente JS y márcalo para que se muestre solo en los temas:

Código:
$(function() {
   $('.f_b > span').click(function() {
      var n = $(this).attr('class').match(/\d/)[0],
      d = $(this).parent().parent().find('.f_a'+n);
      if(d.is(':not(:visible)')) {
         $(this).parent().next('.f_a').children('div').slideUp('slow');
         d.slideDown('slow');
      }
   });
});

Listo, ya debería funcionar perfectamente.

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

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Dom 5 Oct - 12:24

avatar
Ahora sí! Muchas gracias por todo! De verdad! Os pondré a ambos en los créditos por ayudarme! <3

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

A 0 usuarios le gusta esto

Con la tecnología de Foroactivo y punBB