Noticias:

¿Quieres formar parte de Bomber Code? Entonces entra a este tema: Postulaciones al Staff

Menú principal

Editar Estilo estadisticas.

Publicado por BLUXTER, 07 Abril de 2017, 17:53

Tema anterior - Siguiente tema

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

BLUXTER

Buen dia Bombercode, soy nuevo por esta comunidad Me interesa todos los temas de programacion Web en general, de casualidad alguien sabe como Hacer esto.


Actualmente lo tengo asi:

Me gustaria que se viese de esta forma:
Cabe destacar que el css no se me da Muy Bien.
Adjunto mi BoardIndex template.
Mostrar contenido

Nice

#1
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

.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 :

.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

#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

Rock Lee

#2
Como nuestro buen amigo @Nice nos marco... lo que pides se hace editando el index.css del theme que estas usando, ahora para mostrar lo que deseas debes ver la parte de estadisticas de tu foro para sacar la linea que necesitas agregar/cambiar de los actuales que tienes. Solo debes buscar un poco en los archivos de smf que estan todos comentados y separados por cada cosa en especifico.


Saludos Familia!

BLUXTER

Compañero, Luego de haber hecho las modificaciones dichas anteriormente, se me visualiza de la Siguiente Forma:


Rock Lee

#4
Eso es por que falta definir el estilo en esa zona, asegúrate de haber aplicado los cambios correctamente ademas si le das a inspeccionar elemento rápidamente te daras cuenta. Por la dudas adjunta tu index.css para darle una mirada...


Saludos Familia!

BLUXTER

Cita de: Rock Lee en 09 Abril de 2017, 12:00
Eso es por que falta definir el estilo en esa zona, asegúrate de haber aplicado los cambios correctamente ademas si le das a inspeccionar elemento rápidamente te daras cuenta. Por la dudas adjunta tu index.css para darle una mirada...


Saludos Familia!

Adjunto mi Index.css
Mostrar contenido

Rock Lee

Cita de: BLUXTER en 09 Abril de 2017, 14:00
Adjunto mi Index.css
Mostrar contenido
Apenas puedo le trataré darle una mirada ;) a menos otro pueda antes!


Saludos Familia!

Nice

buenas amigo  te dejo el index.css con las modificaciones que menciones antes , debes fijarte bien que hice cambio, y asi podras comprender por que se hizo, lo que aplique fue lo que te mencione arriba, solo te queda modificar el php para poner las letras dentro

StephenCarpintero

#8
Hola Bluxter como estás? Espero que muy bien, me he tomado el trabajo de modificar un poco el estilo a tal grado de dejarlo como querías.

Te menciono dos cosas:

Primero que nada debes tener en cuenta que utilice iconos de Font-Awesome para realizar estas modificaciones.

Segundo no he llevado lo responsive pero si me das tiempo lo puedo dejar como te gusta.

y por ultimo tiene que agregar la siguiente liga a tu <head></head> ( <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> )para que se muestren los iconos de igual modo en el estilo lo cargue a modo "import" solo ten en cuenta que esto con el tiempo lo hace mas lento al sitio, pero por ser 4 iconos creo que no pasa nada.

ANTES HACETE UN BACKUP DE TU ESTILO "Index.css"

Y como funciona todo esto? Solo reemplaza el archivo CSS que adjunto y veras los cambios como si fuera mágia. Y si no funciona, me avisas.

Espero te sirva y sino me avisas!

Saludos.


BLUXTER

Cita de: StephenCarpintero en 10 Abril de 2017, 16:46
Hola Bluxter como estás? Espero que muy bien, me he tomado el trabajo de modificar un poco el estilo a tal grado de dejarlo como querías.

Te menciono dos cosas:

Primero que nada debes tener en cuenta que utilice iconos de Font-Awesome para realizar estas modificaciones.

Segundo no he llevado lo responsive pero si me das tiempo lo puedo dejar como te gusta.

y por ultimo tiene que agregar la siguiente liga a tu <head></head> ( <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> )para que se muestren los iconos de igual modo en el estilo lo cargue a modo "import" solo ten en cuenta que esto con el tiempo lo hace mas lento al sitio, pero por ser 4 iconos creo que no pasa nada.

ANTES HACETE UN BACKUP DE TU ESTILO "Index.css"

Y como funciona todo esto? Solo reemplaza el archivo CSS que adjunto y veras los cambios como si fuera mágia. Y si no funciona, me avisas.

Espero te sirva y sino me avisas!

Saludos.

Hola Compañero, Muchas gracias por compartir un poco de tu tiempo colaborandome Mira, resulta y acontece que una ves e editado el CSS Reemplazando el que tenia por el tuyo, se me visualiza de la siguiente Manera (En la parte inferior, porque en la superior no se visualiza nada)
Mostrar contenido
[cerrar]

Lo otro es que una ves añadido, la Linea que me has indicado en el Index.template.php Me salta un error El codigo quedo de la siguiente forma:
Mostrar contenido
[cerrar]

Rock Lee

Te da error por que nuestro buen amigo se olvido cerrar la sentencia del font, tienes ponerlo asi:  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />';


Saludos Familia!

StephenCarpintero

Si perdón, me olvide que lo cargabas en php jaja ponlo de la siguiente manera:

// This CSS contain the style for Status Bar.
echo ' <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">';

Saludos.

BLUXTER

Adjunto el Index.template Luego de haber hecho todo ello salta el Mismo Error. Hice lo que me indicaron pero lanza el Error, Le elimine lo que me dijeron para que no se visualice dicho error, temporalmente.

Rock Lee

Cita de: BLUXTER en 10 Abril de 2017, 19:04
Adjunto el Index.template Luego de haber hecho todo ello salta el Mismo Error. Hice lo que me indicaron pero lanza el Error, Le elimine lo que me dijeron para que no se visualice dicho error, temporalmente
Al verlo te da error por estar mal el echo, es decir, esta mal aplicado... lo que debes (ando desde el celular sino lo hacía en un toque) hacer busca antes del cierre head debe haber unas lineas varios juntos trata agregarlo entre medio (sin el '; al final) o si lo agregas al final asegúrate sea el único tenga al final ';


Saludos Familia!

StephenCarpintero

En parte el moco fue mio y en parte como dice Lee va hasta abajo!

Te envío el archivo modificado.

Si no funciona ya le vemos.

Saludos!

Temas Similares (5)