Ú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. (1)

Ver el tema anterior Ver el tema siguiente Ir abajo

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

Mensaje por Mikae el Dom Jul 31, 2016 8:31 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, vamos a buscar esto dentro del template:
Código:
<!-- BEGIN disable_viewonline -->
Desde ahí comenzará el código que utilizaremos.
Debajo de eso, buscamos esto:
Código:
<!-- BEGIN switch_viewonline_link -->
 <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
 <!-- END switch_viewonline_link -->
y lo borramos.

Ahora primero vamos a editar el título de "¿Quién esta en linea?". Tomamos el siguiente código:
Código:
<!-- BEGIN switch_viewonline_link -->
 <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
 <!-- END switch_viewonline_link -->
Y lo cambiamos por este: ¿Cuál es la diferencia? Por mi parte yo añadí un div class, para editarlo luego en el CSS. También podemos borrar el enlace que se encuentra y se podrá cambiar el titulo al gusto que desees.
Código:
<!-- BEGIN switch_viewonline_link -->
 <div class="mikatitulo">Estadísticas de Mikae</div>
 <!-- END switch_viewonline_link -->
Ahora vamos a PA > Visualización > Colores > CSS Stylesheet y editaremos lo que colocamos en el template con este código:
Código:
.mikatitulo {
propiedades a tu gusto aquí
}


Ya tenemos un primer avance. Ahora tomamos este código:
Código:
<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<br />
<em>{LEGEND} : {GROUP_LEGEND}</em>

</p>
Y le añadiremos un div class o id, como gusten al rededor de ese código.
Código:
<div id="mikacontenedor"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<br />
<em>{LEGEND} : {GROUP_LEGEND}</em>

  </p></div>
Lo editaremos igual en el css:
Código:
#mikacontenedor {
codigos aqui a tu gusto
}
Código que yo utilice:

Código:
#mikacontenedor {
    background: #E8E8E8;
    margin: -10px 10px;
    padding: 10px;
    text-align: center;
    width: auto;
}


Vamos bien hasta ahora. Ahora pondremos bonita la estructura de adentro del codigo #mikacontenedor, yo use el table, para organizar todo e un bonito tablón.
{TOTAL_USERS_ONLINE}: Este "código" sirve para lista de conectados. La lista de conectados: "En total hay 1 usuario en línea: 1 Registrado, 0 Ocultos y 0 Invitado "
{RECORD_USERS} La parte de "La mayor cantidad de usuarios en línea fue 1 el Mar 11 Ago 2015 - 13:23."
{LOGGED_IN_USER_LIST} La parte de "Usuarios registrados: Admin"
{L_ONLINE_USERS}{L_CONNECTED_MEMBERS} La parte de "Miembros conectados en las últimas 24 horas: Admin"
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK} La parte de "Ningún miembro celebra su cumpleaños hoy
Ningún miembro celebra su cumpleaños en los 7 próximos días"
{LEGEND} El titulo de la leyenda
{GROUP_LEGEND} Los grupos de la leyenda

Yo voy a dividir lo ya mencionado en tres partes. La imagen de online, la segunda parte le pondré {TOTAL_USERS_ONLINE}{RECORD_USERS}{LOGGED_IN_USER_LIST}{L_ONLINE_USERS}{L_CONNECTED_MEMBERS} y la tercera columna ira {GROUP_LEGEND}. Ojo, ustedes pueden ubicarlo como deseen, hasta hacer un bosquejo de como lo desean.
Tomamos de nuevo este código:
Código:
<div id="mikacontenedor"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<br />
<em>{LEGEND} :&nbsp;{GROUP_LEGEND}</em>

  </p></div>
Borramos lo de adentro, menos el div del contenedor, y reemplazamos por nuestra estructura ya armada:
Código:
<div id="mikacontenedor">Aquí ira lo armado</div>

Ahora lo pondré en un table
Código:
<div id="mikacontenedor"><table><tr><td><div id="mikacaji1">Primera columna</div></td><td><div id="mikacaji2">Segunda columna</div></td><td><div id="mikacaji3">Tercera columna</div></td></tr></table></div>
Ya cuando introduzco todo
Quedarí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">{GROUP_LEGEND}</div></td></tr></table></div>


En el CSS, vamos a editar cada caja.
Código:
#mikacaji1 {
codigos que deseas en la caja 1
}
#mikacaji2 {
codigos que deseas en la caja 2
}
#mikacaji3 {
codigos que deseas en caja 3
}



¡Que bello! (?) Bien, tenemos la estructura lista.
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.