Tu primer tema

Código:

<center><div class="announcementbg"><div class="announcementheader">titulo de la tabla</div><div class="announcementcontent"><table border="0" cellpadding="0"><tbody><tr><td valign="top"><div class="tut1"><div style="height: 10px;"></div>dirigido a: Fuwa Aika & Más</div></td><td valign="top"><div class="tut2"><div style="height: 10px;"></div>Tutorial #018</div></td></tr><tr><td valign="top"><div class="tut3" style="margin-top: 5px;"><div style="height: 10px;"></div>30/45 mins Aprox.</div></td><td valign="top"><div class="tut4" style="margin-top: 5px;"><div style="height: 10px;"></div>Hakken Kodo</div></td></tr></tbody></table>

<div class="tablatitle">Preparando los cerebros</div>

¡Hola a todos, aquí con mi segundo tutorial! Esta vez un poco más complicado que el anterior ya que utiliza Java, pero primero les mencionaré que es lo que pidieron en [url=http://hakkenkodo.foroactivo.com/t11-propon-un-tutorial]Propón un Tutorial[/url] claro solicitado por [i]Fuwa Aika.[/i]

[quote="Fuwa Aika"]Me gustaría un tutorial para hacer tablillas con pestañas o perfiles con pestañas[/quote]

<div class="tablatitle">
[left]Materiales de construcción[/left]
</div>

En esta ocasión utilizaremos los Templates, Javascript y algo de CSS como toque final. Recuerda que para poder ver el tutorial completo debes de postear (; pero suerte a todos.

<div class="tablatitle">Primeros martillazos: bases</div>

Ya que vamos a trabajar con los perfiles, lo primero que hay que definir es la caja donde vamos a trabajar, en el CSS lleva la etiqueta "postprofile", sin embargo PRIMERO QUE NADA hay que decidir cuando va a medir el avatar a usar, en mi caso será de [i]250px por 400px[/i] así que el las hojas de CSS vamos a manejar lo siguiente ahora si:

[code].postprofile {
background: -webkit-linear-gradient(90deg,#1f2765,#2aacae);
border: 5px solid #202232;
display: block;
padding: 10px;
text-align: center;
width: 230px;
outline: 3px double #202232;
}[/code]

[i]background: -webkit-linear-gradient(90deg,#1f2765,#2aacae);[/i] El fondo, que es de dos colores.
[i]border: 5px solid #202232;[/i] El borde sólido de 5px.
[i]display: block;[/i] Estoy diciendo que el display es de bloque.
[i]text-align: center;[/i] La alineación del texto.
[i]padding: 10px;[/i] El espacio entre el límite de la caja y el contenido.
[i]width: 230px;[/i] El ancho de la caja (se le suma el padding dos veces).
[i]outline: 3px double #202232;[/i] Una línea fuera del borde, queda bastante linda.

Con ello ya tenemos el cuerpo general sin embargo queda bastante descuadrado pues el avatar queda fuera:
[spoiler="Img 1"][img]http://i.imgur.com/jQL3Bpm.png[/img][/spoiler]

Pero antes de continuar ¿Donde quieres cada cosa? ¿Donde quieres las pestañas? ¿Donde el rango, el avatar, el ID y datos extra? Debo dejar en claro que el número máximo de pestañas que se puede usar es de 3... intenté usar 4 pero descuadra todo el foro en los post.

En mi caso haré el siguiente orden: Botones de pestañas, Avatar y Rango. Todo esto en la primera pestaña.

Ya decidido esto sigamos.

<div class="tablatitle">
[left]Cimientos del perfil: Java y Templates[/left]
</div>

Desde ya vamos a instalar el Java, así que vamos a [i]Módulos[/i] >> [i]Gestión de los Códigos Javascript[/i] >> [i]Crear un nuevo JS[/i]. Colocamos de título "PestañasPerfiles" y pegamos el código, el java que vamos a manejar es el siguiente:
[code]$(document).ready(function(){
$('.btn1').click(function () {$('.cnt1').slideDown(700);$('.cnt2, .cnt3, .cnt4, .cnt5, .cnt6').slideUp(200)});
$('.btn2').click(function () {$('.cnt2').slideDown(700);$('.cnt1, .cnt3, .cnt4, .cnt5, .cnt6').slideUp(200)});
$('.btn3').click(function () {$('.cnt3').slideDown(700);$('.cnt1, .cnt2, .cnt4, .cnt5, .cnt6').slideUp(200)});
$('.btn4').click(function () {$('.cnt4').slideDown(700);$('.cnt1, .cnt2, .cnt3, .cnt5, .cnt6').slideUp(200)});
$('.btn5').click(function () {$('.cnt5').slideDown(700);$('.cnt1, .cnt2, .cnt3,.cnt4, .cnt6').slideUp(200)});
$('.btn6').click(function () {$('.cnt6').slideDown(700);$('.cnt1, .cnt2, .cnt3, .cnt4, .cnt5').slideUp(200)});
});[/code]

Después de pegar el código le colocamos en donde aparecerán: En los subforos y en los Temas, no más. Ahora sí vamos a un sitio más divertido: pero complejo: Los Templates. Para quien no sepa que son o como se manejan están los tutoriales de Haruko:
[list]
[*][url=http://hakkenkodo.foroactivo.com/t21-templates-indice-a-los-templates]Índice de los Templates[/url]
[*][url=http://hakkenkodo.foroactivo.com/t58-templates-agreement]Templates Agreement[/url]
[*][url=http://hakkenkodo.foroactivo.com/t68-templates-faq_body#163]Templates: Faq_body[/url]
[*][url=http://hakkenkodo.foroactivo.com/t111-template-index_body#399]Templates Index_body[/url]
[*][url=http://hakkenkodo.foroactivo.com/t159-template-index_box#772]Templates index_box[/url]
[/list]

Nosotros trabajaremos con los anuncios del tema lo cual es: [i]Visualización[/i] >> [i]Templates[/i] >> [i]General[/i] >> [i]viewtopic_body[/i] y presionamos en [i]Modificar[/i]. Buscaremos a partir de la línea 224... ahí borramos los [i]dd, dl, dt[/i] hasta la línea 242... más o menos, dejando todo limpio hasta el div clear ¡Pero no se aceleren! Primero hay que ver para que es cada cosa antes de hacer algo o mover lo que no sepamos.

[code]<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
<!-- div class="online2"></div-->
{postrow.displayed.POSTER_AVATAR}
<br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}<br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}<br />
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</div>

<div class="clear"></div>[/code]

[i]{postrow.displayed.POSTER_AVATAR}[/i] Es el avatar de cada uno.
[i]{postrow.displayed.POSTER_NAME}[/i] El ID de cada miembro que postea.
[i]{postrow.displayed.POSTER_RANK_NEW}[/i] El nombre del rango.
[i]{postrow.displayed.RANK_IMAGE}[/i] La imagen de cada rango.
[i]{postrow.displayed.profile_field.LABEL}[/i] En nombre de los datos que usualmente tiene uno (como número de mensajes, fecha de inscripción, etc.).
[i]{postrow.displayed.profile_field.CONTENT}[/i] El contenido de los datos de arriba.
[i]{postrow.displayed.profile_field.SEPARATOR}[/i] Lo que separa cada dato.
[i]{postrow.displayed.POSTER_RPG}[/i] Realmente ni idea de lo que sea pero lo dejo sin mover (?).
[i]{postrow.displayed.PROFILE_IMG}[/i] Imagen para ver el perfil.
[i]{postrow.displayed.PM_IMG}[/i] Imagen para Mp.
[i]{postrow.displayed.EMAIL_IMG}[/i] Imagen del Email.

En base a esto que ya sabemos podemos seguir con el siguiente paso.

<div class="tablatitle">Transformaciones del perfil: Solo Templates</div>

¿Recuerdan el orden en que quise poner todo? Botones de pestañas, Avatar, ID y Rango. Pues entonces hay que comenzar:

En la línea 224 después del "[i]!-- div class="online2"/div--[/i]" vamos a dar un salto de línea que nos deja en la 225, ahí pegaremos el div con las pestañas o mejor dicho, los botones que nos harán cambiar de pestaña a pestaña, lo cual nos dejará la línea 224 y 225 respectivamente:

[code]<!-- div class="online2"></div-->
<div class="pestañas"><ul><li class="btn1">Boton 1</li><li class="btn2">Boton 2</li><li class="btn3">Boton 3</li></ul></div>[/code]

En la línea 226 tenemos que dejar el avatar pero para que no termine fuera de la caja de post profile debemos de meterlo en otro div, así que usaremos lo siguiente:

[code]<div id="avatarsensual">{postrow.displayed.POSTER_AVATAR}</div>[/code]

Finalmente el rango que irá en la línea 227 dentro de otro div, eso si yo quise borrar el nombre del rango así que solo lo dejé de la siguiente manera:

[code]<div id="rangosensual">{postrow.displayed.RANK_IMAGE}</div>[/code]

[center][b]¡Stop![/b][/center]

Antes de seguir ¿No iba todo esto en la primera pestaña? Si, si, tienen razón pero no se alarmen que eso lo agregaremos justo ahora. En la línea 226 justo antes del avatar se agregan 2 div, uno es para marcar que inicia el contenido y el otro es para marcar que es la pestaña 1, si se junta y cierra todo deberá quedar así desde la 224 hasta la línea 227:

[code]<!-- div class="online2"></div-->
<div class="pestañas"><ul><li class="btn1">Boton 1</li><li class="btn2">Boton 2</li><li class="btn3">Boton 3</li></ul></div>
<div class="contenido"><div class="cnt1"><div id="avatarsensual">{postrow.displayed.POSTER_AVATAR}</div>
<div id="rangosensual">{postrow.displayed.RANK_IMAGE}</div></div>[/code]

En la línea 228 comenzaremos la Segunda pestaña con el div del contenido 2, al ser los datos lo que ira aquí, le crearemos un div para cada uno además de un general, lo cual nos dejará lo siguiente de la 228 a la 234 [strike]ignoren mis nombres ridículos[/strike]:

[code]<div class="cnt2"><div id="losdatitosdelainfo">
<!-- BEGIN profile_field -->
<div id="titulosensualin">{postrow.displayed.profile_field.LABEL} </div>
<div id="datitosensualin">{postrow.displayed.profile_field.CONTENT} </div>
<div id="separadorsensualin">{postrow.displayed.profile_field.SEPARATOR} </div>
<!-- END profile_field -->
</div></div>[/code]

A partir de la 235 borraremos TODO hasta el segundo end contact field antes del div clear, que está sobre la línea 239 -si borraron como arriba dejé -, y colocaremos eso como la pestaña 3 con lo siguiente, notando que ya son los botones finales así que colocaremos otro div después del de la pestaña de contenido de la siguiente forma:

[code]<div class="cnt3"><div id="botonesabretesesamo">{postrow.displayed.POSTER_RPG}
{postrow.displayed.PROFILE_IMG}
{postrow.displayed.PM_IMG}
{postrow.displayed.EMAIL_IMG}
<!-- BEGIN contact_field -->
{postrow.displayed.contact_field.CONTENT}
<!-- END contact_field -->
  </div></div></div>[/code]

Si notan, aquí al final son 3 divs los que se cierran, esto es porque estamos cerrando las tablas de pestañas ¿Qué significa esto? ¡Aun nos falta, no se alteren! Si cerramos la tabla con pestañas es porque quise dejar el nombre del usuario por fuera, justo por debajo del contenido de la tabla, de esta forma se verá, creo yo, más estético.


Línea  va el nombre del usuario el cual también agregaremos a otro div.
<div class="nombre-post">{postrow.displayed.POSTER_NAME}</div>

</div></div></center>

Código:

Sep sep

hello:

Sky Ice Queen escribió:Hello baby