Help with borked wordpress template

[wonder_lander]

Hi guys.

Anyone give me some assistance with this. My site is www.the-pier.co.uk but the template I've chosen has buttons at the top.

a) Should I remove the buttons and leave the page listings on the right?
b) If I leave them then the second row doesn't work in IE7, how do I fix that!

Answers on a postcard please!

 

[wonder_lander]

Any ideas?

 

[BigglesPiP]

I could have a go at sticking them all in 1 row for you.

Would need the wp-content/themes/[theme name] folder.

I do wordpress themes from scratch usually, like this one: http://1264test.iamtheb.org/wordpress (no posting on that please).

 

[wonder_lander]

I've zipped and uploaded the the to http://www.the-pier.co.uk/ocuk/seagull.zip

Thanks for the help!

 

[BigglesPiP]

How about:

Image:

http://iamtheb.org/wonder_lander/li2.psd

Stylesheet entries in style.css:

/* Menu */
.links {
width: 975px;
height: 45px;
}
a.home {
display: block;
width: 45px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") 0 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.home {
background-position: 0 0;
}
a.about {
display: block;
width: 49px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -45 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.about {
background-position: -45 0;
}
a.backpoolpiers {
display: block;
width: 69px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -94 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.blackpoolpiers {
background-position: -94 0;
}
a.brightonpier {
display: block;
width: 61px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -163 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.brightonpier {
background-position: -163 0;
}
a.southendpier {
display: block;
width: 67px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -224 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.southendpier {
background-position: -224 0;
}
a.wsmgrandpier {
display: block;
width: 83px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -291 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.wsmgrandpier {
background-position: -291 0;
}
a.weatherforecastinformation {
display: block;
width: 114px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -374 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.weatherforecastinformation {
background-position: -374 0;
}
a.googlesearch {
display: block;
width: 53px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -488 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.googlesearch {
background-position: -488 0;
}
a.eastbournepier {
display: block;
width: 77px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -541 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.eastbournepier {
background-position: -541 0;
}
a.bournemouthpier {
display: block;
width: 93px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -618 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.bournemouthpier {
background-position: -618 0;
}
a.skegnesspier {
display: block;
width: 64px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -711 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.skeggnesspier {
background-position: -711 0;
}
a.clactonpier {
display: block;
width: 56px; /* half the width of the image */
height: 45px; /* full hight of the image */
/* background: url("li2.gif") -775 -45 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
}
a:hover.clactonpier {
background-position: -775 0;
}

Stylesheet entries in header.php:

<!-- images go here for the address hack -->
<style type="text/css">
a.home {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") 0 -45 no-repeat; /* url of the image */
}
a.about {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -45 -45 no-repeat; /* url of the image */
}
a.backpoolpiers {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -94 -45 no-repeat; /* url of the image */
}
a.brightonpier {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -163 -45 no-repeat; /* url of the image */
}
a.southendpier {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -224 -45 no-repeat; /* url of the image */
}
a.wsmgrandpier {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -291 -45 no-repeat; /* url of the image */
}
a.weatherforecastinformation {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -374 -45 no-repeat; /* url of the image */
}
a.googlesearch {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -488 -45 no-repeat; /* url of the image */
}
a.eastbournepier {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -541 -45 no-repeat; /* url of the image */
}
a.bournemouthpier {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -618 -45 no-repeat; /* url of the image */
}
a.skegnesspier {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -711 -45 no-repeat; /* url of the image */
}
a.clactonpier {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/li2.gif") -775 -45 no-repeat; /* url of the image */
}
</style>

(before </head>)

The links, replacing the php tags for home, and the links list:

<div class="links">
<a class="home" href="http://the-pier.co.uk" title="Home" /a>	
<a class="about" href="http://the-pier.co.uk/about" title="About" /a>
<a class="blackpoolpiers" href="http://the-pier.co.uk/blackpool-piers" title="Blackpool Piers" /a>
<a class="brightonpier" href="http://the-pier.co.uk/brighton-pier" title="Brighton Pier" /a>
<a class="southendpier" href="http://the-pier.co.uk/southend-pier" title="Southend Pier" /a>
<a class="wsmgrandpier" href="http://the-pier.co.uk/w-s-m-grand-pier" title="W-S-M Grand Pier" /a>
<a class="weatherforecastinformation" href="http://the-pier.co.uk/weather-forecast-information" title="Weather Forecast Information" /a>
<a class="googlesearch" href="http://the-pier.co.uk/google-search" title="Google Search" /a>
<a class="eastbournepier" href="http://the-pier.co.uk/eastbourne-pier" title="Eastbourne Pier" /a>
<a class="bournemouthpier" href="http://the-pier.co.uk/bournemouth-pier" title="Bournemouth Pier" /a>
<a class="skegnesspier" href="http://the-pier.co.uk/skegness-pier" title="Skegness Pier" /a>
<a class="clactonpier" href="http://the-pier.co.uk/clacton-pier" title="Clacton Pier" /a>

</div>

Uses one image and moves it around inside each link area depending on the link (horizontal) and the hover status (vertical).

It's my favourite way to do multi length links with minimal images.

Might need some work, I haven't got a suitable WP install to test it on.

 

[wonder_lander]

Thanks for that. I have more piers to add though so how would I go about doing this on an ongoing basis?

 

[BigglesPiP]

You would have to edit the images, and add lines to the CSS and to header.php. Hard work basically.

Lets see if we can get 2 lines working under IE7.

Try this stylesheet: http://iamtheb.org/wonder_lander/style.css

Paste it into the theme folder, you shouldn't need to re-apply the theme in the wp control panel.

 

[wonder_lander]

Cheers for that, will give it a bash!

 

[BigglesPiP]

If that doesn't work, try setting the height of foxmenucontainer to 100px.

 

[chris74]

Not that I am in any way an expert but failing the above method and with more piers to be added.
Could you not have a button that says something like 'Find your Pier' or 'Find a pier' and then have it linked to a new page offering a list of available ones?.
Might save you a headache. Anyway just an idea

Chris

 

[wonder_lander]

If that doesn't work, try setting the height of foxmenucontainer to 100px.

That worked a treat!

Next questions are:

2 of the buttons have text that wrap around, should I drop the font size (and if so how) or merely try and abbreviate the names?

Also can I get the buttons to appear in an alphabetical order?

 

[wonder_lander]

Not that I am in any way an expert but failing the above method and with more piers to be added.
Could you not have a button that says something like 'Find your Pier' or 'Find a pier' and then have it linked to a new page offering a list of available ones?.
Might save you a headache. Anyway just an idea

Chris

Could possibly swap the top buttons for a drop down menu which has each of the pages listed.

 

[BigglesPiP]

Right, I notice that the words are also shifted a little to far right on the buttons.

This is done in the style sheet:

#foxmenucontainer{
	height:100px;
	background:#0143ae;
	display:block;
	padding:0px 0 0px 14px;    /* This line */
	}

Change the 14px to something smaller. And set the one which is lacking the units ("px") to the same value, give the units.



____________________________________________________________________________________________



To sort out the double line buttons, you need to add a few sections to the style sheet.

look at the page source (from viewing the page in a browser, NOT the php file) and you will see that each menu button has a unique class, as in:

<li class="page_item page-item-9"><a href="http://the-pier.co.uk/weather-forecast-information" title="Weather Forecast Information">Weather Forecast Information</a></li>

For each double line one you need to add:

page_item page-item-9 {
     line-height: 14px;
}

Experiment with the number you use until it looks right, what you're doing it moving the text up and down on the button. Add these sections to the BOTTOM of the style sheet, so the cascade works.



__________________________________________________________________________________________________


I also think dropping the foxmenucontainer's height to 80~90px would make it look better.

 

[wonder_lander]

Thanks again, will have a play with them. Any ideas on getting the buttons in alphabetic order?

 

[BigglesPiP]

Erm, if it can be done, it's in the WP admin somewhere.

 

[wonder_lander]

Erm, if it can be done, it's in the WP admin somewhere.

Can't find where and now having added webcams and a contact form I have filled the second row of buttons!