Simple Machines Community Forum

SMF Support => Español (Spanish) => Language Specific Support => Tutoriales => Topic started by: Dhayzon on August 05, 2016, 11:39:04 PM

Title: [Estilo paginado - Css +Jquery ]
Post by: Dhayzon on August 05, 2016, 11:39:04 PM
cambiaremos esto

(https://lh3.googleusercontent.com/-BxFJSA7aVRc/V6Va6Bn5F5I/AAAAAAAAApY/6iYFy-ozeks/s0/chrome_2016-08-05_22-34-46.png)

por este otro exactamente,

(https://lh3.googleusercontent.com/-YzSThh9UOLk/V6VaquDBujI/AAAAAAAAApU/vnHVt-acQT4/s0/chrome_2016-08-05_22-33-15.png)

se puede hacer   de muchas formas pero esta fue la mas rápida  que pude hacerxD

primero asegúrate que tu tema tenga Jquery. +1.3

agregar al final de tu theme.js te tu tema plantilla etc.

  $(document).ready(function(){
$(".pagelinks").removeClass("floatleft");
     $(".pagesection .pagelinks").html(
     

                function(i, val) {
                  xd = val.replace(/\[|\]/g, '');
                       console.log(val);
                     return "<span class='smfPagination-label'>" + xd + "</span>";
                 }

            );

});



agregas esto al final de tu index.css

/*pagination
*dhayzon.com
*smf pagination Style Csss
*
*/
.smfPagination-label {
    width: 100%;
    display: inline-block;
    margin: 10px 0;
}

.smfPagination-label>a {
    background: #1a535f;
    padding: 6px 12px;
    display: inline-block;
    border-radius: 3px;
    color: white;
      text-decoration: none;
}
.smfPagination-label>strong {
    background: #c5543a;
    padding: 6px 12px;
    display: inline-block;
    border-radius: 3px;
    color: white;
}

.smfPagination-label>span {
    background: #1e4249;
    padding: 6px 12px;
    display: inline-block;
    border-radius: 3px;
    color: #fdf5ba;
    margin-right: 3px;
}



y listo :v  realmente no lo probe en el thema por defecto pero trate de adaptarlo
demo

http://cssdeck.com/labs/u3yabf9g
Title: Re: [Estilo paginado - Css +Jquery ]
Post by: Diego Andrés on August 06, 2016, 03:11:08 AM
Gracias por el tip, es bastante útil. En SMF 2.0 yo diría que es bastante engorroso modificar la paginación al gusto (si es un theme para descargar por ejemplo), además de css y js. Afortunadamente en smf 2.1 colocaron la paginacón en el index.template.php y ahora el poder es ilimitado en esa zona :D

Saludos y gracias por el aporte
Title: Re: [Estilo paginado - Css +Jquery ]
Post by: d3vcho on August 06, 2016, 06:13:24 AM
Muy buen tutorial. La verdad es bastante útil y queda muy bonito. Buen trabajo :)

Saludos
Title: Re: [Estilo paginado - Css +Jquery ]
Post by: -Rock Lee- on August 06, 2016, 10:47:33 AM
Parece bastante bueno voy a probarlo que tal :D gracias por compartir!


Saludos!
Title: Re: [Estilo paginado - Css +Jquery ]
Post by: Dhayzon on August 06, 2016, 11:59:57 AM
esto esta de mas   console.log(val); xD
Title: Re: [Estilo paginado - Css +Jquery ]
Post by: -Rock Lee- on August 06, 2016, 02:51:00 PM
Quote from: Dhayzon on August 06, 2016, 11:59:57 AM
esto esta de mas   console.log(val); xD

Ya me parecía... ¿No lo probaste en el theme default verdad? probé uno tengo y no funciona ya luego veo mas detallado si lo que me falta es el jquery +1.3


Saludos!
Title: Re: [Estilo paginado - Css +Jquery ]
Post by: Dhayzon on August 06, 2016, 03:29:02 PM
no directamente, pero si tienes la librería jquery debería funcionar muy bien, solo quede con la duda del css eso es lo que probablemente falle,

es probable que quede a si de desalineado xD  uno arriba y otro abajo

(https://lh3.googleusercontent.com/-MZa_Osl1JcM/V6Y61ecrxmI/AAAAAAAAAps/m3LGv8UIF4g/s0/chrome_2016-08-06_14-30-07.png)
Title: Re: [Estilo paginado - Css +Jquery ]
Post by: -Rock Lee- on August 06, 2016, 05:37:02 PM
Directamente no aplica el cambio... entonces debo buscar un theme use jquery para poder aplicarlo xD


Saludos!
Title: Re: [Estilo paginado - Css +Jquery ]
Post by: ^HeRaCLeS^ on August 07, 2016, 03:37:39 PM
Se agradece el aporte y siempre es bien recibido el aporte de cualquiera.

A mi particularmente no me gusta la idea de utilizar jquery cuando se puede lograr solo con css.
Y difiero mucho con el comentario de diego..

Quote from: Diego Andrés on August 06, 2016, 03:11:08 AM
En SMF 2.0 yo diría que es bastante engorroso modificar la paginación al gusto (si es un theme para descargar por ejemplo)

Con solo agregar dos lineas de codigo al index.template se puede modificar al gusto de cada uno la paginacion.