WordPress.org

Forums

[resolved] Adding an image above content and below menu bard (10 posts)

  1. bhale7
    Member
    Posted 2 years ago #

    Hi, I'm trying to add an image approximately 642x100 above my content and below my menu bar. I have a child theme setup for twentyelven and have already made a bunch of CSS changes, but I can't figure out how to accomplish putting the image where I want it.

    My site is http://elitegamingcomputers.com

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    try in header.php;

    in this area:

    </header><!-- #branding -->
    
    	<div id="main">

    before, after, or inbetween those lines - anywhere there is below the menu, but with slightly different effects.

    you might need to wrap the image code in a span or div, or add a css class to the image html tag, for easier formatting.

  3. bhale7
    Member
    Posted 2 years ago #

    Thanks for responding alchymyth. I'm not really familiar with how to work with .php stuff.

    Right now I just have the style.css in my child theme and have imported the twentyeleven theme. I've made all my changes through that thus far.

    To do this, do I need to make a .php file in my child theme, or change it in the editor in my wordpress dashboard?

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    you need to save a copy of header.php into your child theme folder (for instance using ftp http://codex.wordpress.org/FTP_Clients ); then edit it.

  5. bhale7
    Member
    Posted 2 years ago #

    Alright, I copied the header.php file over, but now I'm having trouble with the right code to put in. I googled putting images in .php files and used this:

    <?php
    
    $image = url ("http://elitegamingcomputers.com/wp-content/uploads/2012/07/1test.png");
    $height = 280;
    echo '<img src="'.$image.'" style=width:"' . $width . 'px;height:' . $height . 'px;">';
    
    ?>

    It turned everything except my header and my menu bar white (probably because the image I'm using is just a test image and it's all white.)

    I entered the code after <div id=main> and before it and both yielded the same results. I'm assuming that the code I'm using is wrong. Any ideas?

  6. alchymyth
    Forum Moderator
    Posted 2 years ago #

    why don't you simply use html?

    this would replace all your posted code:

    <img src="http://elitegamingcomputers.com/wp-content/uploads/2012/07/1test.png" style="width:1000px;height:280px;">

    btw:
    in your code, the one " was at the wrong location, and the width value is missing;

    echo '<img src="'.$image.'" style="width:' . $width . 'px;height:' . $height . 'px;">';
  7. bhale7
    Member
    Posted 2 years ago #

    That worked! I'm really new to all of this and the only way I was able to alter the page as much as I did was by googling the effect I wanted and changing it in the style.css sheet in my child theme.

    The .php files are a whole new beast for me to tackle.

    Now that I have the image on there, what kind of code do I use to center it and change the padding? I tried adding:

    align="middle"

    And

    align="center"

    But nothing happened.

    http://elitegamingcomputers.com

    If you look at my page now, the image is there, but it is sitting on the right side of the page, and the padding is uneven on the top and bottom. I'm assuming I need to enter some kind of "align" and "padding" code, but I'm not sure how to arrange it.

  8. bhale7
    Member
    Posted 2 years ago #

    By the way, thank you for your help!

  9. bhale7
    Member
    Posted 2 years ago #

    Okay, I got it to center, but I can't get it to move up. It's almost like it's as high as it can go, because when I change the padding it only effects the bottom of the image.

  10. bhale7
    Member
    Posted 2 years ago #

    Nevermind! I figured that out, too. I added:

    margin-top:-8px

    That did it, now I just have to create the image. Thanks again for all your help.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.