Navegando por unos de mis blogs preferidos, concretamente el recién creado de Trivergencia me he dado cuenta de que WordPress por defecto no justifica los textos si no que los alinea a la izquierda. Parece ser que los que crean los themes no se preocupan de estos detalles, pero a mi me parece que un texto bien escrito debe estar justificado (en cuanto a la posición en la pantalla se refiere :-P ) .
Hay varias formas para solucionar esto. La primera es utilizar el botón de justificar del editor visual de wordpress. Por defecto el botón tampoco aparece pero pulsando el ultimo botón de la derecha (el 16 del gráfico de abajo) aparece una nueva línea con el botón de justificar (el número 3).
Este botón simplemente lo que hace es añadir la línea de código siguiente al párrafo seleccionado.
<p style="text-align: justify;"> text </p>
El problema es que si alguna vez por alguna razón que no se me ocurre, quisieramos cambiarlo, habría que editar uno a uno todos los parrafos del blog. Inviable.
La solución más lógica es modificar el CSS de nuestro theme de forma que por defecto nos muestre los textos de las entradas del blog justificados.
Para eso hay que modificar el archivo style.css de nuestro theme y buscar el código (en mi caso la línea 330):
.entry p {
margin:10px 0px;
}
Para añadir una línea de este modo:
.entry p {
margin:10px 0px;
text-align: justify;
}
Con esto ya tendremos nuestro blog Justificado por defecto.
EDITADO:
Al probarlo en mi theme resulta que causaba un problema con las anotaciones. Lo he solucionado editando el código
.entry blockquote p {
margin-left:54px;
text-align: left;
}
Para restaurarle el align: left que tenía por defecto. Con eso todo funciona parfecto ahora.
Muy útil el consejo, lo ponemos en práctica inmediatamente.
Muchas gracias.
Como siempre, tus consejos son verdaderamente útiles y fáciles de implementar. ¡Muchas gracias!
Intento hacerlo, pero no encuentro .entry en mi style.css, ¿me podrías ayudar?
Un saludo
Hola.
He probado en tu blog y efectivamente no aparece .entry en tu css.
Simplemente añade .entry p {
text-align: justify;
} al final de tu archivo Style.css y funcionará.
Ya me dices si falla algo. :)
Un saludo
Era más simple de lo que creia gracias
Very nice!!
Hello.
:) reflects the couple’s low-key approach to their royal connections.
Bye.
Alucino con algunos comentarios… :D
En fin. :)
Funciona!!!
:) Yo todavía sigo viendo blogs que no lo usan… con lo bien que queda. jeje
No se desde hace cuanto tiempo que esta entrada esta. Simplemente quiero decir que para todos aquellos que no les haya funcionado esto, es más fácil. Si tienen mozilla, usan el Firebug y de este modo, seleccionan un párrafo del texto y miran que les pone, es decir en el CSS que se muestra, mirar que propiedad es, y de este modo si la saben en CSS de wordpress pueden añadir la linea justify. Si no lo entendieron (es posible, lo hice con prisas) mandad un mensaje a
[email protected]
Saludos!
Pues la entrada cumple un añito al final del mes. :) Fíjate que con el cambio de theme del blog todavía no lo he puesto en práctica aquí. No puedo entender por qué no hacen los themes con esta característica por defecto.
Tienes toda la razón que con el Firebug todo es más fácil, apunto en mi lista dedicarle un post completo al Firebug y a sus maravillas. Gracias por tu ayuda!
¡¡¡Muchas gracias por el dato, me es de mucha utilidad!!!
Excelente, era una tontería pero me estaba volviendo loco para justificar el texto.
Gracias!
¡Gracias!
Sigo sin entender como no lo ponen por defecto en los Themes. Alucinante.
Hace poco he comprado uno de pago para un nuevo proyecto y nada, que he tenido que hacer el truquito…
GRACIAS
De nada. :)
Muy útil. Aunque a la hora de buscarlo en el css, tube que hacerlo sin el p, supongo que cada codigo css es un mundo dependiendo del theme. Dejo el comentario para los que les haya costado encontrarlo.
Por lo demás una información perfecta!
Saludos!
Antoni
Hola Antoni. ¡Gracias por el comentario!
Es cierto que no funciona exactamente igual en todas las webs, pero entre el artículo y los comentarios, vamos cubriendo todas las opciones.
Un saludo!
Me ha sido muy útil en dos de mis blogs. ¡Gracias!
Gracias Jorge por el comentario. Me alegro que te sirviera.
Un saludo
me salvaste la vida, capo! gracias!
¡Gracias a tí! Me alegro que te sirva. Un saludo
Gracias, tan simple y tan difícil cuando no lo conoces
Gracias por el aporte, siempre lo quise. ¿Sabes en qué parte se coloca esto en el tema Twenty Twelve?
Gracias.
Gracias. Ya lo averigüé. Era en
.entry-content p, línea 792.Me alegra que lo hayas encontrado. Gracias por ponerlo aquí para otros que vengan.
Un saludo!
Todos debemos ayudarnos mutuamente :) Y a tener en cuenta que en cada tema WordPress el CSS es diferente ;) Ah, casi lo olvido: En este tema no es necesario modificar el <blockquote>.
:) Si, es complicado escribir artículos de este tipo por esa razón. Al final hay que saber un poquito para entenderlos. Un saludete y gracias de nuevo.
Ahora, una pregunta más.
¿Cómo se haría en un tema responsive?
Particularmente uso el tema SimpleCorp (de site5) y es responsive. En su
style.cssnada más trae llenosimports para las hojas de estilo y una para la principalmain.css.¿Cambiaría en cada archivo o sólo en uno?
Que sea responsive no debería afectar. Siempre habrá un código css que sea fijo. En el caso de ese tema, el archivo se llama main-css.css.
Pero como buen tema, en las opciones podrás encontrar un apartado que se llama Custom CSS, así es dónde tienes que poner el código.
Que es parecido al que pongo arriba, con una variación, no es entry sino entry-body lo que usan (mal por ellos):
.entry-body p {
text-align: justify;
}
Probado en su versión demo y funciona bien.
Ya me dices que tal va.
Muchas gracias, me funciona a la perfección :)
Excelentee!!! Me has salvado de tener que andar probando todas las opciones hasta dar con la correcta!! Abrazo y gracias!
Hola! Gracias! Todavía me sorprende que este artículo siga siendo de los más útiles cuando han pasado tantos años. :D
Un saludo!
Hey muchas gracias, exelente explicacion!