miércoles, 6 de junio de 2012

Poner una imagen o Fondo al Footer


Hola mis nenas este nuevo tuto lo empiezo rapidito pues traigo un dolor de cabeza horrible :(

y que es el footer ...??
bueno es una partecita que algunas plantillas traen y es de tono gris..es algo molesta pues le da un toque algo feo al blog o no? bueno a mi no me gusta por eso se la quite xD peroo tambien se puede personalizar al gusto de cada una de ustedes poniendosele un fondo o una imagen ya sea gif o png okis..

yo puse la imagen de los ositos en mi blog de pruebas

Antes



Despues



o con un fondito



bueno empezemos:

Este para disenos windows picture

1.- Busca

.footer-outer {
color:$(footer.text.color);
background: $(footer.background);

2.- remplazalo por este codigo:


.footer-outer {
background:#FFFFFF url(http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/foot.png)no-repeat;
background-position: bottom center;
width:950px;
height:170px;
clear:both;
margin:0 auto;
padding-top:0px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:-1em;
text-align: center;
border: 1px dashed #F5A9F2;
}



quedaria asi:



4.- Da vista previa para visualizar y guarda


5.- Ahora Edita:

Rosita: Direccion de tu imagen o fondo
Azul: color del fondo del footer
Rojo: Altura del footer // *puedes hacerlo mas grande si tu imagen es mas grande o mas pequena.. de preferencia que tus imagenes sea de tamano medio *//
Verde: lo largo del footer
Morado: Forma del borde del footer
Cafe: Lo grueso, tipo de borde y color de borde el footer
Naranja: esa opcion es para cuando eliges poner fondo quitale el no- y se repetira el fondo varias veces..

PARA OTRAS PLANTILLAS

busca /* ----- POST-FOOTER ----- */

y pega este codigo justo abajo de el

.footer {
background:#FFFFFF url(http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/foot.png)no-repeat;
background-position: bottom center;
width:950px;
height:170px;
clear:both;
margin:0 auto;
padding-top:0px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:-1em;
text-align: center;
border: 1px dashed #F5A9F2;
}


Da vista previa para visualizar y guarda

** Para editar fijate en el paso 5 **

PARA LAS QUE NO ENCONTRARON EL CODIGO FOOTER solo pega este codigo justo antes de ]]></b:skin>

//*este es opcional solo si lo quieren tener okis?*//

.footer-outer {
background:#FFFFFF url(http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/foot.png)no-repeat;
background-position: bottom center;
width:950px;
height:170px;
clear:both;
margin:0 auto;
padding-top:0px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:-1em;
text-align: center;
border: 1px dashed #F5A9F2;
}


Da vista previa para visualizar y guarda ^^

no copycat u.u


