Ver el tema anterior Ver el tema siguiente Ir abajo

Mensaje por Admin el Jue Mar 24, 2016 6:37 am
Melody circus
» Nombre de la tablilla: Melody Circus.
» Tipo: Expediente.
» Autor: Sydonia.

¿Qué es esto? Oh por dios, la primera aportación que hago ¡Que vergüenza!

Primero que nada quiero dar gracias a s-cnsy por su tutorial Tabs para dummies, que fue utilizado para hacer esta tablita Aaaah

Si hay algún error en no dudeis en poneros en contacto conmigo via MP para poder arreglarlo.


Normas
» No retires el crédito.

» No la distribuyas alegando que es tuya.

» El código está en hide, postea si lo vas a usar.

» Si finalmente decides no usarlo edita tu post para avisar de ello.

» No se postea para ver, he dejado un preview abajo.

» Si la usas debes dejar un link directo y una captura de pantalla.

» Sí, puedes usarlo de modelo para tu foro, pero tienes que informarme de ello.

» Sí, puedes editar las fonts y los colores, éstos los dejo abajo para que sea más fácil.

» Sí, puedes cambiar las imágenes de abajo por otros tamaños o incluso borrarlas, pero queda bajo tu responsabilidad.


Colores
#6e6f71
#57688b
#9aaaba
#9fc2bb
#f5a46c
white
black


Preview:

Código:

avatar
Ver perfil de usuario
Admin

Volver arriba Ir abajo

Mensaje por Admin el Jue Mar 24, 2016 6:37 am
Perfiles con Templantes
dirigido a: Interesados!
Tutorial #7
30 aprox, + - según user.
para:  Amatist


Amatist escribió:Un tutorial sobre usar tabs o pestañas en el perfil en los post (postprofile) aquí en foroactivo. Sé que es posible.. pero por mucho que lo intento no lo consigo (?


Como pueden ver este tutorial es gracias al pedido que realizaron en "Petición de Tutoriales", si bien Amatist especifico que fueran con pestañas aun trabajo en ellas, pero para que vayan introduciéndose en el mundo de los Templantes un poquito mas y entiendan de que va esta zona para cuando cree las pestañas, aquí veremos como editar los perfiles de los post de una forma bonita y original! No se olviden de mostrar sus resultados tras a ver experimentado un poco con esto!



comenzamos


Lo primero que tenemos que saber antes de comenzar es lo que vamos hacer ¿Como queremos nuestro perfil? ¿Como lo vamos a realizar? Yo tenia en mente hacer: Nombre - Imagen (datos) - Rango Y que al pasar el raton por la imagen aparezca los datos, algo muy visto pero perfecto para modificar por primera vez esta parte de lo templantes. Los templantes de los perfiles se encuentran en: Visualizacion > Templantes > General > viewtopic_body el tercero contando de abajo para arriba.


No voy a dar mucha vuelta respecto a este tutorial por que si no los voy a confundir mas de lo que ya estan y esa no es mi idea. Primer paso pinchamos la tuerca que sirve para editar el templante elegido. Los perfiles comienzan en la linea 217 Segundo paso quitar todos los < dl> y sus derivados como < dt> y la etiqueta que los cierra. Todos hasta la linea 237 que es donde termina la seccion de los perfiles. Ya borrados cada uno de ellos quitaremos tambien cualquier
que crucemos por ahi. Dejando esto como resultado:

resultado:

Código:Seleccionar todo el contenido
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
 
 {postrow.displayed.POSTER_AVATAR}
 <strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
 
 {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
 
 
 <!-- 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}
 
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 
 </div>


Siguiente paso, sabes para que sirve cada cosa! A medida de ire sabiendo para que sirve agregaremos un div encerrandolos para poder editarlos de mejor manera.

Código:Seleccionar todo el contenido
{postrow.displayed.POSTER_AVATAR} - Avatar
<div id="avatar-post">{postrow.displayed.POSTER_AVATAR}</div>

<strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong> - Nombre
<div class="nombre-post">{postrow.displayed.POSTER_NAME}</div>

{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE} - Nombre del rango e imagen del rango.
<div id="rango-post">{postrow.displayed.RANK_IMAGE}</div> (borramos el titulo)

<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} - Titulo de la info
{postrow.displayed.profile_field.CONTENT} - Respuesta de la info
{postrow.displayed.profile_field.SEPARATOR} - Separador entre info e info
<!-- END profile_field -->
<div id="info-datos">
<!-- BEGIN profile_field -->
<div id="title-post">{postrow.displayed.profile_field.LABEL} </div>
<div id="dato-post">{postrow.displayed.profile_field.CONTENT} </div>
<div id="separa-post">{postrow.displayed.profile_field.SEPARATOR} </div>
<!-- END profile_field -->
</div>

