Autor Tema: Como personalizar estadisticas WRAP  (Leído 76 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Sucuri
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 31
    Ingreso: Abril de 2020
  • co
  • Exploremos juntos!
    • Ver Perfil
    • Exploremos
Como personalizar estadisticas WRAP
« on: 01 Junio de 2020, 07:10 pm »
Hola buen día estimados compañeros de Bombercode en esta oportunidad me gustaría pedirles un poco de vuestra ayuda sobre como puedo personalizar las estadísticas del tema wrap para darles un toque estético de la siguiente forma.



Actualmente las estadísticas de mi sitio se visualizan de la siguiente forma


Mi sitio es: https://exploremos.co/foro es donde me encuentro implementando este sistema, cabe resaltar que me encuentro trabajando con el tema Redsy

Conectado Rock Lee

  • Administrador
  • *
  • Mensajes: 1041
    Ingreso: Enero de 2014
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:Como personalizar estadisticas WRAP
« Respuesta #1 on: 01 Junio de 2020, 08:20 pm »
Estaba pensando si respondi esto y lo recorde por "ForoLand" :P por eso te cito la respuesta:

buen dia amigo para hacer lo que dice hay que hacer cambios en index.css de tu tema , que son un poco simple hacer los cuadros, el contenido como la letras ya es algo que tendrias que editar en el php, para que puedas meter el contendo dentro del cuadro, solo debes buscar donde se proporciona la estadistica y lo publica en el cuadro , para luego meterlo dentro de el.

para hacer el cuadro es cambio en el index.css de tu tema , primero editaras la medida, de tu preferencia en la parte

Código: [Seleccionar]
.iclinks li.value
{
color: #232323;
font-size: 0.8em;
background: #232323; (este es el color de la letra, el estaba en #FFF que es blanco, #232323 es negro)
border-radius: 10px;
height: 40px; (Tamaño de largo del cuadro) (le puedes cambiar por medida de preferencia)
width: 120px; (Tamaño de ancho del cuadro) (le puedes cambiar por medida de preferencia)
line-height: 25px;
padding: 9px 1px;
margin: -10px; (inclui este para dar un margen con la tabla de contenido )
margin-left: 50px;
margin-right: 1px;
}

para cambiar el color de los cuadros localiza .iclinks li.green , .iclinks li.blue , .iclinks li.red , .iclinks li.orange , .iclinks li a , que son los que define el color de ellos,

por ejemplo :

Código: [Seleccionar]
.iclinks li.blue
{
background: #FFF;
}
esto haria que el cuadro segundo llamado blue sea de color blanco

despues editas el #iclinks

lo pones de la siguiente forma

Código: [Seleccionar]
#iclinks
{
margin: 30px 0; (esto deja un margen para que los cuadros no se peguen con el anuncio de google)
width: 100%;
height: 35px;
}

asi tendras tu cuadros hecho luego las letras y su ubicacion la haras en su fuente ya que el la parte inde.css esta listo
https://www.bombercode.net/foro/soporte-smf-en-espanol/editar-estilo-estadisticas/

No es el mismo theme pero iba por la misma idea, no estoy en la PC para verificar pero deberia funcionar como quieres!


Saludos Familia!
« Última Modificación: 01 Junio de 2020, 08:29 pm por Rock Lee »

Desconectado Elvinson

  • [L0] Ladrón de espacio en la BD
  • Mensajes: 7
    Ingreso: Abril de 2020
  • pe
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
    • kekoworld
Re:Como personalizar estadisticas WRAP
« Respuesta #2 on: 01 Junio de 2020, 09:25 pm »
Código: [Seleccionar]
Show some statistics if stat info is off.
echo '
<div id="index_common_stats">
<div class="posts">
<i class="fa fa-comments"></i>
<h2>', $txt['posts_made'], '</h2>
<span class="stat">
', $context['common_stats']['total_posts'], '
</span>
</div>
<div class="topics">
<i class="fa fa-comment"></i>
<h2>', $txt['topics'], '</h2>
<span class="stat">
', $context['common_stats']['total_topics'], '
</span>
</div>
<div class="members">
<i class="fa fa-users"></i>
<h2>', $txt['members'], '</h2>
<span class="stat">
', $context['common_stats']['total_members'], '
</span>
</div>
<div class="last_member">
<i class="fa fa-user"></i>
<h2>', $txt['welcome_member'], '</h2>
<span class="stat">
', $context['common_stats']['latest_member']['link'], '
</span>
</div>
</div>';


Código: [Seleccionar]
/* Custom Stats */
#index_common_stats {
float: none;
position: static;
text-align: inherit;
display: flex;
justify-content: center;
margin: 10px 0;
}
#index_common_stats div {
flex-basis: 20%;
text-align: left;
background-color: #fff;
border-radius: 4px;
box-shadow: 2px 3px 0px 1px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.05);
margin: 0 5px;
padding: 20px 15px 15px;
color: #646464;
}
#index_common_stats div i {
position: absolute;
margin-top: -36px;
font-size: 10pt;
display: block;
padding: 10px;
border-radius: 100%;
background-color: #F75353;
color: #fff;
}
#index_common_stats div h2 {
text-transform: uppercase;
font-size: 10pt;
display: block;
margin: 5px 0 2px;
}
#index_common_stats div span {
font-size: 18pt;
line-height: 25px;
}
#index_common_stats div.topics i {
background-color: #51D466;
}
#index_common_stats div.members i {
background-color: #32C8DE;
}
#index_common_stats div.last_member i {
background-color: #F78153;
}

Listo compa ahy las tienes :D