Contrata servicios web en ougcNetwork.
MyBB-Es.com Personalización y configuración de los foros MyBB Tutoriales / Guías Perfil ordenado + Tabs

Perfil ordenado + Tabs

eNvy

(This post was last modified: 13 Dec, 2013, 4:49 pm by SallieJac.)
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)

Code:
<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

Code:
#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

Code:
<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

Code:
<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

Code:
<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

Code:
{$customfields}

MEMBER_PROFILE_CUSTOMFIELDS_FIELD

Code:
<strong>{$customfield['name']}:</strong> {$customfieldval}<br />

MEMBER_PROFILE_REFERRALS

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

MEMBER_PROFILE_SIGNATURE

Code:
{$memprofile['signature']}

MEMBER_PROFILE_WARNINGLEVEL

Code:
<strong>{$lang->warning_level}</strong></a> <a href="{$warning_link}">{$warning_level}</a><br />
{$warn_user}

MEMBER_PROFILE_REPUTATION

Code:
<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:

Code:
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):

Code:
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:

[Image: mxU7xGE.png]


[Image: ueL62B9.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í.

Eloy

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

Cluster

Queda muy lindo, gracias Smile
Smile

eNvy

13 Dec, 2013, 5:13 pm Mobius wrote:
 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

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

Es jquery?

En ese caso recomiendo usar la versión de bootstrap

Enviado desde mi SK17i mediante Tapatalk

eNvy

14 Dec, 2013, 3:30 am Delta wrote:
 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:27 am eNvy wrote:
14 Dec, 2013, 3:30 am Delta wrote:
 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

Muy bueno, tengo solo una pregunta:

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

[Image: j78j.png]

[/spoiler]

eNvy

(This post was last modified: 24 Dec, 2013, 3:29 pm by SallieJac.)
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 "overflowConfusedcroll;" para que aparezcan las barritas de navegación y quede prolijo ^^.

Saludos!
Next Oldest Next Newest
Show Threaded Mode Print Thread