¿Quieres reaccionar a este mensaje? Regístrate en el foro con unos pocos clics o inicia sesión para continuar.

Tu primer tema

Ver el tema anterior Ver el tema siguiente Ir abajo

Mensaje por Sky Ice Queen el Dom Ene 17, 2016 7:59 pm
Lee esta información antes de lanzarte en la administración de tu foro:

¿Cómo acceder a tu panel de administración?
En el menú superior, presiona conexión: una nueva página se abre, luego escribe el nombre de usuario "admin" y la contraseña que has indicado en tu inscripción. Si has perdido tu contraseña, pulsa aquí. Una vez conectado, presionas el vínculo "Panel de administración" en la parte inferior de la página.

¿Cómo modificar el aspecto de tu foro?
Seleccionando un tema (cada tema contiene imágenes, iconos y colores diferentes). Para ello, ve al panel de administración, luego presiona "Gestión" y elige uno de los temas propuestos. Siempre podrás modificar o elegir otro tema.

¿Cómo administrar las categorías y los foros?
Puedes añadir, modificar y suprimir las categorías y los foros que habías creado en cualquier momento e indefinidamente. Para ello pulsa en el panel de configuración, luego en gestión en el pequeño foro y luego presiona añadir (un foro o una categoría).
Sky Ice Queen
Sky Ice Queen
Admin de la Luna de Sky


Mensajes : 19
Fecha de inscripción : 17/01/2016
Edad : 25
Localización : México

Inventario
HP:
Tu primer tema Left_bar_bleue100/100Tu primer tema Empty_bar_bleue  (100/100)
Nivel-Exp: 1-0
Habilidades:

https://skyfallenangel.foroactivo.mx

Volver arriba Ir abajo

Mensaje por Sky Ice Queen el Jue Feb 11, 2016 6:59 am
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>
Sky Ice Queen
Sky Ice Queen
Admin de la Luna de Sky


Mensajes : 19
Fecha de inscripción : 17/01/2016
Edad : 25
Localización : México

Inventario
HP:
Tu primer tema Left_bar_bleue100/100Tu primer tema Empty_bar_bleue  (100/100)
Nivel-Exp: 1-0
Habilidades:

https://skyfallenangel.foroactivo.mx

Volver arriba Ir abajo

Mensaje por Sky Ice Queen el Sáb Feb 13, 2016 2:42 am
Make Your Skin!
dirigido a: Los Usuarios amables
Tutorial #018
30/45 mins Aprox.
Hakken Kodo

Juntando la dinamita:


Bien, pues aquí les quiero comenzar a contar como voy formando mi propio skinn, para esto primero que nada voy a crear mi foro, aviso de una vez que es versión phpBB3, y que comencé con el tema "Español Prosilver". A partir de aquí yo le quité los colores en general a partir del color de fuente de citación hacia abajo, basta con borrar los códigos de los colores hexadecimales, no necesitas elegir otro color, así tendremos la facilidad de manejar los colores del foro a nuestro gusto.

¿Ya tienes una idea de como va a ser tu foro? La imagen de cabecera (usaré una de 960x540), la forma de las categorías, las imágenes, los colores a usar, en mi caso usaré los colores siguientes: 536482, a1dbb2, ffe4ac, fbc965, f7a543, f45d4b y ff7475. También colocaré los perfiles en los mensajes del lado izquierdo y los widgets del costado derecho de mi foro, ya con la imagen de cabecera colgada y los colores quitados, nos quedará una imagen general del foro así:

Imagen aquí.

Dicho esto comenzaremos por algo sencillo, las modificaciones en el Panel de Administración. Estas se buscarán al cambiar a modo "Avanzado" el interfaz del Panel, o sea al entrar al panel le presionan en donde dice "Avanzado" que se muestra en la siguiente imagen:



Sky Ice Queen
Sky Ice Queen
Admin de la Luna de Sky


Mensajes : 19
Fecha de inscripción : 17/01/2016
Edad : 25
Localización : México

Inventario
HP:
Tu primer tema Left_bar_bleue100/100Tu primer tema Empty_bar_bleue  (100/100)
Nivel-Exp: 1-0
Habilidades:

https://skyfallenangel.foroactivo.mx

Volver arriba Ir abajo

Mensaje por Sky Ice Queen el Jue Mayo 12, 2016 9:56 pm

AweSome 536482
AweSome a1dbb2
AweSome ffe4ac
AweSome fbc965
AweSome f7a543
AweSome f45d4b
AweSome ff7475



AweSome 536482
AweSome a1dbb2
AweSome ffe4ac
AweSome fbc965
AweSome f7a543
AweSome f45d4b
AweSome ff7475
Sky Ice Queen
Sky Ice Queen
Admin de la Luna de Sky


Mensajes : 19
Fecha de inscripción : 17/01/2016
Edad : 25
Localización : México

Inventario
HP:
Tu primer tema Left_bar_bleue100/100Tu primer tema Empty_bar_bleue  (100/100)
Nivel-Exp: 1-0
Habilidades:

https://skyfallenangel.foroactivo.mx

Volver arriba Ir abajo

Mensaje por Sky Ice Queen el Dom Mayo 15, 2016 11:00 pm
Código:
Sep sep

hello:
Its me



@Sky Ice Queen escribió:Hello baby
Sky Ice Queen
Sky Ice Queen
Admin de la Luna de Sky


Mensajes : 19
Fecha de inscripción : 17/01/2016
Edad : 25
Localización : México

Inventario
HP:
Tu primer tema Left_bar_bleue100/100Tu primer tema Empty_bar_bleue  (100/100)
Nivel-Exp: 1-0
Habilidades:

https://skyfallenangel.foroactivo.mx

Volver arriba Ir abajo

Mensaje por Contenido patrocinado

Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.
Links of Forum
Credits
Brotherhood
El skinn ha sido diseñado por Sky Ice Queen (Comet of Angel) y Nick Chris Voralberna para uso exclusivo de Academy Dark Wind con ayuda de tutoriales encontrados en Dixinmortal, Source Code, Serendipity, Asistencia foroactivo y tutoriales de Tumblr. Las imágenes ocupadas fueron encontradas en la web y son propiedad de su creador, la edición estuvo a cargo de Sky y Caro-psike. A los creadores de las tablillas se les agradece.
La creación de personajes, trama e historia estuvo a cargo de la webmistress del foro los administradores y staff. Tanto las historias como los personajes creados en este foro, son propiedad del Staff y de los usuarios del foro; agradeciendo a todos esos fieles usuarios que siguen con nosotros desde el inicio y hasta ahorita.

Todo plagio será denunciado ¡NO COPIES, SÉ ORIGINAL!
The Loser High