[Tutorial] Poner pestañas en el perfil al estilo vBulletin

nocktis21 25 Oct, 2010, 3:30 pm

Les dire como poner el perfil con las pestañitas de vbulletin aunque ya es cuestion suya modificarlas en colores y como quieren que este ordenado todo.
Quedaria algo asi:
[Imagen: perfilq.png]

Lo primero es subir este archivo a "images/tu tema".
[attachment=2191]

Luego van a "PA->Plantillas y Estilos->Plantillas->Tu tema->Miembro-> member profile" y sustituyen todo por lo siguiente.

Código:
<html>

<head>

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

{$headerinclude}

</head>

<body>

<script type="text/javascript" src="{$theme['imgdir']}/tabcontent.js">

</script>

{$header}

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">

<tr>

<td width="75%" valign="top">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tr>

<td align="left" class="trow1" valign="middle">{$avatar}</td>

<td class="trow1" align="left" width="100%">

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

<span class="smalltext">

({$usertitle})<br />

{$groupimage}

<strong>{$lang->registration_date}</strong> {$memregdate}<br />

<strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />

<strong>{$lang->local_time}</strong> {$localtime}<br />

<strong>{$lang->postbit_status}</strong> {$online_status}

</span>

</td>

</tr>

{$awaybit}

</table>

<br />

<div id="toolbar" class="usertabs"><div id="nav"><ul id="countrytabs" class="shadetabs">

<li><a href="#" rel="country1" class="selected"><b>Mensajes de visita</b></a></li>

<li><a href="#" rel="country2"><b>Acerca de mi</b></a></li>

<li><a href="#" rel="country3"><b>Estadisticas</b></a></li>

<li><a href="#" rel="country4"><b>Contactar</b></a></li>

<li><a href="#" rel="country5"><b>Firma</b></a></li>

</ul></div></div>

<div style="border:1px solid gray; width:100%px; margin-bottom: 1em; padding: 0px">

<div id="country1" class="tabcontent">

<!-- ProfileComments -->{$comments_index}<!-- /ProfileComments -->

</div>

<div id="country2" class="tabcontent">

{$profilefields}

</div>

<div id="country3" class="tabcontent">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tr>

<td class="trow1"><strong>{$lang->joined}</strong></td>

<td class="trow1">{$memregdate}</td>

</tr>

<tr>

<td class="trow2"><strong>{$lang->lastvisit}</strong></td>

<td class="trow2">{$memlastvisitdate} {$memlastvisittime}</td>

</tr>

<tr>

<td class="trow1"><strong>{$lang->total_posts}</strong></td>

<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total})<br /><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></td>

</tr>

<tr>

<td class="trow2"><strong>{$lang->timeonline}</strong></td>

<td class="trow2">{$timeonline}</td>

</tr>

{$reputation}

{$warning_level}

</table>

</div>

<div id="country4" class="tabcontent">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tr>

<td class="trow1"><strong>{$lang->homepage}</strong></td>

<td class="trow1">{$website}</td>

</tr>

{$sendemail}

<tr>

<td class="trow2"><strong>{$lang->pm}</strong></td>

<td class="trow2"><a href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a></td>

</tr>

<tr>

<td class="trow1"><strong>{$lang->icq_number}</strong></td>

<td class="trow1"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=icq&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['icq']}</a></td>

</tr>

<tr>

<td class="trow2"><strong>{$lang->aim_screenname}</strong></td>

<td class="trow2"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=aim&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['aim']}</a></td>

</tr>

<tr>

<td class="trow1"><strong>{$lang->yahoo_id}</strong></td>

<td class="trow1"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=yahoo&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['yahoo']}</a></td>

</tr>

<tr>

<td class="trow2"><strong>{$lang->msn}</strong></td>

<td class="trow2"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=msn&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['msn']}</a></td>

</tr>

</table>

</div>

<div id="country5" class="tabcontent">

{$signature}

</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")

countries.setpersist(true)

countries.setselectedClassTarget("link") //"link" or "linkparent"

countries.init()

</script>

</td>

<td><img src="{$theme['imgdir']}/pixel.gif" height="1" width="8" alt=""/></td>

<td width="25%" valign="top">

<table class="tborder" border="0" cellspacing="1" cellpadding="1">

<tr><td colspan="1" class="thead"><center><strong>Mini Estadisticas</strong></center></td></tr>

    <td class="trow1">&nbsp;<FONT SIZE=2><strong>{$lang->joined}</strong><br />&nbsp;{$memregdate}<br />

&nbsp;<strong>{$lang->total_posts}</strong><br />&nbsp;{$memprofile['postnum']} <br /></font></td>

<tr>

<td class="trow2" align="right"><a href="#" rel="country3"><FONT SIZE=2>Mostrar Estadísticas Completas</font></a></td>

</tr>

</table>

