Importante:

¿Como pedir soporte? (Marzo 18, 2015)

Perfil ordenado + Tabs
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 puede...

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)

<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

#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: Announcements with Marquee Plugin [1.4]F7F7F;
    	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: Announcements with Marquee Plugin [1.4]F7F7F;
    	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

<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

<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

<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

{$customfields}

MEMBER_PROFILE_CUSTOMFIELDS_FIELD

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

MEMBER_PROFILE_REFERRALS

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

MEMBER_PROFILE_SIGNATURE

{$memprofile['signature']}

MEMBER_PROFILE_WARNINGLEVEL

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

MEMBER_PROFILE_REPUTATION

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

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

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]

[Imagen: 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í.
Última modificación: December 13, 2013, 3:49 pm por SallieJac.
0 0
Tema anterior Tema siguiente
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
Queda muy lindo, gracias Smile
(December 13, 2013, 4: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 ^^.
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..
Es jquery?

En ese caso recomiendo usar la versión de bootstrap

Enviado desde mi SK17i mediante Tapatalk
(December 14, 2013, 2: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.
(December 14, 2013, 4:27 am)eNvy escribió:  
(December 14, 2013, 2: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
Muy bueno, tengo solo una pregunta:

Spoiler:
¿Los desencuadres de imagenes se arreglan por CSS?

[Imagen: j78j.png]
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!
Última modificación: December 24, 2013, 2:29 pm por SallieJac.