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.
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.
Pingback: Wordpress tema: Twenty Eleven CSS Modificación Básica | Diseño Web SEO | Posicionamiento web en Argentina
Muchas Gracias.
Sabes recien empiezo con mi web y tengo el mismo theme que tu, me podrías decir como hago para cambiar los H1 por H2 en la home, eso no altera el SEO para éste tema en particular? Me refiero específicamente a “”
Desde ya te agradezco.
Un saludo!
Para cambiar los H1 de la página inicial por H2, tienes que ir al fichero content.php y buscar la línea dónde pone:
< h1 class="entry-title">......< /h1>Y simplemente cambiarlo por:
< h2 class="entry-title">......< /h2>Desde el punto de vista del posicionamiento SEO, los H1 tienen más importancia que los H2 y se valoran más. Por lo que yo recomiendo dejarlo como H1, eso sí, no vayas a empezar a poner etiquetas H1 por todas partes ya que a la hora de posicionar una página en Google valoran la “naturalidad”.
Hola, primero muchas gracias por el mini-tutorial.
Tengo este theme instalado (twenty eleven) en wordpress y he puesto una imagen fija en el background muy chula pero esta en casi su totalidad tapada por el page del blog…. he intentado ponerle al tag “page” la propiedad “opacity:0.8″ para que se transparente pero se transparenta absolutamente todo tanto la fuente como la imagen de cabecera como los widget… mi pregunta es ¿sabes a que tag deberia ponerle el opacity:0.8 para que solo se transparente el fondo blanco o negro en mi caso y asi el background sea mas visible? gracias.
Prueba a ponerle esta propiedad al CSS #page
background-color: rgba(0, 0, 0, 0.6);
El último campo es el nivel de transparencia, de esta forma sólo se la aplicas al background.
Muy buena recopilación de código css para el tema por defecto de wordpress.
La verdad es que es un tema muy sencillito pero con unos pocos retoques puedes dejar un theme con un aspecto muy profesional.
Buenisima la recopilación, Gracias.
En el tema se encuentran 3 lineas en le pie de pagina, una de ellas (la primera) del tamaño del texto y otras dos a lo ancho de la pagina con un sombreado gris esta ultima. Sabria alguien para poder vorrarlas y ganar espacio. Un saludo y nuevamente gracias.
Hola, ¿de qué manera puede afectar HTML5 al SEO?
Si bien en este tema no se agregan secciones, la idea en HTML5 es tener varias secciones con la posibilidad de varias H1, H2… dentro de cada una y esto sí pienso que afectaría negativamente debido a posibles penalizaciones.
Entonces, la duda es también si en este tema está bien aplicada la idea de HTML5 y cuál sería el beneficio en este momento de utilizarlo? si es que lo hay.
Muchas gracias.
Hola. Garcias por el aporte. Haber si me ayudas en lo que busco. Uso esta misma plantilla, pero al entrar en un post el bloque derecho se me oculta. Que deberia de hacer para que el bloque derecho este siempre visible?
sabeis como puedo eliminar el borde ese gris que sale en la parte de arriba? (entre la caja principal y el fondo)
muchisimas gracias, me ha servido de mucha ayuda los tips de ésta pagina. saludos!!!
#branding
le quitas el borde
y para el borde abajo si no quieres que salga lo de wordpress pones
#site-generator{
display: none;
Ahora que si lo que quieres es quitar el borde, en esa misma entrada quitas el borde (#site-generator)
(también el borde de abajo entre el final de la caja y lo de “powered by wordpress”)
gracias!!!!
archivo footer.php
<a href="” title=”" rel=”generator”>
______________________________________________________
<a href="” title=”" rel=”generator”>
At last! Something clear I can udnrsetand. Thanks!
5e6P3e pntultpphlyo
quiero añadir un logo en la parte superior de mii paga
Q debo hacere?
algo asi:
logo Club KM Venezuela
El placer de correr
Muchas gracias si me puedes ayudar soy nuevo en esto del wordpress
Hola Gonzalo,
Gracias por la información.
Tengo un problema. He realizado una prueba cambiando el color al #page.
Al actualizar el cambio me indica que “File edited successfully” pero los cambios no se ven en la web ¿puedes echarme un cable?
Gracias
Rubén
Hola, sabeis como puedo añadir el sidebar a los posts individuales y a las paginas. Estube poniendo el en el single.php pero no consigo que salga sin descuadrarse.
Gracias.
Saludo cordial.
Excelentes las explicaciones para realizar los cambios en WordPress tema: Twenty Eleven CSS.
Estoy tratando de encontrar el cambio del color cuando el cursor se posiciona en la barra de menú (logre cambiar el color a azul) y deseo otro color en la Twenty Ten.
Si es posible.
De antemano mil gracias.
Antonio
Muchas gracias! No sabia como quitar los comentarios y con medio minuto lo he solucionado!
Genial!!!, esto servira para mi blog personal!!!
Muchisimas gràcias por el tutorial. Muy útil!
Se agradece tu tiempo!
Joan.
alguien sabe como cambiar el espacio que hay entre el menu y la pagina, yo tengo un menu que dice INICIO QUIENES SOMOS etc, y cuando hago click en INICIO me aparece abajo la palabra INICIO (entre espacios arriba y abajo). Quiero sacar la palabra y achicar el espacio. Muchas gracias muy instructivo el blog
solucionaste lo de quitar la palabra del menu y reducir el espacio? Yo tambien lo estoy intentando y no doy con la tecla.
Un saludo y gracias de antemano.
Hola amigos como están, tengo un inconveniente y espero me puedan ayudar verán el problema es que quiero que la imagen de mi cabecera quede en lugar del titulo y eliminar ese espacio en blanco.. soy nuevo en wordpress..
Buenas! muchas gracias por la ayuda! es un buen tema para empezar!
Una pregunta que nose porque ahún no se te ha formulado:
Como puedo hacer para que la pagina que sale al principo, sea una de las que yo he creado
Ejemplo:
Con el tema este, la pagina inicial se llama “página de inicio”, y esta no me aparece en el listado de paginas.
Me he creado una que se llama noticias, que solo se publica las categorias “noticias” (con el pluguin PAGE POSTS), y me interesa, o poder editar la pagina de inicio con este pluguin y cambiar el nombre, o poner como la pagina inicial la de noticias!
Espero se entienda! Muchas gracias de antemano!
Hola, soy nueva en esto y quisiera que me ayudaran con 2 dudas:
1.- Como puedo hacer para poner un logotipo en vez del texto en la cabecera.
Quisiera poner un logo y debaj dejar las imagenes de 1000×288 que trae por default
2.- Como puedo hacer mas gruesa la linea gris del contorno de la pagina a modo de dar el efecto de mas profundidad.
Gracias de antemano
Hola,
Alguna idea de como puedo reducir el espacio que hay entre post?
Saludos, buen tuto (Y)
Y la plantilla como es que la tienes totalmente en español?. Gracias mil
Hola a todos, alguien me puede echar un cable para quitar las fechas de las entradas a mi wordpress Twenty Eleven, ya he buscado el postdate por todos lados y no lo encuentro, en una anterior búsqueda los encontré los borre pero aun aparecen en las entradas las dichosas fechas y necesito quitarlas, agradezco cualquier ayuda. Gracias anticipadas.
Excelente!!!!!!!
Hola amig@s¡¡
Tengo un problema con este theme. Subo ariticulos en las diversas categorias de mi blog, pero no se actualizan para el publico, tengo que cambiar en nombre de la catergoria para lo haga, con la perdida de posicionamiento SEO que supone al cambiar la URL de las entradas de esa categoría.
¿alguna solucion? gracias de antemano.
Es siempre un problema para traducir temas para espoñol. No entiendo por que… He trabajando por 3 dias para traducir, pero otra tema “crossapple” – muchas textos en sitios diferente.
Hola amigos… necesito una ayudita
necesito poner mi logo en la parte superior del blog…. alguna ayuda
lo segundo, necesito si alguien pudiera decirme en que parte esta el style.css pk cuando lo hago dle editor me da como acces denied y me imagino que hay que cambiarle los permisos
muchas gracias desde chile
Muy buenas.
Sensacional entrada. Nos viene genial a los que nos hemos decantado por este tema de WordPress.
Tengo un problema, a ver si me lo saben resolver. Cuando creo una tabla sólo me salen las líneas superior e inferior, no las centrales (divisorias). Tampoco consigo que con bordercolor cambie el color de dichas líneas.
Saludos.
Hola, me gustaría saber cómo puedo quitar la línea gris que aparece alrededor de las imágenes. Gracias
clicas encima de la imagen cuando estás editando el post, te saldrán configuración de la imagen y toda la pesca, debes seleccionar la pestaña de arriba; avanced settings… en image properties pones en los tres huecos un cero a cada uno…
a mi me funciona bein!
espero haber sido de ayuda!
Gracias por tu trabajo! me ha servido de gran ayuda
Hola, pues otro que se suma a las felicitaciones por estas explicaciones. Yo he programado mi web con iweb pero problemas de compatibilidades etc. el blog lo estoy haciendo con WordPress con la esperanza que si queda bien haré lo mismo con la web.
Dicho esto, me gustaría preguntar si es posible poner una foto distinta en la cabecera para cada entrada. Yo soy fotógrafo y me gustaría que en cada entrada la foto hiciese alusión al tema que voy a tratar y no siempre la misma en todos lo sitios.
Muchas gracias
Hola , barbaro estos pasos, yo necesitaria :
quiero poner mi logo arriba a la izquierda y sacar el titulo. ( o poder poner debajo del logo una linea con alguna segunda presentacion en texto.)
y tambien a la derecha poder sacar el buscador, la caja , y poder usarlo para añadir publicidad adsense u otro codigo. Muchas gracias y un gran saludo.
Muchas Gracias, justo estaba buscando como modificar ese theme……
Hola, primero que nada gracias por el aporte, tengo una serie de preguntas, que espero que me puedan ayudar, vienlo los comentarios alguien ya las ha hecho pero no han recibido respuesta o reciben a medias.
Elegí el tema Twenty Eleven, porque me parece muy limpio, pero el asunto es que en el area de contenio, previamente yo he modificado el codigo para que en vez del titulo de cada seccion (Inicio, etc) aparezca una imagen, pero el margen (espacio blanco) tanto superior como inferior es enorme, y quiero reducirlo ¿me ayudaís o me orientaís en como hacerlo?
la otra cuestón es esa misma imagen que he puesto tiene un margen gris y quiero quitarlo, lo mismo que el margen de las imagenes de los post, ¿que hago? he visto que puede hacer desde las propiedades de edicion para el caso de los post, pero para el caso de la imagen incertada en la cabecera ¿que puedo hacer’
Hola ! No sé si lo que voy a preguntar tiene que ver con esto. Yo lo que quiero modificar es la imagen de portada, la del header. Quiero poner una imagen que he mapeado con el image-maps.com y me da dos códigos, el CSS Code y el HTML Code. No sé cual de los dos tengo que usar ni en que archivo tengo que pegarlo. Es en el fichero style.css que comentas ? Te agradecería infinitamente tu ayuda. Supongo que será fácil pero como no domino mucho del tema se me hace un mundo. Muchas gracias !
Hola,
Disculpa, de casualidad sabes como editar el ancho del tema twenty eleven? lo estoy usando como web estática para una pequeña pagina de 3 secciones pero me sale el contenido centrado.
Me gustaria poder usarlo a lo ancho de la pantalla, minimo que tengo el ancho de la imagen central, con eso me bastaria.
Agradezco leer mi post y ojala tu o alguien que me lea me puedan ayudar.
Saludos,
Katya