@media screen and (min-width: 580px) { .flotantewhatsapp{ display:none; } }

Compartir por WhatsApp

Inicio - Wordpress - Modificar márgenes en WordPress Theme TwentyTwelve

Modificar márgenes en WordPress Theme TwentyTwelve

Hay veces que conoces a personas y sabes que estén donde estén serán de esos amigos para toda la vida. A mi mujer y a mí nos ha pasado con Fran y Ana. Nuestros amigos de la web http://www.tuposicionamientoweb.net/ se nos marchan a Madrid muy a nuestro pesar.

tuposionamientoweb.net

Estamos seguros que es un simple hasta luego… Antes de irse de Pamplona han tenido la gentileza de proporcionarme información para mejorar nuestro SEO (porque como siempre digo «esto es un mundo muy complicado»). Dado que son consejos de profesionales, qué menos que hacerles caso.

Además he de reconocer que me han contagiado su espíritu, y que tienen parte de la culpa de que hayamos empezado en serio en nuestra web.

No puedo desvelar todo lo que nos comentaron, pero Roberto y yo hemos empezado a trabajar en cambios, que esperemos se reflejen en resultados lo antes posible para poder ir creciendo.

Un cambio que nos presentaron es el de modificar los márgenes de la plantilla que utilizamos de base, que no es otra que TwentyTwelve, para el tema de Google Adsense.

Después de la consiguiente investigación para poder aplicarlo, vamos a enseñaros como modificar los márgenes de dicha plantilla:

Como siempre, antes de empezar, realizaremos un backup de la hoja de estilos que la podéis encontrar en /wp-content/themes/twentytwelve/style.css. Para ello nos conectamos con un cliente FTP (Filezilla, por ejemplo) al servidor donde alojáis la web y realizamos una copia en local que guardaremos por si nos equivocamos al editar :

filezilla twentytwelve

Nos apoyaremos en dos plugins de Firefox para realizarlo (siempre se puede utilizar Dreamweaver o programas más completos). Firebug y Web Developer:

Hemos revisado la zona que nos interesaba, en este caso el body :

Buscando la sección en el apartado CSS de Firebug hemos dado con las líneas de código:

Éste era el aspecto de la web con TwentyTwelve:

margenes twentytwelve 1

Hemos modificado style.css en local. Para ello hemos encontrado las dos líneas a modificar de la sección body .site:

margenes twentytwelve 2

body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

Modificamos los valores a 0rem; para que no existan espacios ni arriba ni abajo:

margenes twentytwelve 3

body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 0rem;
margin-bottom: 48px;
margin-bottom: 0rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

Y éste es el resultado:

margenes twentytwelve 4

Este cambio nos sirve para Firefox, pero Internet Explorer tiene su propio CSS en TwentyTwelve. Os lo muestro:

RUTA: /wp-content/themes/twentytwelve/css/ie.css

Modificamos este parámetro margin a 0

ORIGINAL:

.site {
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
margin: 48px auto;
max-width: 960px;
overflow: hidden;
padding: 0 40px;

}

MODIFICACION:

.site {
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
margin: 0 auto;
max-width: 960px;
overflow: hidden;
padding: 0 40px;

}

Como esto es un trabajo de edición de toda la web, tendremos que seguir con otros cambios para que esto sea útil.

Acerca de Raul Unzue Pulido

Administrador de sistemas virtuales e infraestructuras IT, linuxero y entusiasta de la tecnología.

Compruebe también

Search_and_replace_DB_

Redirección 301 WordPress htaccess, cambiar de dominio

Redirección 301 WordPress htaccess, cambiar de dominio Htaccess 301 redirect wordpress Queremos mejorar el SEO …

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

dos × tres =

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies
Blog Maquinas Virtuales - El Blog de Negu