Autor Tema: Editar Estilo estadisticas.  (Leído 1211 veces)

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

Desconectado BLUXTER

  • [L0] Ladrón de espacio en la BD
  • Mensajes: 18
  • co
  • Foroland, El Inicio es Ahora.
    • Ver Perfil
    • Foroland
Editar Estilo estadisticas.
« el: 07 abril de 2017, 05:53 pm »
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

Desconectado Nice

  • [L0] Ladrón de espacio en la BD
  • Mensajes: 5
  • ve
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
    • .:MMproyectscans:.
Re:Editar Estilo estadisticas.
« Respuesta #1 el: 08 abril de 2017, 02:23 pm »
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
« Última Modificación: 08 abril de 2017, 06:24 pm por Nice »

Conectado Rock Lee

  • Administrador
  • *
  • Mensajes: 811
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:Editar Estilo estadisticas.
« Respuesta #2 el: 08 abril de 2017, 06:08 pm »
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!
« Última Modificación: 08 abril de 2017, 06:11 pm por Rock Lee »

Desconectado BLUXTER

  • [L0] Ladrón de espacio en la BD
  • Mensajes: 18
  • co
  • Foroland, El Inicio es Ahora.
    • Ver Perfil
    • Foroland
Re:Editar Estilo estadisticas.
« Respuesta #3 el: 09 abril de 2017, 02:29 am »
Compañero, Luego de haber hecho las modificaciones dichas anteriormente, se me visualiza de la Siguiente Forma:


Conectado Rock Lee

  • Administrador
  • *
  • Mensajes: 811
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:Editar Estilo estadisticas.
« Respuesta #4 el: 09 abril de 2017, 12:00 pm »
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!
« Última Modificación: 09 abril de 2017, 12:14 pm por Rock Lee »

Desconectado BLUXTER

  • [L0] Ladrón de espacio en la BD
  • Mensajes: 18
  • co
  • Foroland, El Inicio es Ahora.
    • Ver Perfil
    • Foroland
Re:Editar Estilo estadisticas.
« Respuesta #5 el: 09 abril de 2017, 02:00 pm »
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

Conectado Rock Lee

  • Administrador
  • *
  • Mensajes: 811
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:Editar Estilo estadisticas.
« Respuesta #6 el: 09 abril de 2017, 10:07 pm »
Adjunto mi Index.css
Mostrar contenido
Apenas puedo le trataré darle una mirada ;) a menos otro pueda antes!


Saludos Familia!

Desconectado Nice

  • [L0] Ladrón de espacio en la BD
  • Mensajes: 5
  • ve
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
    • .:MMproyectscans:.
Re:Editar Estilo estadisticas.
« Respuesta #7 el: 10 abril de 2017, 11:25 am »
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

  • Visitante
Re:Editar Estilo estadisticas.
« Respuesta #8 el: 10 abril de 2017, 04:46 pm »
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.

« Última Modificación: 10 abril de 2017, 05:01 pm por StephenCarpintero »

Desconectado BLUXTER

  • [L0] Ladrón de espacio en la BD
  • Mensajes: 18
  • co
  • Foroland, El Inicio es Ahora.
    • Ver Perfil
    • Foroland
Re:Editar Estilo estadisticas.
« Respuesta #9 el: 10 abril de 2017, 06:24 pm »
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

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

Conectado Rock Lee

  • Administrador
  • *
  • Mensajes: 811
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:Editar Estilo estadisticas.
« Respuesta #10 el: 10 abril de 2017, 06:40 pm »
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

  • Visitante
Re:Editar Estilo estadisticas.
« Respuesta #11 el: 10 abril de 2017, 06:49 pm »
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.

Desconectado BLUXTER

  • [L0] Ladrón de espacio en la BD
  • Mensajes: 18
  • co
  • Foroland, El Inicio es Ahora.
    • Ver Perfil
    • Foroland
Re:Editar Estilo estadisticas.
« Respuesta #12 el: 10 abril de 2017, 07:04 pm »
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.

Conectado Rock Lee

  • Administrador
  • *
  • Mensajes: 811
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:Editar Estilo estadisticas.
« Respuesta #13 el: 10 abril de 2017, 09:41 pm »
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!
Enviado desde AdkImode

StephenCarpintero

  • Visitante
Re:Editar Estilo estadisticas.
« Respuesta #14 el: 10 abril de 2017, 09:57 pm »
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!