Archivo de la etiqueta: diseño web

Voy a dejar una pequeña lista de modificaciones que se le pueden hacer fácilmente al fichero style.css del nuevo tema (template) por defecto de wordpress “Twenty Eleven”.

De esta forma podremos darle un estilo mucho más personalizado sin demasiado esfuerzo.

La idea es aprender de estas modificaciones y empezar a trastear con el CSS hasta dejarlo a nuestro gusto personal. Aunque puedes copiarlo tal cual y ver como queda.

editar tema wordpress css

 

Listado de modificaciones del CSS del fichero style.css del Tema: Twenty Eleven de WordPress

 

#site-title a – Cambiar varios parámetros del Título del sitio (color, tamaño, tipo de letra, etc…)

#site-title a {
color: red;
font-family: times New Roman;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}

 

#site-title a:hover – Si quieres cambiar el color del mouse over del Site Title

#site-title a:hover, #site-title a:focus, #site-title a:active {
color: #1982D1;
}

 

#site-title – Para quitar el espacio en blanco que se deja en la parte de arriba del Título de la web.

#site-title {
margin-right: 270px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 1.65625em;
}

 

#site-description – Si quieres quitar el espacio en blanco que hay justo debajo del Título de la web, entre este y la imagen de la cabecera.

#site-description {
color: #7A7A7A;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

 

#site-description – Para modificar la descripción (color, fuente, tamaño, etc…)

#site-description {
color: blue;
font-family: tahoma;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

 

#branding img – Para modificar el tamaño de la Cabecera

#branding img {
height: 100px;
margin-bottom: -7px;
width: 100%;
}

 

#branding #searchform – Si quieres ocultar mediante CSS el formulario de búsqueda, aunque recomiendo hacerlo desde código php.

#branding #searchform {
display: none;
position: absolute;
right: 7.6%;
text-align: right;
top: 3.8em;
}

 

#acess – Para cambiar el color de fondo del menú de navegación (el superior).

#access {
background-image: -moz-linear-gradient(#252525, red);
}

 

#acess a – Para cambiar el color de la fuente de los enlaces (si no lo cambias todos serán enlaces) del menú de navegación.

#access a {
color: red;
display: block;
line-height: 3.333em;
padding-bottom: 0;
padding-left: 1.2125em;
padding-right: 1.2125em;
padding-top: 0;
text-decoration: none;
}

 

.entry-title, entry-title a – Si quieres cambiar el título de una entrada (post), puede modificar la fuente, el color, el tamaño, etc…

.entry-title, .entry-title a {
color: red;
font-family: tahoma;
font-size: 1.2em;
text-decoration: none;
}

 

Para entradas individuales del blog de Twenty Eleven.

.singular .entry-title {
color: #000000;
font-size: 36px;
font-weight: bold;
line-height: 48px;
}

 

.entry-title a:hover, .entry-title a:focus, .entry-title a:active – Para modificar el mouse hover del título del post del theme Twenty Eleven.

.entry-title a:hover, .entry-title a:focus, .entry-title a:active {
color: #1982D1;
}

 

.entry-meta – Para ocultar mediante CSS la información sobre la entrada (fecha, etc…), también ayudará a esconder la información meta del Footer.

.entry-meta {
clear: both;
color: #666666;
display: none;
font-size: 12px;
line-height: 18px;
}

 

.entry-content p – Si quieres editar el formato del contenido de una entrada (color, fuente, tamaño, etc…).

.entry-content p {
font-family: times New Roman;
color: red;
font-size: 1.1em;
}

 

.widget-title – Para editar el formato de los títulos de los widgets que tenemos en el sidebar de Twenty Eleven.

.widget-title {
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}

 

.widget-title – Si quieres añadir a los títulos de tus widgets un fondo de color.

.widget-title {
background-color: gold;
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
padding-left: 37px;
text-transform: uppercase;
}

 

.widget a – Para modificar el formato los enlaces que hay dentro de los widgets.

.widget a {
color: black;
font-family: times New Roman;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

#primary & #secondary – Son los contenedores central y sidebar respectivamente, con este código incrementamos el tamaño del sidebar de la derecha que lleva Twenty Eleven.

#primary {
float: left;
margin-bottom: 0;
margin-left: 0;
margin-right: -26.4%;
margin-top: 0;
width: 90%;
}

#secondary {
float: right;
margin-right: 7.6%;
width: 24.8%;
}

 

#comments – Para esconder mediante CSS tus comentarios, lo recomendable es hacerlo desde el código php.

#comments {
display: none;
}

 

#comment-content p – Si quieres editar el formato del contenido de tus comentarios.

.comment-content p {
color: red;
font-family: times New Roman;
font-size: 16px;
}

.comment-meta – Si quieres cambiar el formato del contenido meta de los comentarios (Nombre del autor y fecha).

.comment-meta {
font-size: 16px;
line-height: 2.2em;
}

body – Para cambiar el color de fondo del tema Twenty eleven.

body {
background-color: red;}

 

#page – Para modificar el fondo de la página, la caja principal. Si no sabes a lo que me refiero, ponle color amarillo y enseguida verás lo que modifica.

#page {
background-color: yellow;
}

.entry-header .comments-link a – Si no quieres que se muestre el bocadillo con el número de comentarios en la parte derecha de las entrada, esto es nuevo con el tema Twenty Eleven.

.entry-header .comments-link a {
display: none;
}

 

#content – Para cambiar el fondo de las entradas.

#content {
background-color: gold;
margin-bottom: 0;
margin-left: 7.6%;
margin-right: 34%;
margin-top: 0;
width: 58.4%;
}

 

#branding hgroup – Si quieres eliminar todo el bloque que hay encima de la imagen del encabezado (título, descripción y search) mediante CSS, como antes, esto se debería hacer desde el código php para hacerlo correctamente.

#branding hgroup {
display: none;
margin: 0 7.6%;
}

 

#access a – Para cambiar el espacio entre los elementos del menú de navegación del tema Twenty Eleven.

#access a {
color: black;
display: block;
font-size: 14px;
line-height: 3.333em;
padding: 0 0.6em;
text-decoration: none;
}

 

Si quieres alinear los post, el título del sitio y el menú de navegación a la izquierda en el tema Twenty Eleven utiliza el siguiente código CSS.

#branding hgroup {
margin: 0 0.6%;
}
#access div {
margin: 0 0.6%;
}
#content {
margin: 0 34% 0 0.6%;
width: 58.4%;
}

 

#content – Para añadir un borde a la parte derecha del contenido de los post prueba el siguiente código CSS.

#content {
border-right: 1px dotted;
margin: 0 34% 0 0.6%;
padding-right: 11px;
width: 61.4%;
}

.widget ul li – Para quitar la bolita en los elementos de las listas que salen en el sidebar de la derecha, edita el siguiente código CSS en el archvio style.css del tema Twenty Eleven.

.widget ul li {
color: #777777;
font-size: 13px;
list-style: none outside none;
}

 

.widget – Si quieres añadir un borde después de cada widget del sidebar utiliza el siguiente código CSS.

.widget {
border-bottom: 1px dotted grey;
clear: both;
padding: 15px 0 20px;
}

 

Hay muchísimas más modificaciones que se pueden hacer, el fichero style.css del tema Twenty Eleven tiene más de 2000 líneas de código, por lo que aprender a editarlo completamente requerirá algo de tiempo. Espero que esta recopilación de pequeñas ediciones os haya servido para tomar contacto con el CSS y atreveros a ir editando vuestro tema poco a poco.