How to Manually Add and Image to this Banner?

[mrniceguy]

I'd like to add a custom image to the right side of the banner on this site.

I came across this video on customizing your banner in WordPress, but at 4:18 into the video, she references a line of code in the header.php that contains <div id="header" in it, but I don't have that code in my header..

Any help is appreciated. Thanks.

[Sammy12]

Add <img src="/images/image.png" /> (<--- that "src" should be your image location) inside .header-desc:



(where the <p></p> is)

[mrniceguy]

The only place I could find .header-desc was in the stylesheet.css. I don't have any <p></p> in there.

Here's a link to the contents of my style.css

Thanks for your help

[mrniceguy]

I read that .header-desc should be in my index.php, however this is all that's in my index.php, and I don't have an index.html

<?php
/**
 * The main template file.
 *
 * @package WPLOOK
 * @subpackage BlogoLife
 * @since BlogoLife 1.0
*/
get_header();
get_template_part('inc', 'indexloop' ) ;
get_sidebar();
get_footer(); ?>

[mrniceguy]

I finally found the right section of code in the header.php. Here's what it looks like after pasting the URL of the image there. It stretched the height of that section.

Is there anything I can do to try to modify this so it looks right, or no?

If not, I may just simply type their contact information there, as it's probably not worth the trouble trying to make the contact information look overly pretty.

For the sake of reference, below's what the section looks like now where I pasted the URL into within the header.php file:

<div class="header-desc fright"><p><img src="http://myhousesforsaleindetroit.com/wp-content/uploads/2012/09/contact-us-image.png" /></p></div>

Thanks for your help.

[AGENT_P6]

I'm a beginner myself but I'll chime in
For a website of this type, the contact information is of high importance. Therefore, relying on an image as the sole contact information is not a good idea.

I don't know how php works, but I would imagine it also supports the "alt" attribute. Alt is the alternate information that will be displayed if for any reason the image is not fetched when the browser loads the web page. So I would suggest keeping the image there, but in the php code (if supported; again I'm unfamiliar with it), add the alt attribute as shown in the code below as a "plan b" of sorts, in case the image doesn't load.

Also, some people may be too visually impaired too see web pages, and rely on the text of a web page being spoken to them via accessibility software. Accessibility software does not know how to read the numbers on an image...all it can understand is that there's an image.

Lastly, some people still use dial-up which is insanely slow, and they may turn off image rendering in their browser so they can load pages faster. Again, this would prevent them from seeing the contact info if it is only conveyed via an image

Anyhoo, here's how it would look in HTML; hopefully it works the same in php (worth a try!)

<div class="header-desc fright"><p><img src="http://myhousesforsaleindetroit.com/wp-content/uploads/2012/09/contact-us-image.png"
alt="Contact us by telephone: (248)468-1598" /></p></div>

As for the image stretching, it looks fine as of right now on the live website, but if you wanted to change the dimensions of it still, a simple photo editor could scale the image down and/or you could specify its dimensions directly to the browser with the width and height attributes.

GIMP is a completely free, lightweight -yet quite powerful - photo manipulation program that supports more image filetypes than you can shake a stick at. Load the image in gimp>right click image>image>scale image> (adjust dimensions to fit the div properly and/or stylishly).

Edit: not all browsers display the alt's text, but you would be doing your due diligence to put it in there anyway.