Twenty Eleven - Wordpress

Trabajar con el tema de Twenty Eleven de Wordpress fue una experiencia para aprender y recordar un poco PHP, CSS y HTML. Tuve la oportunidad de utilizar Wordpress porque me pidieron diseñar un blog bajo esa aplicación. Debajo, presento algunos cambios que trabaje en el tema Twenty Eleven.

Cambiar/ alterar/ remover formato en style.css:

1. Remover el espacio en blanco de la parte superior del título del blog/sitio

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

2. Cabecera del blog (Header site)

#site-title a {
color: #bb1124; /*codigo HEX o nombre pueden ser ingresados*/
font-family: Century; font-size: 30px; /* Opciones para tamaño de letra aqui */
font-weight: bold;
line-height: 36px; text-decoration: none; /* Opciones para decoración de texto aqui */
}

3. Color de letra cuando el mouse es posicionado sobre el título del sitio/blog (hover)

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

4. Descripción debajo del título del sitio/blog

#site-description {
display: none; /* No mostrar. Remover esta linea si se desea mostrar */
color: #7A7A7A;
font-size: 14px;
font-family: Century; /* Cambiar letra */
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

5. Color de fondo de la barra del Menu

#access {
background: #fff; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#ffffff, #ffffff); background: -o-linear-gradient(#ffffff, #ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(ffffff), to(#ffffff)); /* older webkit syntax */
background: -webkit-linear-gradient(#ffffff, #ffffff);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
}

6. Cambiar hover de la barra del Menu

#access li :hover < a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #bb1124;
}

7. Formato de letra de la barra del Menu

#access a {
font-family: Century;
font-size: 17px;
color: #bb1124;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}

8. La barra del buscador en la parte superior de la página

#branding #searchform {
display: none; /* Linea añadida */
position: absolute;
right: 7.6%;
text-align: right;
top: 3.8em;
}

9. Formato de los títulos de posts que aparecen en la página principal

.entry-title,
.entry-title a {
color: #000;
font-family: Century;
font-size: 1.2em;
text-decoration: none;
}

// Para los títulos de los posts de manera individual

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

10. Cambiar hover del título de posts que aperecen en la página principal

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

11. No mostrar “Posted on” debajo del titulo del post en la página principal

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

12. Formato del contenido de los posts

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

13. Formato del titulo de la barra derecha de widgets

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

14. Formato del contenido de la barra derecha de widgets

.widget a {
color: #bb1124;
font-family: Century;
font-size: 14px;
font-weight: bold; text-decoration: none;
}

15. Añadir widgets adicionales con color de fondo

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

16. Aumentar el ancho de la barra derecha de widgets

#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%;
}

17. Mostrar/no mostrar los comentarios en el site/blog

#comments {
display: none;
}

18. Formato del contenido de los comentarios

.comment-content p {
color: green;
font-family: Century;
font-size: 16px;
}

19. Formato de las etiquetas del bloque de comentarios (Nombre, email, ...)

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

20. Mostrar/no mostrar la etiqueta al pie del site/blog

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

21. Color de fondo del cuerpo del site/blog

body {
background-color: red;
}

22. Color de fondo de la página principal (donde aparecen los posts)

#page {
background-color: green;
}

23. Ocultar burbuja de comentarios

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

24. Remover totolamente la seccion de la cabecera

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

25. Espaciamiento en la barra del Menu

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

26. Espaciamiento entre figuras y texto

p {
margin-bottom: 1.625em;
}

img.alignleft,
img.alignright,
img.aligncenter {
margin-bottom: 0;
}

27. Alinear blog/site posts, titulo y la barra del Menu

#branding hgroup {
margin: 0 0.6%;
}

#access div {
margin: 0 0.6%;
}

#content {
margin: 0 34% 0 0.6%;
width: 58.4%;
}

28. Añadir borde al lado derecho del post

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

29. Eliminar "bulleting" de la lista en la barra de widgets

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

30. Añadir borde al lado derecho de la barra de widgets

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