<br />{$buddylist}

</td>

</tr>

</table>

{$footer}

</body>

</html>

Luego van a "PA->Plantillas y Estilos->Estilos->Tu tema->Agregar hoja de estilo.
En el nombre ponen "usertabs.css" y seleccionan "escribir mi propio codigo" (aquí es donde cambian el color de las pestañas, ni me acuerdo cuales son pero exprimentenle un poco xD)

Código:
.usertabs {

    margin-left: 0;

    margin-top: 1px;

    margin-bottom: 0;

    list-style-type: none;

    text-align: left;

    font-size: 11px;

}

.usertabs ul {

margin: 0;

padding: 0;

}

.usertabs li {

display: inline;

margin: 0;

}

.usertabs li a {

background: #676767;

color: #FFFFFF;

position: relative;

z-index: 1;

border: 1px solid #939FAE;

border-bottom: 0;

padding: 8px;

text-decoration: none;

}

.usertabs li a:visited {

color: #2d2d2d;

text-decoration: none;

}

.usertabs li a:hover {

color: #FFFFFF;

text-decoration: none;

}

.usertabs li a.selected {

background: #303B4A;

color: #fff;

border-color: #262D35;

}

.usertabs li a.selected:hover {

text-decoration: none;

}

.tabcontent {

background: #FBFCFF;

display: none;

padding: 5px;

border: 1px solid #999;

margin-top: 7px;

}

.box-thing {

background: #f7f7f7;

border: 1px solid #8e8e8e;

padding: 8px;

}

@

media print {

.tabcontent {

display:block !important;

}

}

Última modificación: 25 Jan, 2012, 6:57 pm por Azagthoth.

Night~ 26 Oct, 2010, 8:25 am

Bien ahí man ;D
Gracias por el tuto... No había un plugin para hacer esto?
Tiene algunas cosas buenas hacerlo así pero también otras malas jaja.
Probado en localhost ;D

Última modificación: 26 Oct, 2010, 8:25 am por Royal.

nentab 26 Oct, 2010, 9:05 am

(26 Oct, 2010, 8:25 am)Night~ escribió: Bien ahí man ;D
Gracias por el tuto... No había un plugin para hacer esto?
Tiene algunas cosas buenas hacerlo así pero también otras malas jaja.
Probado en localhost ;D

No... No hay ningún plugin para ponerte el perfil en pestañas.

Y... Cosas malas? Cuales? No tiene ninguna. xDDDDD

nocktis21 26 Oct, 2010, 4:16 pm

Exacto... es depende de como lo utilices xP y la personalización que le des... como se le dio aquí en SoporteMyBB que quedo muy bien =)

Edson Ordaz 26 Oct, 2010, 5:37 pm

(26 Oct, 2010, 8:25 am)Night~ escribió: No había un plugin para hacer esto?

No no hay pero se podria crear para usuarios que no les gusta batallar xD! Que opinan?

Bour Elvan 26 Oct, 2010, 6:43 pm

Yo estoy de acuerdo edson 8-) haah

nocktis21 26 Oct, 2010, 7:45 pm

Batallar eh... si solo es cosa de copiar y pegar... claramente dice borrar todo y copiar y pegar todo el texto html... y el texto css se tiene que agregar... no veo nada de complicado en eso pero bueno, alla cada quien.

Edson Ordaz 26 Oct, 2010, 7:55 pm

(26 Oct, 2010, 7:45 pm)~EroKenji escribió: Batallar eh... si solo es cosa de copiar y pegar... claramente dice borrar todo y copiar y pegar todo el texto html... y el texto css se tiene que agregar... no veo nada de complicado en eso pero bueno, alla cada quien.

Ey amigo hay usuarios que ni instalar un tema saben no con el hecho de que usted tenga completos conocimientos con MyBB no quiere decir que todos ademas si hay usuarios que pfff como les gusta lo facil y mas bien creo que ala mayoria le gusta lo facil pero bueno no estaria mal el desarrollo de este!!
Ami tambien me parece buena idea!

Saludos!

nocktis21 26 Oct, 2010, 8:01 pm

Si, soy perfectamente consiente de eso... pero si no saben si quiera hacer eso es mejor aprender... ya que cualquier webmaster no solo hace una modificacion y en el foro se utilizan lenguajes de programacion web. De otro modo solo le estaríamos perjudicando y en cambio si le explicamos hariamos todo lo contrario.

EDITO: Igual esto no es algo muy complicado... ademas se explica que hacer, ¿Qué mas se podría pedir?

Última modificación: 26 Oct, 2010, 8:03 pm por Azagthoth.

Bour Elvan 26 Oct, 2010, 8:15 pm

#10

A ver un plugin no esta demás. Todo plugin es bien recibido

Novedad [Tutorial] Poner pestañas en el perfil al estilo vBulletin