24 comentarios:

  1. hola,quiero preguntarte,si pusiste el tutorial de como hacer ese texto que se mueve que se encuentra debajo de tu cabecera.
    no lo encuentro por ningun lado,emm..porfavo ponelo y si lo tienes dejame el link del tuto!!!

    ResponderEliminar
  2. http://annyz-kawaii.blogspot.mx/2012/05/cuadrito-personalizado-con-mensajitos.html

    ResponderEliminar
  3. Holaa Annyz! 1º Me podrías dar el link para poner un fondo a tu blog? Es que no encuentro el tuto :S

    2º Tengo un problemita con este post: Cuando voy a buscar eso de .footer-outer {
    color:$(footer.text.color);
    background: $(footer.background);

    no lo encuentra! Es como si no existiese!!!! Tambien me ocurre lo mismo con otras cositas de tu blog! Ayudaa como lo soluciono??


    GRACIAS(;

    ResponderEliminar
    Respuestas
    1. oki para el primero

      este es el codigo solo pegalo en un gadget html/javascript

      <style type="text/css">body {background-image: url(url o direccion de tu imagen); background-position: center; background-repeat: repeat; background-attachment: fixed; }</style>

      y sobre lo otro vi que tienes la plantilla picture windows como yo, asi que, el primer codigo que digo que busquen lo debes de tener es la misma plantilla solo es buscar bien.. saludos

      Eliminar
    2. Sobre lo segundo:
      Que codigo dices que busqueen? :S

      Eliminar
  4. Hola! annyz
    quisiera hacerte una pregunta
    Como le puedo quitar el footer?

    ResponderEliminar
    Respuestas
    1. de cual plantilla quieres quitar el footer porque no todas las plantillas son iguales, asi me doy una idea..

      Eliminar
    2. solo busca /* Footer
      ----------------------------------------------- */

      y borra todo esto

      .footer-outer {
      color:$(footer.text.color);
      background: $(footer.background);

      -moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
      -webkit-border-top-left-radius: $(footer.border.radius.top);
      -webkit-border-top-right-radius: $(footer.border.radius.top);
      -webkit-border-bottom-left-radius: $(footer.border.radius.bottom);
      -webkit-border-bottom-right-radius: $(footer.border.radius.bottom);
      -goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
      border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

      -moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
      -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
      -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
      box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
      }

      cuando lo hayas borrado da vista previa para ver que si se borro.. saludos

      Eliminar
  5. Holaa Annyz~~ ^^ tu blog me encanta, es de lo más monoo *-*
    Bueno, yo soy una novatilla en mi blog, pero me gustaría que te pasaras a echar un vistacillo y me dijeras ^^
    Te he afiliado, has sido mi primera afiliada jeje x3
    Bueno, besitos, y sigue así ;3

    ResponderEliminar
  6. Hoola!! annyz encontre la solucion al blockquote aqui te la dejo para que lo publiques en tu blog (si quieres)!!!

    bueno buscas: ]]>

    arriba pones esto:

    blockquote {
    -Moz-border-radius-bottomleft: 15px;
    -moz-border-radius-bottomright: 15px; -Moz-border-radius-bottomRight: 15px;
    -moz-border-radius-topleft: 15px; -Moz-border-radius-TopLeft: 15px;
    -moz-border-radius-topright: 15px; -Moz-border-radius-topright: 15px;

    como veras lo único que debes hacer es agregar eso arriba :)
    color:#666666; color: # 666666;
    border: 3px dotted rgb(255, 148, 245); frontera: 3px puntos rgb (255, 148, 245);
    background: #ffffff url(URL_DE__FONDO); fondo: # FFFFFF url (URL_DE_FONDO);
    background-position:top left; background-position: arriba a la izquierda;
    background-repeat:repeat; background-repeat: repeat;
    margin: 4px 4px 4px 4px; margin: 4px 4px 4px 4px;
    padding: 6px 6px 6px 6px; padding: 6px 6px 6px 6px;
    font-size: 14px; font-size: 14px;
    line-height:1.4em; line-height: 1.4em;
    }

    ResponderEliminar
  7. Disculpa como haces para que se redondee lo de arriba no el de la imagen que ponemos , si no el de arriba donde se encuentran las entradas y eso? :)

    ResponderEliminar
    Respuestas
    1. busca

      .post-outer {

      y pega esto debajo de el

      border: 1px dashed #BDBDBD;

      -moz-border-radius-topleft: 25px;
      -moz-border-radius-bottomright: 25px;
      -moz-border-radius-topright: 25px;
      -moz-border-radius-bottomleft: 25px;
      -webkit-border-top-left-radius: 25px;
      -webkit-border-top-right-radius: 25px;
      -webkit-border-bottom-left-radius: 25px;
      -webkit-border-bottom-right-radius: 25px;
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;
      border-bottom-left-radius: 25px;
      border-bottom-right-radius: 25px;

      saludos

      Eliminar
  8. gracias por la informacion jejeje y por encontra run hueco pa hacerlo XDD

    bueno ya termine con el proximo diseño

    haber si te gusta como me ha quedado, va dedicado al mar/verano ^--^

    http://pruebassa.blogspot.com.es/

    ResponderEliminar
  9. Hola, annyz, saludos.! Muy buen blog:3
    Necesito una ayudita, sabes cómo coloco los bordes de mi blog como tal con esquinas redondeadas?

    ResponderEliminar
    Respuestas
    1. hola solo busca

      .main-outer {

      y pega este codigo abajo de el

      border: 1px solid #FFB6DA;
      background: $(main.background);
      -moz-border-radius-topleft: 25px;
      -moz-border-radius-bottomright: 25px;
      -moz-border-radius-topright: 25px;
      -moz-border-radius-bottomleft: 25px;
      -webkit-border-top-left-radius: 25px;
      -webkit-border-top-right-radius: 25px;
      -webkit-border-bottom-left-radius: 25px;
      -webkit-border-bottom-right-radius: 25px;
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;
      border-bottom-left-radius: 25px;
      border-bottom-right-radius: 25px;

      saludos

      Eliminar
  10. Hola, ya encontre la respuesta a mi problema. Era cuestion de eliminar todas las propiedades del texto. Dejandolo Asi:
    .footer-outer {
    background:transparent url(http://img339.imageshack.us/img339/1233/piedepaginao.png)no-repeat;
    background-position: bottom center;
    width:1000px;
    height:2500px;
    clear:both;
    margin:0 auto;
    padding-top:0px;
    -moz-border-radius: 1em 1em 1em 4em;
    border-radius: 1em 1em 1em 4em;
    line-height: 1.6em;
    text-align: center;
    border: 0px dashed #F5A9F2;
    }

    ResponderEliminar
  11. Gracias amiga por esto, gracias, no se porque de repente me salio una musica de anime muy bonita eh....gracias.

    ResponderEliminar
    Respuestas
    1. aww de nada >.<
      me da gusto te sirva el tuto
      a lo de la cancion sii esta muy bonita
      pero si te llega a molestar,en la esquina
      izquierda donde esta el gif con barrita de
      colores puedes ponerle pause n.n
      saludos y grax por tu visit.

      Eliminar

Nota: solo los miembros de este blog pueden publicar comentarios.