Perfil ordenado + Tabs

eNvy 13 Dec, 2013, 4:03 pm

Bueno, estuve bastante tiempo acomodando y revisando, pero logré que quede prolijo y cómodo para el uso de cualquiera.

Si se dan maña, incluso pueden mejorarlo, y también pueden editarlo a gusto para completar el perfil con información de plugins, y lo que deseen.

Pasemos al tutorial...

PASO 1: Editar la plantilla MEMBER_PROFILE (Reemplazar toda la plantilla con éste código)

Código:
<html>

<head>

<title>{$mybb->settings['bbname']} - {$lang->profile}</title>

{$headerinclude}

</head>

<body>

{$header}

<div id="pcontainer">

<div class="leftprofile">

<div style="padding: 10px;">

<span class="largetext"><strong>{$formattedname}</strong></span><br />

{$usertitle}<br /><br />

{$groupimage}<br />

{$userstars}<br /><br />

<div class="profileavatar">{$avatar}</div><br />

{$sendemail}&nbsp;&nbsp;

<a href="private.php?action=send&amp;uid={$memprofile['uid']}"><span class="profilebutton" title="Enviar MP"><img src="{$mybb->settings['bburl']}/images/new_pm.gif"></span></a>&nbsp;&nbsp;

<a href="search.php?action=finduserthreads&amp;uid={$uid}"><span class="profilebutton" title="{$lang->find_threads}"><img src="{$mybb->settings['bburl']}/images/folder.gif"></span></span></a>&nbsp;&nbsp;

<a href="search.php?action=finduser&amp;uid={$uid}"><span class="profilebutton" title="{$lang->find_posts}"><img src="{$mybb->settings['bburl']}/images/codebuttons/quote.gif"></span></a></span>&nbsp;&nbsp;

{$buddy_options}<br /><br />

<div class="profiletitle">Información</div>

<div class="profilecell">

<p>Se registro: {$memregdate}</p>

<p>Nacimiento: {$membday}</p>

<p>Última visita: {$memlastvisitdate} {$memlastvisittime}</p>

<p>{$reputation}</p>

<p>{$warning_level}</p></div><br />

{$modoptions}

{$adminoptions}

{$memprofile['usernotes']}

</div>

</div>

<div class="rightprofile">

<ul class="tabs">

     <li>

          <input type="radio" checked name="tabs" id="tab1">

          <label for="tab1">Información</label>

          <div id="tab-content1" class="tab-content animated fadeIn">

               {$online_status}<br />

               <strong>{$lang->timeonline}</strong> {$timeonline}<br />

               <strong>{$lang->total_posts}</strong> {$memprofile['postnum']} ({$lang->ppd_percent_total})&nbsp;<span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a> &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span><br />

               {$referrals}<br />

          </div>

     </li>

     <li>

          <input type="radio" name="tabs" id="tab2">

          <label for="tab2">Contacto</label>

          <div id="tab-content2" class="tab-content animated fadeIn">

               <strong>{$lang->homepage}</strong> {$website}<br />

               {$profilefields}   

          </div>

     </li>

     <li>

          <input type="radio" name="tabs" id="tab3">

          <label for="tab3">Firma</label>

          <div id="tab-content3" class="tab-content animated fadeIn">

               {$signature}

          </div>

     </li>

</ul>

</div>

</div><br style="clear: both;" />

{$footer}

</body>

</html>

PASO 2: CSS

Código:
#pcontainer {

        width: 1024px;

}

.leftprofile {

        width: 200px;

        float: left;

        text-align: center;

        background: #DDDDDD;

        border-radius: 3px;

        -o-border-radius: 3px;

        -ms-border-radius: 3px;

        -moz-border-radius: 3px;

        -webkit-border-radius: 3px;

}

.rightprofile {

        width: 814px;

        margin-left: 10px;

        float: left;

}

.profileavatar {

        border: 1px solid #000000;

        border-radius: 3px;

        -o-border-radius: 3px;

        -ms-border-radius: 3px;

        -moz-border-radius: 3px;

        -webkit-border-radius: 3px;

        width: 100px;

        height: 97px;

        margin: auto;

}

