¿Cómo cambiar el color de mi cabecera en Blogger?

Jabberz · #1 (**permalink**) 05/03/2012, 12:54

Hola,

lo que quiero es cambiar el color del header de mi blog que es negro, pero no encuentro la linea html. Les dejo la web:
www.tuspalomitas.com.es
y mi codigo XML para mayor facilidad:
[HTML]

Código HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:bold' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'/>

    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<!-- tI4ib-ItITb-TAd1asdDvI4W7ac -->
    <b:skin><![CDATA[/*

-----------------------------------------------
Blogger Template Style
Name:   VideoBlog
Author: Klodian
URL:    www.deluxetemplates.net
Date:   March 2011

License:  This free Blogger template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use. However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:
http://creativecommons.org/licenses/by/3.0
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
   ====================
   
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#36c" value="#3366cc">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#eee" value="#eeeeee">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#000" value="#000000">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#36c" value="#3366cc">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 110% Arial, Serif" value="normal normal 110% Arial, Serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="bold 120%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif" value="bold 120%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="bold 240% Droid Serif,Serif" value="bold 240% Droid Serif,Serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 90% 'Arial',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 90% 'Arial',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 90%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 90%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/

/* Use this with templates/template-threecol.html */

body {
    background: url("http://2.bp.blogspot.com/_66wIGDjagHk/TUGHHwnrKQI/AAAAAAAAAr0/FBAZudPmgMw/s1600/body-bg.png") repeat-x scroll 0 0 #A1D3DF;
    color: #333333;
    font: small Georgia Serif;
    margin: 0;
    text-align: center;
}
a:link {
    color: #3366CC;
    text-decoration: none;
}
a:visited {
    color: #3366CC;
    text-decoration: none;
}
a:hover {
    color: #5588AA;
    text-decoration: underline;
}
a img {
    border-width: 0;
}
#header-wrapper {
    height: 160px;
    margin: 0 auto;
    width: 980px;
}
#header-inner {
    background: url("http://oi41.tinypic.com/11sjz4n.jpg") no-repeat scroll 0 28px transparent;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 150px;
}
#header {
    color: #F4FA58;
    text-align: left;
}
#header h1 {
    font: bold 240% Raleway,Serif;
    letter-spacing: 0;
    margin: 0;
    padding: 43px 20px 3px;
    text-transform: none;
}
#header a {
    color: #DB0BB1;
    text-decoration: none;
}
#header a:hover {
    color: #EEEEEE;
}
#header .description {
    color: #2EFffE;
    font: 120% 'Raleway',Trebuchet,Arial,Verdana,Sans-serif;
    letter-spacing: 0;
    margin: 0 10px 5px;
    max-width: 700px;
    padding: 0 30px 15px;
    text-transform: none;
}
#header img {
    padding-top: 18px;
}
#outer-wrapper {
    font: 110% Arial,Serif;
    margin: 0 auto;
    text-align: left;
    width: 999px;
}
#main-wrapper {
    float: right;
    margin-right: 10px;
    margin-top: 15px;
    overflow: hidden;
    padding-left: 10px;
    width: 571px;
    word-wrap: break-word;
}
#sidebar-wrapper {
    background: none repeat scroll 0 0 #2E2E2E;
    float: right;
    margin-right: 0;
    margin-top: 15px;
    overflow: hidden;
    padding: 0;
    width: 208px;
    word-wrap: break-word;
}
#sidebar-wrapper2 {
    float: left;
    margin-left: 0;
    margin-top: 10px;
    overflow: hidden;
    padding: 0;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 190px;
    word-wrap: break-word;
}
h2 {
    color: #000000;
    font: bold 120%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
}
h2.date-header {
    font: 12px arial;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
    text-transform: none;
}
.post {
    margin: 0.5em 0 1.5em;
    padding-bottom: 1.5em;
}
.post h3 {
    color: #000000;
    font-size: 140%;
    font-weight: normal;
    line-height: 1.4em;
    margin: 0.25em 0 0;
    padding: 0 0 4px;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
    color: #000000;
    display: block;
    font-weight: bold;
    text-decoration: none;
}
.post h3 strong, .post h3 a:hover {
    color: #333333;
}
.post-body {
    line-height: 1.6em;
    margin: 0 0 0.75em;
}
.post-body blockquote {
    line-height: 1.3em;
}
.post-footer {
    -moz-border-radius: 0 20px 20px 0;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
    background: none repeat scroll 0 0 #EAEAEA;
    color: #333333;
    font: 90%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif;
    letter-spacing: 0;
    margin: 0.75em 0 0.75em -10px;
    padding: 10px;
    text-shadow: 0 1px 0 #FFFFFF;
    text-transform: none;

Naahuel · #2 (**permalink**) 05/03/2012, 17:42

Pues es una imágen:

http://2.bp.blogspot.com/_66wIGDjagH...00/body-bg.png

La imágen es vertical, de 1px de ancho que se repite horizontalmente. Tenés que editar esa imágen, subirla a algún servidor que permita enlaces directos (Photobucket, Imageshack, etc) y reemplazar el URL en esta línea:

Código CSS:

Ver originalbackground: url("http://2.bp.blogspot.com/_66wIGDjagHk/TUGHHwnrKQI/AAAAAAAAAr0/FBAZudPmgMw/s1600/body-bg.png") repeat-x scroll 0 0 #A1D3DF;

Es la primer línea debajo de:

Cita:

/* Use this with templates/template-threecol.html */