Modificando K2

Quieres una web para tu Empresa? Contacta con Diseño Web Pol Smith!

Como hice hace poco en la entrada Cambios en el diseño, voy a hacer publicar los pequeños cambios que hago a mi theme K2 de WordPress.

A diferencia de la entrada anterior, esta la voy a ir actualizando a medida que modifique el theme. De momento hay cambios muy muy básicos, pero iré añadiendo mis futuros retoques en el theme.

1. Ampliar la anchura

K2 es un tema demasiado delgado para mi gusto. Para ampliar la anchura he reemplazado los 500px por defecto de las entradas por 620px (en #primary > width). Para hacerlo efectivo he modificado el style.css así (entiéndase que cada width la he aumentado 120px):

.columns-one #page {
width: 680px;
}

.columns-two #page {
width: 900px;
}

.columns-three #page {
width: 1070px;
}

2. Reducir el logo

Para hacerlo más delgado, en el mismo archivo style.css he modificado la altura del header de 200px a 170 y ha quedado así:

#header {
position: relative;
height: 160px;
background: #3371A3;
background-position: top right;
}

3. Pequeños cambios en el core.css, cuestión de gusto personal

#page {
background: white;
text-align: left;
margin: 0 auto;
padding-top: 0px; /*el predeterminado es 20px*/
position: relative;
border: 1px solid #ddd;
border-top: none;
clear: both;
}

3. Blockquotes bonitas (copiado de Cambios en el diseño)

No se a vosotros, pero a mi la mayoría de blockquotes no me gustan. Pero la del theme BlueK2 (un gran theme, lástima que ya no se actualice) me encanta, así que me la copio en mi style.css del theme:

(obviamente, cuando llamo a parrafo-quote.png es porque antes he subido la imagen a la carpeta raíz del theme)

PD: en el theme K2 basta con ponerlo en k2/style.css, de modo que prevalezca sobre cualquier estilo de K2.

blockquote {
width: 425px;
background: #F0F4FF url(‘parrafo-quote.png’) 10px 20px no-repeat;
min-height: 35px;
padding: 5px 20px 5px 55px;
color: #666!important;
-moz-border-radius: 15px;
}

4. Headers rotatorios
He seguido los pasos de PaulStamatiou.com, encontrado en el foro de K2

Recomiendo ambos links

5. Header clickable

Simplemente, cambiar en el header.php esta línea:

<div id=”header” onclick=”location.href=’http://www.kaosklub.com/’;” style=”cursor: pointer;”>

6. Última Modificación

He añadido la última modificación de cada entrada (también debajo del título) con este código, después de las etiquetas en el theloop.php y antes de <?php } ?>

<?php $u_time = get_the_time(‘U’);
$u_modified_time = get_the_modified_time(‘U’);
if ($u_modified_time != $u_time) {
echo “<a class=’modificat’> </a>“;
echo ” Modificado: “;
the_modified_time(‘j F Y’);
echo ” a las “;
the_modified_time();
echo “”; } ?>

Para cambiar el estilo de esta línea, he puesto el siguiente código en el style.css. Hay que ponerla la ruta entera de la imagen (también de Famfamfam Icon); sino no la reconoce.

.modificat {
display: block;
margin: 2px 0;
padding: 0 0 0 20px;
background: url(‘http://www.kaosklub.com/wp-content/themes/k2/images/shape_square_edit.png’) left center no-repeat;
color: #BFBFBF;
}

No se hacer que solo salga en las entradas individuales. Si alguien lo sabe, por favor que me lo indique en los comentarios.

7. Cambiar el background

He añadido esta lína a mi estilo .css (habiendo subido la imagen al mismo directorio)

body {background : url(bg.jpg)}

Leave a Reply

Your email address will not be published.