{postrow.displayed.POSTER_RPG} ----
{postrow.displayed.PROFILE_IMG} - Ir al perfil
{postrow.displayed.PM_IMG} - Enviar MP
{postrow.displayed.EMAIL_IMG} - Enviar Mail
<!-- BEGIN contact_field -->
{postrow.displayed.contact_field.CONTENT} - Otros botones
<!-- END contact_field -->
<div id="caja-botones">{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>


resultado:


Ahora comenzaremos un poco la edicion de css.


Código:Seleccionar todo el contenido
.postprofile{
propiedades aqui
}

Lo que podemos editar aquí es el ancho, el fondo, los bordes, agregar padding, margines, entre etcétera de cosas. Lo que deben saber  es que mi edicion se basara sobre un avatar de 200x300 de tamaño.


css utilizado .postprofile:

Código:Seleccionar todo el contenido
.postprofile {
width: 200px;
padding: 10px;
background-color: #fff;
float: right;
background-image: url('http://i.imgur.com/BycWDsS.jpg');
border: 5px solid #536482;
outline: 3px double #fff;
outline-offset: -4px;
}


Nombre: La idea es ponerlo sobre el avatar, asique por unos minutos volveremos a nuestros templantes. Ya saben donde. Copiaremos y cortaremos todo el div correspondiente al nombre y lo pegaremos sobre el div del avatar dejando esa seccion de esta forma:

Código:Seleccionar todo el contenido
<!-- div class="online2"></div-->
<div class="nombre-post">{postrow.displayed.POSTER_NAME}</div>
<div id="avatar-post">{postrow.displayed.POSTER_AVATAR}</div>
<div id="rango-post">{postrow.displayed.RANK_IMAGE}</div>


Rango: Por el momento no existe ninguno, por lo que me ire a crear uno rapido, la imagen que utilizare sera esta: http://i.imgur.com/4c5njOS.png por si ustedes la quieren ^^ Si ponene registrar tanto para el nombre como para el rango, veran que el rango no queda bien, si no que quede mucho mas abajo y no queda bonito, asique usaremos su etiqueta para moverlo ¿pero cual era? #rango-post

css utilizado:

Código:Seleccionar todo el contenido
#rango-post {
position: relative;
margin-top: -42px;
}


Ahora editaremos el nombre con su etiqueta de div .nombre-post yo por mi parte hare algo sencillo para que no quede algo sobre cargado.

css utilizado:

Código:Seleccionar todo el contenido
.nombre-post {
width: 120px;
text-align: center;
padding: 40px;
background: #242424;
}

.nombre-post a {
display: block;
background: #99C2BB;
padding: 3px;
text-transform: uppercase;
font-size: 9px;
font-weight: lighter;
}



¡Ya falta poco! Ahora viene el hermoso efecto hover! Pero primero hay que colocar la cosas en su lugar ¿no creen? Vamos a los templantes, ya ya, no se quejen. Abajo del div final del nombre crearemos una nueva caja que llamaremos id="efecto-post" apretamos enteer dejamos una linea en blanco y cerramos. ¿que colocamos ahi adentro? En un inicio el avatar, enter y espacio. Crearemos oooooooooooootra caja, si, esta se llamara class="total-post" espacio y cerramos. Ahora dentro pondremos desde id="info-datos" hasta . Lo que nos dejaria un templantes ordenado de esta forma:

Código:Seleccionar todo el contenido
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
<div class="nombre-post">{postrow.displayed.POSTER_NAME}</div>
                          <div id="efecto-post">
                            <div id="avatar-post">{postrow.displayed.POSTER_AVATAR}</div>
                        