.profilebutton {

        opacity: 0.4;

        -webkit-transition: all 0.5s ease;

        -moz-transition: all 0.5s ease;

        -ms-transition: all 0.5s ease;

        -o-transition: all 0.5s ease;

        transition: all 0.5s ease;

}

.profilebutton:hover {

        opacity: 1;

        -webkit-transition: all 0.5s ease;

        -moz-transition: all 0.5s ease;

        -ms-transition: all 0.5s ease;

        -o-transition: all 0.5s ease;

        transition: all 0.5s ease;

}

.profiletitle {

        background: #545454;

        color: #FFFFFF;

        font-size: 13px;

        font-weight: bold;

        padding: 5px;

        width: 160px;

        margin: auto;

        border-radius: 3px 3px 0px 0px;

        -o-border-radius: 3px 3px 0px 0px;

        -ms-border-radius: 3px 3px 0px 0px;

        -moz-border-radius: 3px 3px 0px 0px;

        -webkit-border-radius: 3px 3px 0px 0px;

}

.profilecell {

        background: #7F7F7F;

        color: #FFFFFF;

        font-size: 11px;

        font-weight: bold;

        text-align: left;

        width: 160px;

        padding: 5px;

        margin: auto;

        border-radius: 0px 0px 3px 3px;

        -o-border-radius: 0px 0px 3px 3px;

        -ms-border-radius: 0px 0px 3px 3px;

        -moz-border-radius: 0px 0px 3px 3px;

        -webkit-border-radius: 0px 0px 3px 3px;

}

.profilecell p {

        padding: 0;

        margin: 5px 0;

}

.profilecell p a:link, .profilecell p a:visited {

        color: #FFFFFF;

}

.profilecell p a:hover, .profilecell p a:active {

        color: #545454;

}

.tabs input[type=radio] {

        position: absolute;

        top: -9999px;

        left: -9999px;

}

.tabs {

        width: 794px;

        float: none;

        list-style: none;

        position: relative;

        padding: 0;

        margin: auto;

}

.tabs li{

        float: left;

}

.tabs label {

        display: block;

        padding: 10px 20px;

        margin-right: 5px;

        border-radius: 2px 2px 0 0;

        color: #FFFFFF;

        font-size: 11px;

        font-weight: normal;

        font-family: 'Exo 2', sans-serif;

        background: #7F7F7F;

        cursor: pointer;

        position: relative;

        top: 3px;

        -webkit-transition: all 0.2s ease-in-out;

        -moz-transition: all 0.2s ease-in-out;

        -ms-transition: all 0.2s ease-in-out;

        -o-transition: all 0.2s ease-in-out;

        transition: all 0.2s ease-in-out;

}

.tabs label:hover {

        background: #DDDDDD;

        color: #545454;

}

[id^=tab]:checked + label {

        font-family: 'Exo 2', sans-serif;

        font-size: 13px;

        background: #DDDDDD;

        color: #545454;

        top: 0;

}

[id^=tab]:checked ~ [id^=tab-content] {

        display: block;

}

.tab-content{

        z-index: 2;

        display: none;

        text-align: left;

        width: 100%;

        line-height: 140%;

        padding-top: 10px;

        background: #DDDDDD;

        padding: 15px;

        font-family: 'Exo 2', sans-serif;

        font-size: 13px;

        color: #545454;

        position: absolute;

        left: 0;

        box-sizing: border-box;

        -webkit-animation-duration: 0.5s;

        -o-animation-duration: 0.5s;

        -moz-animation-duration: 0.5s;

        -ms-animation-duration: 0.5s;

        animation-duration: 0.5s;

}

PASO 3: Editar las siguientes plantillas (Borrar todo el contenido y pegar sólo lo que tienen aquí):

MEMBER_PROFILE_EMAIL

