¿Cómo modificar el ancho de una plantilla de wordpress?

¿No has notado nada? Mi blog ha cambiado un poco. Venía usando la popular plantilla ‘Default’ que viene por defecto en WordPress y en lugar de descargarme una nueva, he decidido modificarla. Es una plantilla que me gusta bastante salvo por algunos detalles que son los que he empezado a cambiar. Para empezar el fondo lo he puesto oscuro, pero principalmente me interesaba cambiar el ancho disponible para mis artículos. Concretamente he decidido aumentar en 70 píxels ese ancho, y otros 30 píxels para la barra vertical (sidebar). Eso supone un aumento de 100 píxels a lo ancho que hay que preparar modificando la anchura de las imágenes de la plantilla. Concretamente están en themes/default/images/kubrick*.jpg.

En ese mismo directorio veréis un header-img.php que se usa pasar sobrescribir la imagen kubrickheader.jpg, ya que la cabecera ha de construir una imagen dinámica con el título del blog, una descripción, y un gradiente de color opcional. Este script hay que modificarlo de forma que las esquinas redondeadas de la derecha se desplacen igualmente 100 píxels a la derecha. El ancho de las imágenes pasa de 760  a 860 píxels y en este script deberás modificar un par de cosas:

// Define the boundaries of the rounded edges ( y => array ( x1, x2 ) )
$corners = array(
0 => array ( 25, 834 ),
1 => array ( 23, 836 ),
2 => array ( 22, 837 ),
3 => array ( 21, 838 ),
4 => array ( 21, 838 ),
177 => array ( 21, 838 ),
178 => array ( 21, 838 ),
179 => array ( 22, 837 ),
180 => array ( 23, 836 ),
181 => array ( 25, 834 ),
);

[...]

// Blank out the blue thing
for ( $i = 0; $i < $h; $i++ ) {
$x1 = 19;
$x2 = 840;
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $white );
}

Por último deberás modificar el fichero themes/styles.css

#headerimg     {
margin: 7px 9px 0;
height: 192px;
width: 840px; /***    740 –> 840 (+100) ***/
}

[...]

#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 860px;     /*** 760 -> 860  (+100) ***/
border: 1px solid #959596;
}

[...]

#header {
background-color: #73a0c5;
margin: 0 0 0 1px;
padding: 0;
height: 200px;
width: 858px;    /***  758 -> 858 (+100) ***/
}

[...]

.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 520px;    /*** 450 -> 520 (+70)  ***/
}

[...]

.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 520px;    /*** 450 -> 520 (+70)  ***/
}

[...]

Begin Sidebar */
#sidebar
{
padding: 20px 0 10px 0;
margin-left: 615px;   /***  545 -> 615 (+70) ***/
width: 220px;   /*** 190 -> 220 (+30) ***/

}

Con estos cambios debería bastar. Una de las ventajas de personalizar un tema es que tu blog tendrá un aspecto más original. Por ello, este truquito es mejor que quede entre tú y yo, ¿no queremos que todo el mundo nos copie verdad?

Share

Esta entrada fue publicada en Recetario técnico, tutorial, Todos los artículos y etiquetada , , . Guarda el enlace permanente.

