Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


{ TUTORIAL TEMPLATE } Modificando estructura de estadísticas. (2)

Ver el tema anterior Ver el tema siguiente Ir abajo

{ TUTORIAL TEMPLATE } Modificando estructura de estadísticas. (2)

Mensaje por Mikae el Dom Jul 31, 2016 8:33 pm


Modificando estructura de estadísticas.
Las templates modificadas están marcadas en rojo antes de publicarlas y después en verde, una vez aplicadas en tu foro.

Recomendación: Es necesario crearse un foro de prueba, totalmente obligatorio.

Ya con nuestro foro vamos a:
Panel de Administración ->Visualización->Templates> General > index_body

Empezamos

Una vez dentro del template, ya teniendo nuestra plantilla, ahora vamos a personalizar la estructura que hemos armado, colocar propiedades adecuadas, mantener el orden y limpieza.

Primero debemos tener en cuanta el orden de los colores, la composición de estos. Normalmente se suele cometer errores en los colores, por eso sugiero utilizar una paleta de colores, o un pattern de acuerdo a los colores generales del foro.

Ahora vamos a personalizar las leyendas para ponerlas bonitas.
Tomamos la estructura final que logramos en la clase anterior.
Código:
<div id="mikacontenedor"><table><tr><td><div id="mikacaji1"><img src="http://placehold.it/350x300"></div></td><td><div id="mikacaji2">{TOTAL_USERS_ONLINE}{RECORD_USERS}{LOGGED_IN_USER_LIST}{L_ONLINE_USERS}{L_CONNECTED_MEMBERS}</div></td><td><div id="mikacaji3">{GROUP_LEGEND}</div></td></tr></table></div>

Borramos esto de ese código:
Código:
{GROUP_LEGEND}

Ahí vamos a colocar la edición de leyendas, esta será directa. Primero armaremos la estructura de los grupos, dependiendo de cuantos tengas.
Código:
<div class="grupi1"><a href="Enlace del grupo">Nombre del grupo 1</a></div>
<div class="grupi2"><a href="Enlace del grupo">Nombre del grupo 2</a></div>
<div class="grupi3"><a href="Enlace del grupo">Nombre del grupo 3</a></div>
<div class="grupi4"><a href="Enlace del grupo">Nombre del grupo 4</a></div>
<div class="grupi5"><a href="Enlace del grupo">Nombre del grupo 5</a></div>
<div class="grupi6"><a href="Enlace del grupo">Nombre del grupo 6</a></div>

Dentro de mi código estaría así:
Código:
<div id="mikacontenedor"><table><tr><td><div id="mikacaji1"><img src="http://placehold.it/350x300"></div></td><td><div id="mikacaji2">{TOTAL_USERS_ONLINE}{RECORD_USERS}{LOGGED_IN_USER_LIST}{L_ONLINE_USERS}{L_CONNECTED_MEMBERS}</div></td><td><div id="mikacaji3"><div class="grupi1"><a href="Enlace del grupo">Nombre del grupo 1</a></div>
<div class="grupi2"><a href="Enlace del grupo">Nombre del grupo 2</a></div>
<div class="grupi3"><a href="Enlace del grupo">Nombre del grupo 3</a></div>
<div class="grupi4"><a href="Enlace del grupo">Nombre del grupo 4</a></div>
<div class="grupi5"><a href="Enlace del grupo">Nombre del grupo 5</a></div>
<div class="grupi6"><a href="Enlace del grupo">Nombre del grupo 6</a></div></div></td></tr></table></div>

Registramos la estructura, y tendremos algo así:

Editaremos la estructura de las leyendas, vamos al css.
Para que el código tenga el mismo efecto en cada una de las leyendas.
Código:
.grupi1, .grupi2, .grupi3, .grupi4, .grupi5, .grupi6 {
propiedades a tu gusto, padding, width, font, etc.
}

Para separar un color de background o letra individual usaremos este código aparte:
Código:
.grupi1 { background: #443355; }
.grupi2 { background: #7A3E44; }
.grupi3 { background: #ABD8ED; }
.grupi4 { background: #AF9B94; }
.grupi5 { background: #AB3E36; }
.grupi6 { background: #DEF3E3; }

Quedará algo así según lo que le coloques.


Les recomiendo no hacerla rectangulares ya que con lo más visto ahora, pueden hacerlo circulares hasta cuadrados, así puede lucir con tu propio encanto. Yo por ejemplo no solo lo deje así, decidí editar la parte del enlace, para darle un pequeño estilo:
Código:
.grupi1 a, .grupi2 a, .grupi3 a, .grupi4 a, .grupi5 a, .grupi6 a{
propiedades
}


Yo por mi parte le añadí un background, color, padding y border-radius

Por último y no menos importante editaremos esta zona que no tocamos en el anterior tutorial


Vamos a la estructura del template y buscamos esto:
Código:
<!-- BEGIN switch_statistics_link -->
 <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
 <!-- END switch_statistics_link -->

 <!-- BEGIN switch_statistics_nolink -->
 <div class="h3">{L_STATISTICS}</div>
 <!-- END switch_statistics_nolink -->

<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
Vamos a borrar esta parte
Código:
<!-- BEGIN switch_statistics_link -->
 <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
 <!-- END switch_statistics_link -->

 <!-- BEGIN switch_statistics_nolink -->
 <div class="h3">{L_STATISTICS}</div>
 <!-- END switch_statistics_nolink -->

Y nos quedaremos con lo que "sobra" eso lo vamos a editar.
Código:
<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
Cambiamos el atributo p por div class o id, el cual luego editaremos en el css
Código:
<div class="pagi">
{TOTAL_POSTS}
</div>
<div class="pagi">
{TOTAL_USERS}
</div>
<div class="pagi">
{NEWEST_USER}
</div>
En el css:
Código:
.pagi {
    background-color: #FFF;
    border: 3px double #CCC;
    overflow: hidden;
    padding: 5px;
    display: inline-block;
    text-align: center;
    width: 290px;
    margin: 10px;
}

También se puede editar lo que sale en negrita, por ejemplo el número de mensajes, el link del último registrado, mediante este código:
Código:
.pagi strong{
cosas aqui
}



Eso es todo por hoy, también se pueden hacer estadísticas con pestañas, si deseas esa clase, será extra, dependiendo de cuantos pidan, la haré.
mikae © 2016
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

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.