Código:
<a href="member.php?action=emailuser&amp;uid={$memprofile['uid']}"><span class="profilebutton" title="{$lang->send_user_email}"><img src="{$mybb->settings['bburl']}/images/codebuttons/email.gif"></span></a>

MEMBER_PROFILE_ADMINOPTIONS

Código:
<div class="profiletitle">Administración</div>

<div class="profilecell">

<p><a href="{$mybb->settings['bburl']}/{$config['admin_dir']}/index.php?module=user-users&amp;action=edit&amp;uid={$uid}">- Editar usuario</a></p>

<p><a href="{$mybb->settings['bburl']}/{$config['admin_dir']}/index.php?module=user-banning&amp;uid={$uid}">- Banear usuario</a></p>

<p></p></div><br />

MEMBER_PROFILE_MODOPTIONS

Código:
<div class="profiletitle">Moderación</div>

<div class="profilecell">

<p><a href="{$mybb->settings['bburl']}/modcp.php?action=editprofile&amp;uid={$uid}">- Editar usuario.</a></p>

<p><a href="{$mybb->settings['bburl']}/modcp.php?action=banuser&amp;uid={$uid}">- Banear usuario.</a></p>

<p><a href="{$mybb->settings['bburl']}/modcp.php?action=editprofile&amp;uid={$uid}">- Añadir nota.</a></p>

<p></p></div><br />

MEMBER_PROFILE_CUSTOMFIELDS

Código:
{$customfields}

MEMBER_PROFILE_CUSTOMFIELDS_FIELD

Código:
<strong>{$customfield['name']}:</strong> {$customfieldval}<br />

MEMBER_PROFILE_REFERRALS

Código:
<strong>{$lang->members_referred}</strong> {$memprofile['referrals']}<br />

MEMBER_PROFILE_SIGNATURE

Código:
{$memprofile['signature']}

MEMBER_PROFILE_WARNINGLEVEL

Código:
<strong>{$lang->warning_level}</strong></a> <a href="{$warning_link}">{$warning_level}</a><br />

{$warn_user}

MEMBER_PROFILE_REPUTATION

Código:
<strong>{$lang->reputation}</strong> {$reputation} [<a href="reputation.php?uid={$memprofile['uid']}">{$lang->reputation_details}</a>] {$vote_link}

PASO 5: Editar el archivo MEMBER.PHP (Es un archivo core, osea, un archivo que encontrarás en la raíz del host de tu foro)

Primero buscas:

Código:
if(in_array($mybb->input['uid'], $buddy_list))

Y luego reemplazas todo el código por éste (Ten en cuenta que tienes que seleccionar desde el IF hasta donde se cierra el último corchete y reemplazar todo ese párrafo por éste):

Código:
if(in_array($mybb->input['uid'], $buddy_list))

        {

            $buddy_options = "<a href=\"./usercp.php?action=do_editlists&amp;delete={$mybb->input['uid']}&amp;my_post_key={$mybb->post_code}\" title=\"{$lang->remove_from_buddy_list}\"><span class=\"profilebutton\"><img src=\"images/remove_buddy.gif\"></span></a>&nbsp;&nbsp;";

        }

        else

        {

            $buddy_options = "<a href=\"./usercp.php?action=do_editlists&amp;add_username=".urlencode($memprofile['username'])."&amp;my_post_key={$mybb->post_code}\" title=\"{$lang->add_to_buddy_list}\"><span class=\"profilebutton\"><img src=\"images/add_buddy.gif\"></span></a>&nbsp;&nbsp;";

        }

        $ignore_list = explode(',', $mybb->user['ignorelist']);

        if(in_array($mybb->input['uid'], $ignore_list))

        {

            $buddy_options .= "<a href=\"./usercp.php?action=do_editlists&amp;manage=ignored&amp;delete={$mybb->input['uid']}&amp;my_post_key={$mybb->post_code}\" title\"{$lang->remove_from_ignore_list}\"><span class=\"profilebutton\"><img src=\"images/remove_ignore.gif\"></span></a>";

        }

        else

        {

            $buddy_options .= "<a href=\"./usercp.php?action=do_editlists&amp;manage=ignored&amp;add_username=".urlencode($memprofile['username'])."&amp;my_post_key={$mybb->post_code}\" title=\"{$lang->add_to_ignore_list}\"><span class=\"profilebutton\"><img src=\"images/add_ignore.gif\"></span></a>";

        }

