SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

14 may. 2014

Personaliza el fondo del menú horizontal de tu blog (Páginas)

Holas!!!
Hoy traigo un tutorial muy sencillito, rápido y sin mucho peligro.
¿Veis que mi menú tiene un fondo rosita pero con textura verdad? Eso es porque es una imagen, una textura.
Simplemente con el Photoshop le di el tamaño de alto que yo quería que fuera de ancho el menú. Concretamente 40 píxeles.

Como siempre que hacemos algo en nuestra plantilla hacemos una copia de seguridad de nuestra plantilla.
Vamos a Editar HTML y buscamos lo siguiente:
.tabs .widget ul

Seguramente lo que encontremos será algo parecido a esto:

.tabs .widget ul, .tabs .widget ul a, .fauxborder-left.tabs-fauxborder-left{
background: url(http://1.bp.blogspot.com/-S4uFaFob63A/UvWCyh6qu5I/AAAAAAAAB1g/80by8QKooSI/s1600/menu-rosita.png) repeat left;  /* Imagen de fondo del menú horizontal*/
height: 40px; /*Lo alto que será el menú y la imagen */
line-height: 40px; /*Aki poner le mismo valor que en lo de encima en height, esto es para que el texto quede alineado en el centro del centro*/
color: #F9F5EC; /*Color del fondo*/
font-weight: bold !important;
}

Cómo ahora me he acostumbrado a poner la descripción en el mismo código seguro que os será muchísimo más cómodo. Lo hago también con vistas a que si en un futuro queréis volver a personalizarlo.

Es así de sencillo solamente tenéis que cambiar la URL donde os digo que es la imagen de fondo por la URL de vuestra imagen y ya está.

¿Os sirve? ¿Os gusta? ¿Lo haréis?
Para cualquier problema o duda, ya sabéis!
Muah!

Lireth's Notebook

13 comentarios:

  1. Me encantan tus tutoriales ^_^ pero muchos de ellos como este no puedo hacerlos por que desde la tablet no me deja editar la plantilla :(
    Pero de todos modos me encanta aprender sobre estos temas porque yo soy patosilla para ello jeje y me gusta mejorar y aprender por eso mil gracias por enseñarnos siempre tantas cosas
    Besos wapa

    ResponderEliminar
  2. Muchas gracias, lo intento. Bsss.

    ResponderEliminar
  3. Yo sí lo probaré :)
    besos guapa

    ResponderEliminar
  4. Me gusta, me sirve y si algún día consigo tener tiempo libre, seguro que probaré. Muchas gracias!!
    Un saludo

    ResponderEliminar
  5. Hola Lireth. Viendo este post y que se puede modificar el fondo, se me ha ocurrido preguntarte una cosa que llevo tiempo pensando, ¿hay alguna manera de modificar el color o el fondo de la sidebar?
    Muchas gracias

    ResponderEliminar
  6. Gracias voy a ver si me sale.Gracias también por explicarlo poniendo al lado lo que es.

    ResponderEliminar
  7. Lo acabo de probar y me sirvió!!Te diré que después de buscar durante horas...y 2 días,tu codigo y tu explicación es la única que me sirvió.Mil gracias,estoy intentando montar mi blog ( aún esta privado,porque no esta decente,jaja) y voy buscando tutoriales,asi ha sido una suerte dar con tu explicación,estoy super contenta,gracias.

    ResponderEliminar
  8. emm estoy buscando ".tabs .widget ul" en donde dice Editar HTML y no me aparece nada :/

    ResponderEliminar
    Respuestas
    1. A mi tampoco me lo encuentra me estoy volviendo loca.

      Eliminar
    2. Si no lo encontráis ponedlo tal cual, sin miedo a ver si así os sale :P

      Eliminar
    3. A mi tampoco me sale :( y lo busque tal cual. :(

      Eliminar
    4. despué de un año, la respuesta

      .tabs-inner .section:first-child ul {
      margin-top: -$(header.border.size);
      border-top: $(header.border.size) solid $(tabs.border.color);
      border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
      border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
      }
      es esa parte del código se reemplaza por el que ponen aqui

      Eliminar
  9. Cómo se llama la fuente que usas? :)

    ResponderEliminar