Mejorar el tema por defecto de WordPress: Twenty Fourteen

Pues aquí estamos, empezando a meter contenido en este blog que es un poco de todo. Una de las cosas que me he propuesto compartir en Alfredico.com es cómo solucionar problemas técnicos que me encuentro en el día a día. Y en el primer día de existencia, ya me he encontrado con algo que puedo contaros cómo “arreglar”.

El caso es que este blog está basado en la plataforma WordPress; y utiliza el tema por defecto Twenty Fourteen, pero hay una cosa que no me gustaba en este tema, y es la anchura del contenido.

Me explico: La anchura máxima de cualquier cosa que escribas está limitada a 474 pixeles, con lo cual no se aprovecha la anchura de pantallas grandes, una cosa así:

Pues bien, editando el CSS del tema, podemos aprovechar todo el ancho de la pantalla, tal que así:

Como no tengo muchos conocimientos de CSS, he aprovechado el plugin Jetpack para WordPress que nos proporciona un Editor CSS que simplemente añade el código que peguemos sin cargarse el CSS original, con lo cual es bastante improbable que hagamos algún estropicio.

Una vez que tenemos instalado el plugin, nos iremos a Apariencia => Editor CSS:

E introduciremos el siguiente código:

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta, .page-content {
/* Original max-width: 474px */
max-width: 80%;
}

.full-width .site-content blockquote.alignleft,
.full-width .site-content img.size-full.alignleft,
.full-width .site-content img.size-large.alignleft,
.full-width .site-content img.size-medium.alignleft,
.full-width .site-content .wp-caption.alignleft {
margin-left: 0;
/* was -168px */
}

.full-width .site-content blockquote.alignright,
.full-width .site-content img.size-full.alignright,
.full-width .site-content img.size-large.alignright,
.full-width .site-content img.size-medium.alignright,
.full-width .site-content .wp-caption.alignright {
margin-right: 0;
/* was -168px */
}

blockquote.aligncenter,
img.aligncenter,
.wp-caption.aligncenter {
clear: both;
}

Quedándonos el espacio rellenado tal que así:

Comprobamos qué tal ha quedado haciendo click en “Vista previa” y si nos gusta haremos click en “Guardar Hoja de Estilo” y quedará almacenado.

Yo lo estoy utilizando y como podéis ver la anchura del contenido se adapta a la ventana de vuestro navegador.

Espero que os sea de ayuda. Se agradece cualquier comentario o aportación.