| Author |
Message
|
| SuperSkyRockets |
 Posted: Sun Dec 02, 2007 9:07 am Post subject: Help with header customisation |
 |
|
Primary member
Joined: Nov 28, 2007
Posts: 63
|
I am using a template that I have downloaded from blogcrowds for a blog that I am setting up. It is a custom template with 3 columns, 1 side-bar either side of the posts section. I have created a custom header using GIMP but cannot get it viewed (its a .jpeg file), whatever I do (upload through blogger layout guide OR change the html) seems to be over-written and it just appears black.
Can anyone help me??
(Please note that in the user guidelines it states I can change the template as much as possible as long as I retain the blogcrowds link and do not distribute the edited work)
_________________
One man´s meandering e-business investigation;
http://e-businessbanter.blogspot.com |
|
| Back to top |
|
 |
Sponsored Ads
|
 |
| Shawn |
| Posted: Sun Dec 02, 2007 10:14 pm Post subject: |
|
|
Site Developer
Joined: Sep 06, 2006
Posts: 324
Location: Canada
|
Hello SuperSkyRockets,
What is the url of the blog so I may review and get back to with an answer or advice on the best approach.
Its very possible to use CSS to control the header image or we may need to create an attribute surrounding it with a DIV tag to accomplish the task.
let me know.
Shawn DesRochers
_________________
| Affordable Web-Hosting | FREE Blog Directory |
PC Windows Tips |
Ultra Game Play |
|
| Back to top |
|
|
| SuperSkyRockets |
| Posted: Mon Dec 03, 2007 7:07 am Post subject: Thank you! |
|
|
Primary member
Joined: Nov 28, 2007
Posts: 63
|
Hi thanks very much for helping out a stupid newbie!!
The URL is http://revewe.blogspot.com/ and my header is a .jpeg file (but it can easily be changed). |
|
| Back to top |
|
|
| SuperSkyRockets |
| Posted: Tue Dec 04, 2007 9:12 am Post subject: |
|
|
Primary member
Joined: Nov 28, 2007
Posts: 63
|
No luck I guess then Shawn? I don't want you to waste any more of your time on the problem, I'll just make do with whats there and try something else, maybe I can use the header I made as a custom banner now to promote the blog somehow.
Thanks for looking into it though!!
_________________
One man´s meandering e-business investigation;
http://e-businessbanter.blogspot.com |
|
| Back to top |
|
|
| Swapw |
| Posted: Tue Dec 04, 2007 5:39 pm Post subject: |
|
|
Primary member
Joined: Dec 01, 2007
Posts: 27
Location: US
|
I'm not sure if you have fixed this problem. But to solve this, it depends on the version of your blog. Old blogger or new blogger?
If you are using the new version of blogger, you can edit your head and have this part checked "Instead of title and description". This way you can use images instead of text or vice versa.
-Swapw
_________________
Myspace Layouts
Naruto Episode
|
|
| Back to top |
|
|
| SuperSkyRockets |
| Posted: Tue Dec 04, 2007 5:50 pm Post subject: |
|
|
Primary member
Joined: Nov 28, 2007
Posts: 63
|
Hey there Swapw! No i've tried all that, but nothing I do makes a difference, its because I'm using a custom template that the entire html is different. I think I might just ignore the problem! Thanks for the help though!
All the best!
_________________
One man´s meandering e-business investigation;
http://e-businessbanter.blogspot.com |
|
| Back to top |
|
|
| CindyBreninger |
| Posted: Tue Dec 04, 2007 10:10 pm Post subject: |
|
|
Primary member
Joined: Oct 23, 2007
Posts: 51
|
I have text in my header and tried to add a photo, but it either take up the entire header, or disappears. Any idea how to put a picture next to the text like on the right or left?
Cindy
_________________
A Day in the life of Cindy |
|
| Back to top |
|
|
| Rose |
| Posted: Tue Dec 04, 2007 11:29 pm Post subject: |
|
|
Site Administrator
Joined: Sep 06, 2006
Posts: 1845
Location: Canada
|
|
| Back to top |
|
|
| Shawn |
| Posted: Tue Dec 04, 2007 11:29 pm Post subject: |
|
|
Site Developer
Joined: Sep 06, 2006
Posts: 324
Location: Canada
|
Sorry SuperSkyRockets I was just really busy with server upgrades that I almost forgot about this post...
Ok let’s add a header to your blog... I assume you want it in the box or the entire head section of your blog?
Anyway let’s give you the first set of instructions...
First upload your image to blogger.... and copy the url of the full location of the image as we will need the actual path...
Next you will need to edit your template CSS code as it’s probably the best approach and not that hard to do...
Now in your template I see the following...
CSS
| Code: |
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid #333333;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid #333333;
text-align: center;
color:#cccccc;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
}
#header a {
color:#cccccc;
text-decoration:none;
}
#header a:hover {
color:#cccccc;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:800px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;
color: #777777;
}
#header img {
margin-left: auto;
margin-right: auto;
} |
Now where you see this at the top
| Code: | #header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid #333333;
} |
We need to change to this
| Code: |
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid #333333;
background-image: url('http://revewe.blogspot.com/your-image-url.jpg');
}
|
Now if the image doesn't appear in the right spot move it to any of the CSS attributes that declare the #header as the key elements for the position where you want your image to appear..
For example
| Code: | #header {
margin: 5px;
border: 1px solid #333333;
text-align: center;
color:#cccccc;
} |
Would now become....
| Code: | #header {
margin: 5px;
border: 1px solid #333333;
text-align: center;
color:#cccccc;
background-image: url('http://revewe.blogspot.com/your-image-url.jpg');
} |
The key is to insure you have the actual path to the image so that your CSS file can load the image from the right location...
| Code: | | background-image: url('http://revewe.blogspot.com/your-image-url.jpg'); |
If no image loads at all your not using the actual path to the image - so re-check your image source and your URL used in the CSS atribute to insure they match and there correct.
Good luck and if you need further help just yell!
Shawn DesRochers
_________________
| Affordable Web-Hosting | FREE Blog Directory |
PC Windows Tips |
Ultra Game Play |
|
| Back to top |
|
|
| erikko |
| Posted: Mon Dec 10, 2007 9:55 am Post subject: Re: Help with header customisation |
|
|
Junior Member
Joined: Oct 04, 2007
Posts: 124
|
| SuperSkyRockets wrote: | I am using a template that I have downloaded from blogcrowds for a blog that I am setting up. It is a custom template with 3 columns, 1 side-bar either side of the posts section. I have created a custom header using GIMP but cannot get it viewed (its a .jpeg file), whatever I do (upload through blogger layout guide OR change the html) seems to be over-written and it just appears black.
Can anyone help me??
(Please note that in the user guidelines it states I can change the template as much as possible as long as I retain the blogcrowds link and do not distribute the edited work) |
i suggest you save your header in a png file that way it refrains your blog to slow pageload time
_________________
malaysia real estate Music News
Philippine Web Designs |
|
| Back to top |
|
|
|
|