10 respuestas a ¿Cómo modificar el ancho de una plantilla de wordpress?

  1. Energetic dijo:

    y como sería para blogspot!

  2. admin dijo:

    Supongo que será totalmente distinto. Blogspot es un servicio on-line. Te dan todo hecho. Tener un servidor propio aunque sea un modesto servidor virtual te da opción a instalar el software que tu quieres (en mi caso blog wordpress) y además configurarlo como quieras tocando incluso los ficheros. Es evidente que un servicio on-line como Blogspot no te permitirá tanta flexibilidad. Tienen la ventaja de la sencillez, está pensado para crear y usar un Blog de una forma realmente fácil y te ahorras trabajo de mantenimiento y te olvidas de los problemas de seguridad, etc. Ten en cuenta que yo soy además de escritor, informático. Dedico muchas horas a mi Blog, y tengo conocimientos técnicos amplios. Estoy seguro que con Blogspot se pueden alcanzar resultados tan buenos como con otro sistema de Blog, porque lo importante de un Blog es su contenido.

  3. juan dijo:

    Si, en Blogger también se pueden modificar las platillas, desde diseño/html
    Estoy totalmete de acurdo con el autor de este post en las bondades de tener un host propio ya que de esta manera nuestras posibilidades están limitadas solo por nuestros conocimientos.
    Pero vaya que blogger es flexible.
    Aquí hay una explicación: http://yohagoweb.blogspot.com/2008/09/modificar-ancho-de-blogs-en-blogger.html

  4. admin dijo:

    Tener un servidor propio aunque sea virtual es otra historia completamente distinta. Para empezar en un servidor propio tendrás dominio propio y si dentro de unos años cambias de proveedor nadie lo nota. Los buscadores dan valor a tener un dominio propio y a que este tenga antigüedad. Puedes montar un Blog, y dar un montón de servicios muy diferentes todos desde el mismo dominio para así ser mejor puntuado en buscadores.

    Poder modificar la plantilla no es un argumento para optar entre dos sistemas que no pueden compararse.

    Es como comparar un patinete con un helicóptero.

    Te pongo un ejemplo concreto. Mi servicio de descarga de libros bajo licencia Copyleft me la he programado yo en PHP y BBDD MySQL.

  5. RoxaK dijo:

    Hola, gracias por este post.

    He intentado hacerlo en mi blog de wordpress pero no consigo hacer aumentar la parte central del blog.

    http://roxak.webcindario.com/

    Consigo aumentar el header pero el resto no…
    Pues encuentro los codigos dentro de style.css pero los primeros que pusiste no los encuentro:

    (// Define the boundaries of the rounded edges ( y => array ( x1, x2 ) )
    $corners = array(
    0 => array ( 25, 834 ),
    1 => array ( 23, 836 ),
    2 => array ( 22, 837 ),
    …)

    ¿Como podria hacerlo?

    Gracias de antemano

  6. admin dijo:

    ¿Miraste en header-img.php.?

    Cada plantilla esta organizada de una manera diferente. Yo logré averiguar un par de cosas nada más. Este artículo ya no es tan útil como cuando yo lo publiqué. Los consejos que doy sirven para la plantilla ‘Default’ pero puede que para otras no.

    El caso es que cambié de plantilla. Estoy ahora usando esta otra.
    http://www.danielfajardo.com/dfblog/

    Esta me gusta más y además WordPress me actualizaba los cambios realizados a la plantilla ‘Default’ y a cada actualización de WordPress me obligaba a recuperarlos. Por eso ya no uso estas modificaciones. Lo siento,

  7. RoxaK dijo:

    cierto, vaya…
    no era un theme default, sino sacado de esta web http://karenjak.com/

    pero no venia el header-img.php.

    solo vienen estos archivos:
    404.php
    archive.php
    archives.php
    comments.php
    comments-popup.php
    footer.php
    functions.php
    header.php
    image.php
    index.php
    links.php
    page.php
    readme.txt
    rtl.css
    search.php
    sidebar.php
    single.php
    style.css
    ————

    bueno… no tengo mucha idea de wordpress…
    y tampoco se donde podria encontrar un manual para modificar el blog.

    por cierto, esta genial el widget de las imagenes al azar, no lo habia visto nunca

    gracias por contestar tan rapido!

  8. admin dijo:

    Gracias a ti.
    Un saludo.

  9. Enrique dijo:

    Hola saludos excelente post me podrias decir cual es la plantilla default el nombre para poder hacer estos cambios te felicito muy bueno post saludos

  10. Antonio Castro dijo:

    Enrique, este Post es de 2008, te recomiendo que busque uno más reciente. Hace tiempo que cambié de plantilla y lo más probable es que las actualizaciones de esa plantilla te impidan usar los consejos que aquí se mencionan. Por otra parte actualmente hay más plantillas y mejores que las de hace cuatro años.

Deja un comentario

Tu dirección de correo electrónico no será publicada.


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>