Archivo de la categoría: Diseño

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.

Durante la última Fashion Week, en febrero nació cinemagraph, una nueva “moda artística” que se mueve a pasos agigantados, la cual está ganando un gran peso en el Marketing Online.

Se trata de una imagen en movimiento, y os preguntaréis ¿esto no es un gif cualquiera? La respuesta es no, cinemagraph es un nuevo formato artístico, utilizado principalmente en marketing y publicidad, con el que se consiguen imágenes de alta calidad con un sutil toque de movimiento.

El nuevo concepto de cinemagraph fue creado por la fotógrafa Jamie Beck y su novio, el diseñador Kevin Burg, están creando una nueva tendencia y cada vez hay más gente que les sigue los pasos, lo definen como: “algo que es más que una foto y menos que una película“.

cinemagraphs periódico seo

Esta es una de las mejores fotos que definen el término de cinemagraph y para mi gusto la que mayor contraste da al punto medio entre fotografía y película en el que los expertos lo definen. Podemos ver por un lado a toda la multitud quieta, como en una foto cualquiera y por otro lado tenemos el sutil movimiento de un hombre leyendo el periódico, simplemente espectacular.

cinemagraphs bici seoEn esta imagen de alta calidad podemos ver el simple movimiento de las hojas debajo de la bici, lo cual crea una sensación de realidad, le da mucha más vida a la fotografía.

cinemagraphs bar seoHay una gran cantidad de imágenes que ya siguen el concepto de cinemagraph, algunas más espectaculares y más acertadas que otras, desde mi punto de vista la clave está en encontrar el punto para darle vida sutilmente a una fotografía sin que acabe pareciendo un simple gif. Sin duda es todo un arte por explotar.

cinemagraphs flexiones seo
cinemagraphs pasarela seo
cinemagraphs viento seocinemagraphs metro seo

Cinemagraph abre un nuevo mundo de posibilidades en el Marketing y la Publicidad, al fin y al cabo es una herramienta más entre millones de ellas, todo depende de como consigamos aprovecharla ;)

Espero que os haya gustado mi selección de cinemagraphs, cualquier aportación será bienvenida :)