WordPress › Support » Header Image Problem

Forums

WordPress › Support » How-To and Troubleshooting

[resolved] Header Image Problem - not visible (42 posts)

dewijones67
Member
Posted 4 months ago #

Hello,

I am a newbie, I am a new ICT teacher for a secondary school and am building Blog style site in Wordpress for the school.

I keep hitting a wall with this one - I installed the Pamphlet theme and am modifying it to fit the schools requirements. The image was visible in all browsers but was sitting in the left hand side of the screen and was also sitting in the body section of all other pages.

My attempts to change all this have no left the image not to be visible at all.

I have spent days trying to get this right and would really appreciate it if someone could look at my site and let me know where its failing?

www.newporthigh.co.uk

Thank you very much in advance.....!
Dewi

PS. I also want to reduce the space between the Image Map and the Block Headers and want rid of the header text. Also not sure why the background image is visible in all browsers apart from IE..?

Sorry for the big wish list....
alchymyth
Member
Posted 4 months ago #

file path and file names of the images could be case sensitive in some browsers - please double check.
9MB for a background is gigantic, took over 2 minutes to load in firefox, maybe IE just times-out? .png is also unneccessary large - .jpg might be smaller.

no text in header:
#logo h1, #logo p {display:none;}

i am not sure what an image map or block header is, though.

