PDA

View Full Version : Help for Home Page Customization


jonnypb
Aug-20-2007, 01:12 PM
I've got the basics of my home page setup but I'm not too happy with it yet.

I've got a slideshow going which is good but I'd like to make my Banner and Nav Bar more appealing

I like the look of http://www.moonriverphotography.com/ and would like something similar

Basically I'd like my navbar to just show the words and not have a coloured box round and maybe a nice type of font - I tried to set the box the same colour as the background but it didn't quite work

Also I don't like my Banner - It was just a test anyway. Again I'd like some type of transparent banner so that again it just has the words and not a box round it that you can see. To get a banner like moon river photography does that need to be created in something like photoshop or can something elegant be done just in a header?

Thanks for any help :thumb

www.jbowie.co.uk

Allen
Aug-20-2007, 01:47 PM
...
Basically I'd like my navbar to just show the words and not have a coloured box round and maybe a nice type of font - I tried to set the box the same colour as the background but it didn't quite work
...
Here's something a little fancier for your nav. Many possibilities available.

#navcontainer ul li a {
text-decoration: none;
padding: .2em 2em;
color: #fff;
background-color: none;
font-family: Comic Sans MS;
font-size: 130%;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: none;
text-decoration: overline;
}

jonnypb
Aug-20-2007, 02:09 PM
Thank you for that, looks better already :thumb

Do most people do their banners in something like photoshop?

Allen
Aug-20-2007, 02:25 PM
Thank you for that, looks better already :thumb
Do most people do their banners in something like photoshop?
Just about any photo editing program will work. Just save as a png if you
want it transparent or as a jpg if you don't.

If you want a slideshow frame add these to your CSS.

#bioBox {
margin: 0 auto;
height: 440px;
width: 640px;
border: 4px ridge #ccc !important;
}

#ssSlide {
margin-top: 20px;
height:400px
}

jonnypb
Aug-20-2007, 03:26 PM
Thanks Allen

One last question for tonight :wink

I've added this into my header to make my banner clickable to my homepage

<div id="my_header"><a href="http://www.jbowie.co.uk"><img src="/img/spacer.gif" width="750" height="150" border="0" /></a></div>

But it's moved my banner down the page and the clickable area is in the top left :scratch

Allen
Aug-20-2007, 03:39 PM
Thanks Allen

One last question for tonight :wink

I've added this into my header to make my banner clickable to my homepage

<div id="my_header"><a href="http://www.jbowie.co.uk"><img src="/img/spacer.gif" width="750" height="150" border="0" /></a></div>

But it's moved my banner down the page and the clickable area is in the top left :scratch In your header code change these.

<div id="my_header"><a href="http://www.jbowie.co.uk"><img src="/img/spacer.gif" border="0" height="150" width="750"></a></div>

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

<div id="my_banner">
<a href="http://www.jbowie.co.uk">
<img src="/img/spacer.gif" border="0" height="150" width="750">
</a>
</div>

You had added another div for the spacer.gif

jonnypb
Aug-20-2007, 03:48 PM
:clap

Many thanks Allen.

I hope they pay you a good wage :thumb

:clap