<div class="total-post">
<div id="info-datos">
<!-- BEGIN profile_field -->
<div id="title-post">{postrow.displayed.profile_field.LABEL} </div>
<div id="dato-post">{postrow.displayed.profile_field.CONTENT} </div>
<div id="separa-post">{postrow.displayed.profile_field.SEPARATOR} </div>
<!-- END profile_field -->
</div>
<div id="caja-botones">{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>
<div id="rango-post">{postrow.displayed.RANK_IMAGE}</div>
</div>



Chau chau adios, que fuimos todo lo que una peronas y codigos pueden ser. Por eso templante, te digo chau ♪ ♫ Cualquierconcienciaconconcancionesoriginalesesmeracoincidencia Y con esto le decimos adios a los templantes y hola al css y ultimos pasos!


Lo que tenemos que hacer antes que nada es darle la propiedad de overflow:hidden; a la etiqueta de efecto-post lo cual provoca que cualquier cosa que se salga de sus medidas desaparezca que ¿adivinen que? hará que nuestros datos digan chau y hola a nuestro gusto.


css :

Código:Seleccionar todo el contenido
#efecto-post {
width: 200px;
height: 300px;
overflow: hidden;
}

Lo siguiente a editar es .total-post ¿que tenemos que hacer con esto?para empezar darle un position: relative; y luego moverlo a nuestro gusto para que quede sobre el avatar, simulemos que tenemos el rton sobre el avatar y asi deberia quedar con el hover ¿ok? luego pasaremos a eso.


css:

Código:Seleccionar todo el contenido
.total-post {
background: transparent;
position: relative;
display: block;
width: 180px;
margin-top: -290px;
margin-left: 10px;
height: 240px;
}

Bien ahi! Ya vamos teniendo bastante forma. Ahora le daremos las propiedades que mas nos gusten a la pequeña caja de los datos. Ancho, alto, fondos, bordes, si queremos que tenga scroll al pasar el limite de info, o si vamos a poner lo justo y necesario.


css:

Código:Seleccionar todo el contenido
#info-datos {
outline: 1px solid #505050;
border: 3px solid #aaa;
background: url('http://i.imgur.com/xYrXSWq.png');
display: block;
width: 162px;
padding: 5px;
height: 190px;
}

Sobre la caja de los botontes. Ya sea para ponerle fondo, centrado, esto o lo otro su caja se llama: #caja-botones Como yo lo estoy haciendo sencillo, prefiero solamente centrarlo y separarlo de la caja de los datos.

css:

Código:Seleccionar todo el contenido
#caja-botones {
text-align: center;
margin-top: 10px;
}

Lo ultimo que nos queda por darle forma y color es el interior de la caja de datos: #title-post el nombre/titulo, #dato-post la respuesta/datos y #separa-post el espacio en blanco que podemos transformar el lineas, imagenes, etc, etc

css:

Y tatatatatata ¡ultimo paso! eeeeeeeeeeeeeeeeeel HOVER! okno Quizas ahora me rebusque un poquitito pero si me tuvieron paciencia ahora ¿no pueden darme unos segundos mas? Bueno busquemos en nuestro css .total-post en ella debe haber un margin-left en mi caso el valor que tiene es de 10px, ahora nos acordaremos de este numero y lo borraremos dándole el siguiente valor: margin-left: -200px;. Y agregaremos a esta misma etiqueta el siguiente css:

Código:Seleccionar todo el contenido
 -moz-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
-webkit-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;

Recordemos el sieguente tutorial ¿Hovers? ¿Eso que es? si queremos experimentar con nuestro hover. Bien, ahora iremos al principio y colocaremos esto en nuestro css:

Código:Seleccionar todo el contenido
#efecto-post:hover .total-post{
  margin-left: 10px;
}




Resultado



Codigos finales


CSS FINAL:

Templante FINAL:

Código:Seleccionar todo el contenido
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
<div class="nombre-post">{postrow.displayed.POSTER_NAME}</div>
                          <div id="efecto-post">
                            <div id="avatar-post">{postrow.displayed.POSTER_AVATAR}</div>
                        
<div class="total-post">
<div id="info-datos">
<!-- BEGIN profile_field -->
<div id="title-post">{postrow.displayed.profile_field.LABEL} </div>
<div id="dato-post">{postrow.displayed.profile_field.CONTENT} </div>
<div id="separa-post">{postrow.displayed.profile_field.SEPARATOR} </div>
<!-- END profile_field -->
</div>
<div id="caja-botones">{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>
<div id="rango-post">{postrow.displayed.RANK_IMAGE}</div>
</div>



Posibles creaciones:




Notas del final
Recuerden que cualquier duda o problema pueden decirlo por aquí tranquilamente y yo contestare lo mas rápido posible, si ven que su mensaje se me a pasado de largo  pueden enviar mp ^^
Y animencen a experimentar y mostrar como les a quedado!!

avatar
Ver perfil de usuario
Admin

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.