Posted 3 years ago #
I want to replace the words with a header JPG file. Can someone direct me or instruct me how to do this. I am a complete Newbie and am just actually learning how WordPress even works. Seems to be working fine, but I really want to change the header desperately. This question has been asked by my husband and no one seems to want to help us, so I guess you could say I am begging for your help.
Please HELP now.
Windspirit
Posted 3 years ago #
Tried the codex?
codex.wordpress.org/Designing_Headers
Posted 3 years ago #
Try elaborating on that Gangleri, I too am new to WordPress and that makes no sense to me. Im look for a similar result.
Posted 3 years ago #
If your header not already has an image in the header, it's not an easy thing you try to do. Reading the "codex" carefully is the place to start.
Posted 3 years ago #
This all just seems to be too darn complicated. All I want to do is insert a simple stupid banner jpg. Why do things always have to be so complicated? Oh well, maybe I better go some place else and try to get another type of user friendly.
Thanks for the try to help.
@windspirit
Post a link to your site so we can see what theme you are using, and them someone can probably tell you how to do it.
Posted 3 years ago #
Or start with a theme that already has an image in the header. WP IS user friendly, but you seem to want to start with pro-stuff.
But for a simple starter (even I managed to do that), this is from my header.php and it includes an image in it:
<div id="page">
<div id="header">
<div id="headertitle">
<img src="http://www.website.com/header.jpg" alt="header image" align="right"/>
<h1><a href="<?php bloginfo('url') ?>" title="<?php bloginfo('name') ?>: <?php bloginfo('description') ?>"><?php bloginfo('name') ?></a></h1>
<p><?php bloginfo('description') ?></p>
</div>
</div>
Posted 3 years ago #
I have the same question!
My site is http://www.fitpitkc.com - and my current theme is Pureflowers 1.0 by Smartertemplates.com
I'd also like to modify the colors so they match PMS colors the logo uses.
@trish_od
Your current header is in images/header.gif It looks ike it's composed of the picture and the red gradient above the picture that is the background for the nav bar. So, you would need to incorporate both in your new image.
@trish_od - thanks for supplying a link to the site. Makes it so much easier to help. To replace the image in your theme, open the style.css file and find the following:
#navigation
{ clear: both;
float: left;
width: 930px;
background-image: url(images/header.gif);
height: 226px;
padding-right: 20px;
margin-top: 20px;
}You can do one of 2 things:
1. create an image 930x226 pixels, call it header.gif and place (upload) it in the images folder of your theme.
2. upload an image and edit the css above to fit your new image. It's easiest if you keep the same width of the image. The hight is something you can play with.
To change the text colors/background colors:
Look through the style.css file for color: to edit text color and background-color: for background colors. Colors can be expressed in Hexadecimal values (#000000 is same as black and #FFFFFF is same as white etc.) or in RGB values ( rgb(255,0,0) or rgb(100%,0%,0%) is same red )
There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent is also a valid value.
@windspirit - the codex that Gangleri is refering to is the Documentation section of WordPress.org. You can find it by scrolling to the top of this page and clicking on the "Docs" link. In general you're expected to have looked for an answer there first before posting here. (in fact you should also search the forum too, to see if the question has been asked already. Guess how many results you get when you search for "header image"?)
Posted 3 years ago #
OK Here is the link to the website in question. http://info-nc.com
Windspirit
Posted 3 years ago #
Sorry, I should have stated, we are using Inove Template for the site.
Windspirit
Posted 3 years ago #
@windspirit - To get rid of the words, you can either hide them using CSS, or delete the text from inside WordPress by going to settings/general and then deleting your title and blogline.
To replace them with an image that will blend in properly, you probably want to just edit the header_footer.jpg file in the theme folder. Make yourself a backup copy first though, in case something goes wrong.
Posted 3 years ago #
alexmansfield, Thank you so much for the help. It is great to know that somebody has taken their valuable time to assist another. Now if I might indulge your assistance a little further. I have had to increase the size of the header in order to accommodate my JPG. It is working fine, but I am not sure how to get the menus and search box below the header or at least to the bottom of the header. Please take a look and tell me what you think. http://info-nc.com also how do I actually get rid of the bottom portion of the JPG which is located on the very bottom of the web page?
Windspirit
Posted 3 years ago #
ok disreagrd the last question on my previous post regarding getting rid of the bottom portion of the JPG at the very bottom of the page. Got that sorted. Still require the first part of the question however.
"I am not sure how to get the menus and search box below the header or at least to the bottom of the header."
Posted 3 years ago #
@trish_od I have taken a look at your site and it looks as if you have gotten sorted. Now if I can get the rest of my question can be resolved we got it made. I just keep playing around and hopefully things will come right, but I would like the correct way once as my saying is measure twice, cut one.
Windspirit
@windspirit
Read the comments in my post at the link below. I created a video demonstrating how to replace the iNove header and someone asked about making it larger...the comments on that post may help you.
Posted 3 years ago #
I think this will help. Open up style.css and make the following changes:
Find:
#header {
background:url(img/header_footer.jpg) 0 0 no-repeat;
height:174px;
}and change height to 205px.
Find:
#navigation {
margin:1px 0;
}and change "margin:1px 0;" to "margin:83px 0 0 0;"
You might also want to add "background: #fff;" just below "margin:83px 0 0 0;" to make the background white.
Finally, I know that you said to disregard the part about the bottom of the page, but I'll mention it anyway. The old header_footer.jpg was used in both the header and the footer. Since that file got edited, the footer can't use it like it had. Not a big deal, but if you want to fix that, just give your new header image a different name and change your stylesheet to look for the new image. Then put the old header_footer.jpg back and allow the footer to use it.
Posted 2 years ago #
Question,
How Can I keep the same background color in my navigation no matter where i go in my blog? What do i have to change in the header.php code?
Thanks,
This topic has been closed to new replies.
