Hi all
I am trying (with NO success)! to adjust a standard Blogger.com provided template. It's just a plain template but I'd like to replace the header where the name of my blog and description goes with a .jpg graphic hosted on my own server.
I can get the graphic to appear but I can't get it formatted properly - i.e. centred and the title and description of my blog insists on appearing over the top of it.
It boils down to the fact that I know not enough about the code and have to admit defeat!
If anyone has the right line of code for me to lob in I would be most grateful.
Here is the basic template code. Note: I will post it from the top down as far as where the data for content and other stuff appears as I assume that it is not necessary. Of course if I am wroong there or you need anything else pls advise and I'll try and give you any required info.
Also, I hope this is the best place for this post.... thanks in advance
Danny
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima Black
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */
body {
background:#000;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color:#9ad;
text-decoration:none;
}
a:visited {
color:#a7a;
text-decoration:none;
}
a:hover {
color:#ad9;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #333;
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#ccc;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
I am trying (with NO success)! to adjust a standard Blogger.com provided template. It's just a plain template but I'd like to replace the header where the name of my blog and description goes with a .jpg graphic hosted on my own server.
I can get the graphic to appear but I can't get it formatted properly - i.e. centred and the title and description of my blog insists on appearing over the top of it.
It boils down to the fact that I know not enough about the code and have to admit defeat!
If anyone has the right line of code for me to lob in I would be most grateful.
Here is the basic template code. Note: I will post it from the top down as far as where the data for content and other stuff appears as I assume that it is not necessary. Of course if I am wroong there or you need anything else pls advise and I'll try and give you any required info.
Also, I hope this is the best place for this post.... thanks in advance
Danny
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima Black
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */
body {
background:#000;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color:#9ad;
text-decoration:none;
}
a:visited {
color:#a7a;
text-decoration:none;
}
a:hover {
color:#ad9;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #333;
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#ccc;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