Eso es todo!

Dejo capturas para que vean como queda:

[Imagen: mxU7xGE.png]

Espero les guste y les sirva.

Saludos!

P.D.: Toda la estilización (Véase diseño, colores y demás) fue hecha por mí desde 0. El contenido derecho con las pestañas o tabs, es una modificación de un código que encontre y adapte. La fuente del mismo la puedes encontrar aquí.

Última modificación: 13 Dec, 2013, 4:49 pm por SallieJac.

Eloy 13 Dec, 2013, 5:13 pm

No esta nada mal Aunque fuera genial la información del usuario encerrada en una Box con esquinas redondeadas bueno es una mania que tengo, Esta excelente esa modificación amigo me encantan los colores

Aprendiendo cada vez mas

Cluster 13 Dec, 2013, 5:19 pm

Queda muy lindo, gracias Smile

eNvy 13 Dec, 2013, 5:48 pm

(13 Dec, 2013, 5:13 pm)Mobius escribió: No esta nada mal Aunque fuera genial la información del usuario encerrada en una Box con esquinas redondeadas bueno es una mania que tengo, Esta excelente esa modificación amigo me encantan los colores

Como dije, cada uno puede estilizarlo a gusto, es cuestión de añadir o quitar clases y modificar el contenido ^^.

MaTiiass 13 Dec, 2013, 6:51 pm

Esta genial..en especial la proligidad con la que se ordenan las cosas voy a tratar de hacerlo pero con una imagen de fondo o algo asi para ver como queda..muy bueno gracias por compartirlo..

Delta 14 Dec, 2013, 3:30 am

Es jquery?

En ese caso recomiendo usar la versión de bootstrap

Enviado desde mi SK17i mediante Tapatalk

eNvy 14 Dec, 2013, 5:27 am

(14 Dec, 2013, 3:30 am)Delta escribió: Es jquery?

En ese caso recomiendo usar la versión de bootstrap

Enviado desde mi SK17i mediante Tapatalk

No, no tiene ningún jQuery, es simplemente editar plantillas y añadir CSS.

Delta 14 Dec, 2013, 5:28 am

(14 Dec, 2013, 5:27 am)eNvy escribió:
(14 Dec, 2013, 3:30 am)Delta escribió: Es jquery?

En ese caso recomiendo usar la versión de bootstrap

Enviado desde mi SK17i mediante Tapatalk

No, no tiene ningún jQuery, es simplemente editar plantillas y añadir CSS.

En cuanto tenga tiempo preparó un tutorial de bootstrap, que queda de pm

Enviado desde mi SK17i mediante Tapatalk

Patch-Xeco 24 Dec, 2013, 2:24 pm

Muy bueno, tengo solo una pregunta:

[spoiler]¿Los desencuadres de imagenes se arreglan por CSS?

[Imagen: j78j.png]

[/spoiler]

eNvy 24 Dec, 2013, 3:23 pm

#10

Sí, tienes que modificar un par de valores para que cuadre todo en su lugar (Está hecho para un foro de 1024px, si es más pequeño o más grande tienen que modificar los valores.

EDIT: Veo que lo solucionaste xD!

Te dejo una sugerencia... en la parte de Contacto, dependiendo de la cantidad de animes que tengan, la misma se desencuadra y se va hasta el fondo. Para eso, establece en ".tab-content" un height (Alto) del tamaño que tu quieras (Creo que 300px o 350px queda bien), y luego añade un "overflow Confused

croll;" para que aparezcan las barritas de navegación y quede prolijo ^^.

Saludos!

Última modificación: 24 Dec, 2013, 3:29 pm por SallieJac.