Banner Basics

[sdawg]

I am trying to follow Ivar's tutorial on 'How to add a banner to your site.' I don't know any html so step one has me stuck temporarily. How do I use Microsoft Word to create a 'banner,' particularly one that is certain 'px' in size? (Is it possible to make one in Word?) If anyone has a mac and can relay directions to help me advance, that would be great!

[denisegoldberg]

I am trying to follow Ivar's tutorial on 'How to add a banner to your site.' I don't know any html so step one has me stuck temporarily. How do I use Microsoft Word to create a 'banner,' particularly one that is certain 'px' in size? (Is it possible to make one in Word?) If anyone has a mac and can relay directions to help me advance, that would be great!
If you want to create a banner for your site, you need a graphics tool, not Microsoft Word. You'll need to use a tool that can create a .jpg, .gif, or .png file.

You can use a tool like Photoshop. Or you could try Gimp, which is a free tool available at http://www.gimp.org/. There are lots of tools out there that will allow you to create images.

On the other hand, you don't need to use an image at all. If you look at my site, the only image in my banner/header is a small copy of one of my photos.

Take a look at # 2 and # 3 in the customization FAQ at http://www.smugmug.com/help/customize-faq.

--- Denise

[adelicateimage]

i tried but, no result.

Essentially, you'll add this code (javascript:toggleShow('firstCode');) to your CSS box, changing the teal:
#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://www.smugmug.com/photos/1234567-O.gif) no-repeat;
}

And, this code (javascript:toggleShow('secondCode');) to your header box (not headtag):
<div id="my_banner"> </div>

replaced w/

#my_banner {

width: 750px;

height: 150px;

margin: 0 auto;

background: url(http://www.smugmug.com/photos/323030568_yaeSi-O.jpg) no-repeat;

}

anyone know what went wrong?:huh

[Allen]

i tried but, no result.

Essentially, you'll add this code (http://javascript%3Cb%3E%3C/b%3E:toggleShow%28%27firstCode%27%29;) to your CSS box, changing the teal:
#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://www.smugmug.com/photos/1234567-O.gif) no-repeat;
}

And, this code (http://javascript%3Cb%3E%3C/b%3E:toggleShow%28%27secondCode%27%29;) to your header box (not headtag):
<div id="my_banner"> </div>

replaced w/

#my_banner {

width: 750px;

height: 150px;

margin: 0 auto;

background: url(http://www.smugmug.com/photos/323030568_yaeSi-O.jpg) no-repeat;

}

anyone know what went wrong?:huh
Welcome to Dgrin :wave

Post a link to your site and we'll look.

[adelicateimage]

http://adelicateimage.smugmug.com/

[Allen]

http://adelicateimage.smugmug.com/

Replace this

<div id="myHeader"> <h1>A Delicate Image</h1><h1> </h1><h4></h4><h4> </h4></div>

with this in your header

<div id="my_banner"> </div>

[adelicateimage]

i tried and you can see what i got?:dunno

[adelicateimage]

i put the "<div id="my_banner"> </div>" under:
Header Javascript - optional

[denisegoldberg]

i put the "<div id="my_banner"> </div>" under:
Header Javascript - optional
That belongs in your HEADER, not Header Javascript.

--- Denise

[adelicateimage]

thank you D:rofl