Cómo centrar automáticamente el botón 'Leer Más' en cada entrada

Mastian · 13 Jul 2011

Buenass, miren queria saber cómo hacer para centrar el "Leer Más" o  en cada entrada, pero que sea automático, y tambien cuál es la linea para cambiarle el color de fondo de dicho botón.

Uso theme Mystique versión: 2.4.2

JacoboXYZ · 13 Jul 2011

Prueba a buscar lo siguiente:

HTML:

readmorecontent{text-align:right}

Y pruebas a cambiarlo por center, a ver si funciona.

Mastian · 13 Jul 2011

FlightSimulatorFC dijo:
Prueba a buscar lo siguiente:

HTML:

readmorecontent{text-align:right}

Y pruebas a cambiarlo por center, a ver si funciona.

No lo he encontrado en el index.php, ni en el footer.php

Osuka · 13 Jul 2011

Está en el css.

Wocker · 13 Jul 2011

Utiliza la etiqueta align:center.

Mastian · 13 Jul 2011

Osuka dijo:
Está en el css.

Si mirá, lo tengo así:

#featured-content a.readmore{position:absolute;z-index:2;bottom:-2px;right:20px;background:transparent url(images/readmore.png) no-repeat center top;width:130px;height:35px;line-height: 32px;text-indent:20px;color:#ddd;}

#featured-content a.readmore:hover{background-position:center bottom;color:#fff;}

¿Cuál deberia editar? y otra cosita, para cambiar el color del botón/fondo, cuál seria?, estuve cambiando algunos pero ninguno funcionó (actualmente el botón tiene color blanco y cuando se pone el mouse arriba gris)

Capo · 13 Jul 2011

#featured-content a.readmore:hover{background-position:center bottom;color:#fff;text-align:center;}

Cambialo por eso.

Mastian · 13 Jul 2011

Capo dijo:
#featured-content a.readmore:hover{background-position:center bottom;color:#fff;text-align:center;}

Cambialo por eso.

Por esto: readmorecontent{text-align:right} ?

Mastian dijo:
Por esto: readmorecontent{text-align:right} ?

No dije nada, perdón.
Puse esto: #featured-content a.readmore:hover{background-position:center bottom;color:#fff;text-align:center;} y sigue alineado a la izquierda :S

Capo · 13 Jul 2011

Busca esto:

PHP:

.post-content a.more-link{background-color:#eee;text-decoration:none;color:#666;text-shadow:#fff 1px 1px 1px;padding:2px 6px 3px 6px;margin:0;font-size:85%;text-transform:uppercase;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.post-content a.more-link:hover{background-color:#999;color:#fff;text-shadow:#666 1px 1px 1px;}
.post-content a.more-link.loading{border:0;margin:0 4px;padding:3px 8px;border:0;background:transparent url(images/loader-white.gif) no-repeat center center;}

Y cambialo por esto:

PHP:

.post-content a.more-link{background-color:#eee;text-decoration:none;color:#666;text-shadow:#fff 1px 1px 1px;padding:2px 6px 3px 6px;margin-left:280px;font-size:85%;text-transform:uppercase;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.post-content a.more-link:hover{margin-left:280px;background-color:#999;color:#fff;text-shadow:#666 1px 1px 1px;}
.post-content a.more-link.loading{margin-left:280px;border:0;margin:0 4px;padding:3px 8px;border:0;background:transparent url(images/loader-white.gif) no-repeat center center;}

Lo que siempre ocupo, es el "text-align", pero no me funciono con esto, realmente no se porque (si alguien sabe, que avise

). Entonces, ocupe un simple "margin-left:280px;" para enviarlo a la mitad el texto "Más".

Dime que colores quieres, y te ayudo con eso también.

Saludos,

Mastian · 13 Jul 2011

Capo dijo:

Busca esto:

PHP:

.post-content a.more-link{background-color:#eee;text-decoration:none;color:#666;text-shadow:#fff 1px 1px 1px;padding:2px 6px 3px 6px;margin:0;font-size:85%;text-transform:uppercase;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.post-content a.more-link:hover{background-color:#999;color:#fff;text-shadow:#666 1px 1px 1px;}
.post-content a.more-link.loading{border:0;margin:0 4px;padding:3px 8px;border:0;background:transparent url(images/loader-white.gif) no-repeat center center;}

Y cambialo por esto:

PHP:

.post-content a.more-link{background-color:#eee;text-decoration:none;color:#666;text-shadow:#fff 1px 1px 1px;padding:2px 6px 3px 6px;margin-left:280px;font-size:85%;text-transform:uppercase;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.post-content a.more-link:hover{margin-left:280px;background-color:#999;color:#fff;text-shadow:#666 1px 1px 1px;}
.post-content a.more-link.loading{margin-left:280px;border:0;margin:0 4px;padding:3px 8px;border:0;background:transparent url(images/loader-white.gif) no-repeat center center;}

Lo que siempre ocupo, es el "text-align", pero no me funciono con esto, realmente no se porque (si alguien sabe, que avise

). Entonces, ocupe un simple "margin-left:280px;" para enviarlo a la mitad el texto "Más".

Dime que colores quieres, y te ayudo con eso también.

Saludos,

Gracias! ahora si!

Te mando MP por lo de los colores!