to have the background img just once on top in the center:
body {background: #ff9900 url('Images/SchoolAssembly.png') top center no-repeat;}
obviously the other styling for body stay the same.
dewijones67
Member
Posted 4 months ago #
Hello Alchymyth,

Thank you for the response and advice much appreciated the header text has disappeared which is a great start - I'm not sure I understood you fully so I've probably not implemented it properly!!!

If its OK with you I will list my issues and deal with each separately then hopefully it will be easier to understand me.
I have exchanged the .png for .jpg on the SchoolAssembly file (now it is 700KB's) should I still make it smaller as its not visible in IE but is visible in Chrome and Firefox?
Still not visible - the file is called header.png and is in the images file.
I would like to reduce the distance between - and sorry for the poor terminology - the yellow strip with the words: Home, About, Recent Letters and Test_Display and the Block Headers: Blog and School Calendar??

Many Thanks once gain,
Dewi
dewijones67
Member
Posted 4 months ago #

sorry - I meant to say I checked case sensitivity.

The images file is definitely lower case and the file names now have the correct case - I changed the header file from nhs_banner.png to header.png to trial this..

Cheers,
Dewi
alchymyth
Member
Posted 4 months ago #

let's start: at the bottom of style.css, where you started changing things:

`/*trial to change the header*/

#header {

background: url('images/header.png') no-repeat left top;

width: 940px;

height: 120px;

}

#logo h1, #logo p {display:none;}

body

{

background: #ff9900

url('images/SchoolAssembly.jpg') top center no-repeat;

}'
- there was the word #header missing, a { too much, and a typo in ShoolAssembly -
- as you know, css styles get applied in order of apearance, so the latest body background definition with the typo could have irritated IE. maybe other browsers are more forgiving.

Give me some more time, I am working on it.

alchymyth
Member
Posted 4 months ago #

here are changes I made in the style.css to get the design looking as I understood your idea:

#header {

    background: url(/images/header.png) no-repeat center top;	

    width: 940px;			

    height: 150px;
	margin:0 auto;		

}

#logo {display:none; }

#menu {

	width: 940px;

	margin: 0 auto;

	padding: 0;

	height: 44px; /*alchymyth: changed from 60px to 44px */
	overflow:hidden; /* added to get rid of gap between header and sidebars*/

	background: url(/images/img03.png) no-repeat left top; 

}

#wrapper {
 width: 940px; height:100%;

	margin: 0 auto;  margin-top:44px;

}

#sidebar1 {

	float: left;
	clear:left; /*alchymyth: added to let it float left*/

}

body 

{

background: #ff9900	

url('http://www.newporthigh.co.uk/wp-content/themes/pamphlet/Images/SchoolAssembly.jpg') top center no-repeat;

}

I suppose you could put this all at the end of style.css - no good programming, but it might work. or you could go through the style sheet and replace/repair the code where it was.

as always - no guarantee that it all works perfect first time.

dewijones67
Member
Posted 4 months ago #

Hello,

Mate what can I say that is fantastic - you are really good...!
All visible in all browsers and the gap reduced

Two issues only remain:

The header image / banner is still missing and the "wrapper" if that's its called (the thing with the links in yellow) is shorter - I don't actually mind this too much but I do need to add more links. So could you let me know how to adjust the length then I can increase decrease as required?

Thank you thank you thanks you - I'm sure I could never of done this on my own...!
All the best,
Dewi

alchymyth
Member
Posted 4 months ago #

my mistake, there shall be no / in front of images:

#header {
    background: url(images/header.png) no-repeat center top;
    width: 940px;
    height: 150px;
    margin:0 auto;
}

body
{
background: #ff9900 url(images/SchoolAssembly.jpg') top center no-repeat;
/*should be the short path, no http:*/
}				

#menu {	width: 940px;
	margin: 0 auto;
	padding: 0;
	height: 44px; /*alchymyth: changed from 60px to 44px */
	overflow:hidden; /* added to get rid of gap between header and sidebars*/
	background: url(images/img03.png) no-repeat left top;
/*same mistake with the image path, there must be no / in front of images*/
}

I only put the whole code in because I copy/pasted. You can just change the three bits with the image paths.
the space with the links on yellow background (what you called 'wrapper') will show hopefully now, and will extend anyway when you put more links in.

alchymyth
Member
Posted 4 months ago #
one more thing:
```
#page {	width: 940px;
	margin: 0 auto;
	padding: 0px 0px 10px 0px;
/*padding changed to get rid of gap between header and top of sidebar*/
}
```
I will keep watching this space.

PS: another thought: your backgroundpicture SchoolAssembly is extremely large - over 2000px wide, so most of your pupils will never be visible on the screens. what about making width and height of the image half the size, this will reduce the filesize to about a quarter, make the loading quicker, and show more students. to compensate for very long articles and still have a background, you could replace 'no-repeat' in the body { } style with 'repeat-y'.
t31os_
Member
Posted 4 months ago #
You really need to optimise that background image into something smaller, else anyone or dial-up or low level broadband it going to be waiting a while for the page just to load.

Try a few additional updates...
```
body { background:#f90 url('http://img18.imageshack.us/img18/7089/assembly.jpg') top center repeat;}

#menu { background-color:#F7D019;}

#menu a {padding:13px 24px;height:auto;line-height:20px;}

#menu li:hover, #menu a:hover {background:#000;}

#footer {height:50px;background:#282828;width:940px;padding:0;margin:0 auto}

#footer p {margin:20px;padding:0}
```
Add or update CSS lines as appropriate..

Change the body background though, download this image and use this instead.
http://img18.imageshack.us/img18/7089/assembly.jpg

It's reduced to 1600 wide (that should account for people upto 22" screens or so (give or take, depending on screen), i've also reduced the size quite a bit and made it a progressive jpeg.

It's not the ideal kind of image to use as a background, but if you must use it ideally you should use a small version and fade out the image so it merges into the page... (i know that may not be within the scope of your skills, it's merely a suggestion)..

Anyway, sorry for butting in there, see if the above helps at all..
dewijones67
Member
Posted 4 months ago #

Hello - thanks for butting in - what you are saying certainly makes sense, I have downloaded and swapped the image as you suggest.

I exchanged the code:
http://img18.imageshack.us/img18/7089/assembly.jpg ?

with:
http://www.newporthigh.co.uk/wp-content/themes/pamphlet/Images/SchoolAssembly.jpg

as the school surf control will not allow access to the site!
Obviously downloading and renaming your image first...!

I am really happy with how its starting to look now - the main issue now is the banner/header is not visible. IE has a cross in the top left position so it knows something is there its just refusing to read the image....?

Any ideas - suggestions would be really good.....?

Thanks again I do hope you understand how valuable help like this is - as you say 'not within the scope of my skills' is about right...! But I'm learning ....slowly... but still learning...

Cheers,
Dewi
dewijones67
Member
Posted 4 months ago #

sorry I spoke to soon - I swapped the url for

http://www.newporthigh.co.uk/wp-content/themes/pamphlet/Images/header.png

and its now visible - There is still an image on the top left which needs shifting - but its alot better...

Any ideas?

thanks,
Dewi
t31os_
Member
Posted 4 months ago #

Yes apparently the image didnt't exist.. *just clicked the link again and i now see your header image* ...

Did you change something, because the header image is now there..? :)
dewijones67
Member
Posted 4 months ago #

I just changed the URL - the image is just the same.... it need changing I think..

Could you have a look at in Chrome or IE as there is (sorry for the crap terminology) but, there is a logo which shows an image cannot be read sitting over top left hand corner of the banner?

Many Thanks,
Dewi
trinkel
Member
Posted 4 months ago #

Thanks to you all. I'm in the process of changing the appearance of my blog also and I can use all the information possible.
t31os_
Member
Posted 4 months ago #

Yes that would be this bit..
<div id="splash"><img src="http://www.newporthigh.co.uk/wp-content/themes/pamphlet/images/img02.gif" alt=""> </div>

Find the div with the id splash in the header.php of your theme and remove it, since you don't need it..
dewijones67
Member
Posted 4 months ago #

Sorry - its moved the banners around...?

cheers
t31os_
Member
Posted 4 months ago #
Update or add CSS.. (as appropriate)
```
#wrapper {margin:0 auto}
#header {padding:150px 0 0 0;height:auto;margin:0 auto}
#page {padding:0;margin:10px 0}
```
If any problems still, just post back, we can tweak more if necessary...
dewijones67
Member
Posted 4 months ago #

it still has the Splash function:

#splash {
width: 940px;
margin: 0 auto;
height: 150px;

in the css file - I think this code is the one that keeps the lower banner in position - it was where the original header was...?

Maybe...?
t31os_
Member
Posted 4 months ago #

See my post above, if you make those changes it will fix the problem...

You don't need that splash, we just have to update the CSS to accomodate it not being there... don't worry... just update the lines as posted above.
dewijones67
Member
Posted 4 months ago #

Hiya again,

Thank you for being persistent...!

Its pushed the sidebars out to the edge - this is really frustrating...!

Not sure if its due to the way I updated the css though as I tried to update each function it may of been better to just drop the code in at the end...?

cheers
dewijones67
Member
Posted 4 months ago #

sorry plus - the wrapper (if thats what its called has two tone's in it - is this due to the buttons have a different Hex no. to the backing image? If so How do we put this right please.....!

I really can't thank you enough for this...!

Cheers,
Dewi
dewijones67
Member
Posted 4 months ago #

if it is, is it possible to make the buttons transparant as they are obscuring an image?
t31os_
Member
Posted 4 months ago #
See your CSS..
```
/* #page {	width: 940px;	margin: 0 auto;	padding: 10px 0px;} */

#page {padding:0;margin:10px 0}
```
You're missing the previous defintions....

The code i supplied is addition to what you have, unless a definition exists, in which case you update it, so the above for example should be..
#page {padding:0;margin:10px 0;width:940px}

Again here..
```
#wrapper {margin:0 auto}

/*	#wrapper {width: 940px; height:100%;margin: 0 auto;  margin-top:44px;}	*/
```
Should be...
#wrapper {width: 940px; height:100%;margin:0 auto}

In other words, just update the values i've posted, but don't leave out the old ones...

Here...
```
body 

{
background: #ff9900	

url('http://www.newporthigh.co.uk/wp-content/themes/pamphlet/Images/SchoolAssembly.jpg') top center no-repeat;

}
/*next set of advice - update the lines of code later*/

body { background:#f90 url('http://www.newporthigh.co.uk/wp-content/themes/pamphlet/Images/SchoolAssembly.jpg') top center repeat;}
```
You're specifying the body twice, remove one... (also defined #header twice, so again remove one - combine definitions where need be)

If you're concerned about keeping old code, copy the file, put it somewhere, then don't worry about removing parts you don't need, since you'll have a backup...

Clean up the file a little removing duplicates and then we'll work on the buttons etc... ;)
dewijones67
Member
Posted 4 months ago #

Thanks for the detailed explanation - it really helps - I made the amendments exactly as explained and its absolutely spot on...

Thank you.....! I need to sort out the colour issues now - but, I think I know enough for that now. I have played with the button issue I had and think its OK for now.

One last question though - could you tell me how to exchange the line of text at the base "Design by Free WordPress Themes" for either a small logo or some text of my own?

Thank you very much....
t31os_
Member
Posted 4 months ago #
Likely footer.php of the theme...

Look for ..
```
<p class="copyright">
		Design by <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>

	</p>
```
So just remove the text and replace it with your own, making sure to leave the tags, <p class="copyright"> and </p>

Example:
<p class="copyright">This is some text</p>
dewijones67
Member
Posted 4 months ago #

That's excellent - easy when you know how I guess - Thanks very much for all your help, hard work and patience. You have been very helpful, I have learned much.

The same to you Alchymyth this has been invaluable. The school would be grateful too.

All the best,
Dewi
t31os_
Member
Posted 4 months ago #

If you get stuck, just post back... :)
dewijones67
Member
Posted 3 months ago #

Hello - I'm really hoping this is still being watched...?

www.newporthigh.co.uk

The issue this time is the Menu Bar has a number of links on it - how do I make these links external (other than my site) rather than internal?
Wordpress only seems to allow them to be subdirectories of the above address (Permalinks??).

Is there a way of altering the code to make them external?

Many Thanks Experts....

Dewi
t31os_
Member
Posted 3 months ago #
How are you currently creating the links and displaying them?

If you're using Admin > Links to create the links you should have no problem linking offsite..

Menu can be generated without the title like so.
```
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>
```
Further options available for it usage.
http://codex.wordpress.org/Template_Tags/wp_list_bookmarks

As long as you type the full address (including http://) when creating the link it will work fine..

Right now it looks like you're creating needless amount of extra menus.... (current page has something like)..
```
<div id="menu">
<ul><li>some link</li></ul>
<ul><li>some link2</li></ul>
<ul><li>some link3</li></ul>
```
When that only need be..
```
<div id="menu">
<ul>
<li>some link</li>
<li>some link2</li>
<li>some link3</li>
<li>some link4</li>
</ul>
```
etc....

1 2 Next »

Reply »

You must log in to post.

About this Topic

RSS feed for this topic
Started 4 months ago by dewijones67
Latest reply from dewijones67
WordPress version: 2.8
This topic is resolved

WordPress.org

Forums

[resolved] Header Image Problem - not visible (42 posts)

Reply »

About this Topic

Tags

Code is Poetry