Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to Manually Add and Image to this Banner?

    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.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Add <img src="/images/image.png" /> (<--- that "src" should be your image location) inside .header-desc:



    (where the <p></p> is)
    Last edited by Sammy12; 09-07-2012 at 08:40 PM.

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Aug 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

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

  • #5
    New Coder
    Join Date
    Aug 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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.

  • #6
    New Coder
    Join Date
    Nov 2011
    Location
    ON, Canada
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!)

    Code:
    <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.
    Last edited by AGENT_P6; 09-08-2012 at 11:59 PM. Reason: additional info
    Overwhelmed as one would be, placed in my position.
    Such a heavy burden now to be the one
    born to bear and read to all the details of our ending.
    To write it down for all the world to see. But I forgot my pen...


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •