Blog multi-temático de Antonio Castro

opinión, literatura, ciencia, tecnología, ciencia ficción, autoedición, política, ateismo, actualidad

temas de ciberdroide.com

¿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 ‘Default’ que viene por defecto en 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 disponible para mis artículos. Concretamente he decidido aumentar en 70 píxels ese , y otros 30 píxels para la barra vertical (sidebar). Eso supone un aumento de 100 píxels a lo 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?

Anterior

¿Son admisibles los crucifijos en las escuelas públicas?

Siguiente

Cambio de servidor.

14 Comentarios

  1. y como sería para blogspot!

  2. admin

    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. 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

    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

    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

    ¿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

    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

    Gracias a ti.
    Un saludo.

  9. Enrique

    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

    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.

  11. Rodolfo

    Hola, intento cambiar la posicion del logo y la posicion del menu en wordpress, todo bien se visualiza en desktop, pero en movil se desfasa y se ve mal. Alguna otra solucion para modificar tanto el atributo margin-left, margin, etc para que pueda mover el encabezado lo mejor posible y tambien ajustar el ancho de los textos al medio para que no quede desfasado en moviles? Un saludo!

  12. Antonio Castro

    Este artículo es antiguo y seguramente este método ya no sea el correcto.

  13. Rodolfo

    Hola Antonio, en mi caso tengo un problema porque el theme es Schema y quiero quitar el sidebar porque ya no tiene mucha relevancia como antes, perfecto, cuando quito el sidebar, los contenidos de los post y paginas ocupan todo el ancho de la pantalla y quedan horribles, entonces lo que quiero hacer es reducir el ancho de los textos para que quede un poco mejor centrados perfectamente sin el sidebar, pero cuando hago esto se desacomoda en moviles y ademas no queda bien centrado, por lo que tengo que volver al uso normal por defecto y agregar el sidebar. He probado con margin, width y nada. Sabes que otros atributos hay que puedan hacer mejor este proceso? Un saludo!

  14. Antonio Castro

    Busca en foros gente que trabaje con Schema, o busca otro tema que no te genere tantos quebraderos de cabeza.
    Mira si te gusta este: https://athemes.com/theme/moesia/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Creado con WordPress & Tema de Anders Norén