Advertisement:

Author Topic: [Estilo paginado - Css +Jquery ]  (Read 3933 times)

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,167
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
[Estilo paginado - Css +Jquery ]
« on: August 05, 2016, 11:39:04 PM »
cambiaremos esto



por este otro exactamente,



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.

Code: [Select]
  $(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

Code: [Select]
/*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

Offline Diego Andrés

  • Customizer
  • SMF Hero
  • *
  • Posts: 3,357
  • Gender: Male
    • DiegoSetroc on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: [Estilo paginado - Css +Jquery ]
« Reply #1 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

SMF Tricks - Free & Premium Responsive Themes for SMF.

Online d3vcho();

  • Sempiterno
  • Lead Localizer
  • SMF Hero
  • *
  • Posts: 3,948
  • Gender: Male
    • frandominguez03 on GitHub
Re: [Estilo paginado - Css +Jquery ]
« Reply #2 on: August 06, 2016, 06:13:24 AM »
Muy buen tutorial. La verdad es bastante útil y queda muy bonito. Buen trabajo :)

Saludos

"Greeting Death as an old friend, they departed this life as equals."

Offline Rock Lee

  • Local Moderator
  • SMF Hero
  • *
  • Posts: 3,007
  • Gender: Male
  • I also speak english :D
    • BomberCode.Oficial on Facebook
    • RockLee-BC on GitHub
    • @Bomber_Code on Twitter
    • Bomber Code ~ La nueva era del conocimiento
Re: [Estilo paginado - Css +Jquery ]
« Reply #3 on: August 06, 2016, 10:47:33 AM »
Parece bastante bueno voy a probarlo que tal :D gracias por compartir!


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code © 2018
Ayudas - Aportes - Tutoriales - Y mucho mas!!!


Ayudame via PayPal

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,167
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
Re: [Estilo paginado - Css +Jquery ]
« Reply #4 on: August 06, 2016, 11:59:57 AM »
esto esta de mas   console.log(val); xD

Offline Rock Lee

  • Local Moderator
  • SMF Hero
  • *
  • Posts: 3,007
  • Gender: Male
  • I also speak english :D
    • BomberCode.Oficial on Facebook
    • RockLee-BC on GitHub
    • @Bomber_Code on Twitter
    • Bomber Code ~ La nueva era del conocimiento
Re: [Estilo paginado - Css +Jquery ]
« Reply #5 on: August 06, 2016, 02:51:00 PM »
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!
¡Regresando como cual Fenix! ~ Bomber Code © 2018
Ayudas - Aportes - Tutoriales - Y mucho mas!!!


Ayudame via PayPal

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,167
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
Re: [Estilo paginado - Css +Jquery ]
« Reply #6 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


Offline Rock Lee

  • Local Moderator
  • SMF Hero
  • *
  • Posts: 3,007
  • Gender: Male
  • I also speak english :D
    • BomberCode.Oficial on Facebook
    • RockLee-BC on GitHub
    • @Bomber_Code on Twitter
    • Bomber Code ~ La nueva era del conocimiento
Re: [Estilo paginado - Css +Jquery ]
« Reply #7 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!
¡Regresando como cual Fenix! ~ Bomber Code © 2018
Ayudas - Aportes - Tutoriales - Y mucho mas!!!


Ayudame via PayPal

Offline ^HeRaCLeS^

  • SMF Hero
  • ******
  • Posts: 3,656
  • ♥ Valen ♥
    • AdkTeam.net on Facebook
    • @adk_team on Twitter
    • SmfPersonal
Re: [Estilo paginado - Css +Jquery ]
« Reply #8 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..

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.
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*

SMFPersonal