Campos personales como en mybb-es
Hola a todos bueno, tenia tiempo de no meterme a hacer un foro y ahora que lo estoy haciendo quiera poner los campos del perfil tal y como estan en m...

Hola a todos bueno, tenia tiempo de no meterme a hacer un foro y ahora que lo estoy haciendo quiera poner los campos del perfil tal y como estan en mybb, entonces me vi en la tarea de hacer algo similar, pero sin usar el codigo que aqui tienen y asi que les dejo este tuto y juzguen si estan buenos o no ;D

Paso 1:
Primero nos vamos a ACP->ESTILOS Y PLANTILLAS->ESTILOS DE TU PLANTILLA->Global.css
Y colocamos de ultimo esto: (en mi caso uso la ID Button ustedes usen lo que les convenga ;D)
Código:
#button{
    padding:0;
        list-style:none;
        overflow:hidden;
        margin:0;
}
#button li{
    float:left;
        margin:1px 0px 1px 0px;
        padding:0;
}
Paso 2:
Ahora se dirigen a ACP->Estilos y Plantillas->Plantillas de su tema->postbit_author_user

Depende de ustedes si quieren borrar todo lo que esta en el postbit_author_user (obiamente haciendo un copia) si quieren que este tal y como en el ejemplo o demo que voy a dejar abajo .

Si lo quieren tal y como esta el demo
1.Para las banderas de plugin hmflags de himura
Código:
<div style="background: #FFF; border-radius: 3px; border: 1px solid #ccc; margin: 2px; color: #4a4a4a; box-shadow: 0 1px 0 #FFF; opacity: 0.9;">
    <ul id="button">
        <li>
            <div style="background: #FFF; border-radius: 3px; border: 1px solid #ccc; margin: 2px; color: #4a4a4a; padding: 5px;width:24px; text-align: left; box-shadow: 0 1px 0 #FFF; opacity: 0.9;">
                <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=hmflags&amp;cnam=$post[fid4]&amp;pf=4',
                'hmflags', 450, 500);"><img src="{$mybb->settings['bburl']}/images/pais/$post[fid4].png" alt="$post[fid4]" title="$post[fid4]" width="24" height="24"></a>
            </div>
        </li>
Como podran ver estoy usan listas por tanto si quieren que les salga tienen que colocar sus campos siguientes despues del </li> y cerrar con un </ul></div>

Para el icono de sexo:(agregar despues del ultimo </li>)
Código:
<li>
        <div style="background: #FFF; border-radius: 3px; border: 1px solid #ccc; margin: 2px; color: #4a4a4a; padding: 5px;width:24px; text-align: left; box-shadow: 0 1px 0 #FFF; opacity: 0.9;">
          <img src="{$mybb->settings['bburl']}/images/$post[fid3].gif" alt="$post[fid3]" title="$post[fid3]" width="24" height="24"></a>
        </div>
     </li>
Para la especialidad:(Agregar despues del ultimo </li>)
Código:
<li>
    <div style="background: #FFF; border-radius: 3px; border: 1px solid #ccc; margin: 2px; color: #4a4a4a; padding: 5px; text-align: left;width:24px; box-shadow: 0 1px 0 #FFF; opacity: 0.9;">
        <img src="{$mybb->settings['bburl']}/images/especialidad/$post[fid5].png" alt="$post[fid5]" title="$post[fid5]" width="24" height="24"></a>
    </div>
  </li>    
    </ul>
Esos son 3 campos de ejemplo siquieren agregar otro solo se tienen que basar en la siguiente estructura:
Código:
<li>
     <div style="background: #FFF; border-radius: 3px; border: 1px solid #ccc; margin: 2px; color: #4a4a4a; padding: 5px; text-align: left;width:24px; box-shadow: 0 1px 0 #FFF; opacity: 0.9;">

<img src="{$mybb->settings['bburl']}/images/"campo"/$post[fid5].png" alt="$post[fid5]" title="$post[fid5]" width="24" height="24"></a>
    </div>
  </li>    
    </ul>
Siempre recuerden cambiar sus $post[fid] por la id del campo que quieran poner Y obiamente de cambiar los que estan de ejemplo asi como la url de las imagenes.

Los tutoriales usados para que el postbit se vea asi son:
Globos de Dialogo para el postbit (1 Imagen)
[Tutorial] Recuadros de Postbit con sombra parecido a MyBB-Es

Screenshto
[Imagen: screen.png]
Última modificación: 20 Dec, 2012, 8:54 am por V1K1NGO.
Buen tutorial.
Eso si tendré que quitar el enlace, ya que por lo visto el theme no es comprado & de alguna u otra manera te haces publicidad. Doy aviso a un admin para ver si se permite.
(20 Dec, 2012, 8:54 am)Steeep escribió: Buen tutorial.
Eso si tendré que quitar el enlace, ya que por lo visto el theme no es comprado & de alguna u otra manera te haces publicidad. Doy aviso a un admin para ver si se permite.
ok -.- ni sabia que el theme era premium -.- me lo encontre en una web que decia que eran gratuitos y bueno lo descarge XD
Perfecto Big Grin el tutorial, respecto al theme es otro asunto espero que puedas retirarlo Smile
:)
me gusta esta modificacion por cierto como hago para ponerlo como campo de perfil perzonalizado y que cada usuario lo pueda modificar
Aprendiendo cada vez mas
Última modificación: 15 Feb, 2013, 1:38 pm por Eloy.
Buen tuto!! muchas gracias por compartirlo, Smile
Muchas gracias por el tutorial, lo probaremos Big Grin
Como haria para centrarlo. ?. por mas que quiero centrarlo no logro hacerlo
solo se me queda ahi. al hacer right solo cambia Mensajes , reputacion . mas no la imagen.

[Imagen: ezHD7DX.png]

Y ala vez colocar el gracias dentro ... mensajes , reputacion..

[Imagen: dClRKm1.png]
Busca en el css del tuto:
#button li...
Quita el
float: left;
y agrega:
display: inline-block

Después en .ppbox cambias el:
text-align: left;
por
text-align: center;
y solucionas lo primero...

Lo segundo es meter la variable del plugin thanks en el ppbox y ya Tongue

ADiós
Gracias Big Grin logre Cuadrarlo ambos ! Big Grin pero tuve que aumentar un .ppbox2 :p ahi cambiarle center y al otro dejarlo en left Big Grin Gracias =)