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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    147
    Thanks
    35
    Thanked 0 Times in 0 Posts

    Add a logo to the left of my heading (WordPress)

    How can I add an 80px by 80px image to the left of my heading in wordpress?

    The current code for the heading is:

    PHP Code:
    <div id="wrapper">

    <?php lightword_header_image(); ?>

    <div id="header">

    <?php lightword_rss_feed(); ?>
    http://mmhudson.com/

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,464
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    Describe the position of the 80X80 image.
    Since it would be taller than the space at the top, do you
    want it to push down the page, or go "behind" the page?
    And how far left? Over the date tabs?

    Do a screenshot and use MS Paint to draw how it might look.



    .

  • #3
    Regular Coder
    Join Date
    Mar 2011
    Posts
    147
    Thanks
    35
    Thanked 0 Times in 0 Posts
    I must have read my pixel ruler wrong.

    Here is what I want:
    Attached Thumbnails Attached Thumbnails Add a logo to the left of my heading (WordPress)-zonimer2.jpg  

  • #4
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,464
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    You'll have to dig around for what I guess might be your "header.php" file
    located in the theme folder called "lightword".

    There is a line that looks something like this:
    <div id="top_cufon"><h1 id="logo"><a name="top" title="mmHudson" href="http://mmhudson.com">mmHudson</a> <small>Updates | Resources | Tutorials</small></h1></div>

    It won't have "mmHudson" in there, but a WP variable instead.

    Upload your image to the image folder in the "lightword" directory.

    Then, change that line to something like this ... and since I can't test it,
    this might not be correct ... I'm just guessing.

    <div id="top_cufon"><a href="http://www.mmhudson.com"><img src="lightword/images/yourimage.png" style="float:left; padding-right:20px; border:none;" /></a><h1 id="logo"><a name="top" title="mmHudson" href="http://mmhudson.com">mmHudson</a> <small>Updates | Resources | Tutorials</small></h1></div>

    The part in blue is what I added.
    You have to reference your image correctly (the path and filename).


    .
    Last edited by mlseim; 08-28-2011 at 03:25 AM.

  • The Following 2 Users Say Thank You to mlseim For This Useful Post:

    FuquayDentist (08-28-2011), maxhud (08-28-2011)

  • #5
    Regular Coder
    Join Date
    Mar 2011
    Posts
    147
    Thanks
    35
    Thanked 0 Times in 0 Posts
    Perfect. Thanks a million.

  • #6
    New Coder
    Join Date
    Aug 2011
    Location
    Fuquay Varina NC
    Posts
    21
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Awesome. I use wordpress alot and that will be handy.

  • #7
    Regular Coder
    Join Date
    Mar 2011
    Posts
    147
    Thanks
    35
    Thanked 0 Times in 0 Posts
    So what do you think of the look of that?

  • #8
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,464
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    Looks good.
    That little color adds a touch to the otherwise gray contrast at the top.
    I see you did some more inline CSS to adjust position ... good job on that.
    If you are understanding CSS, you'll be able to customize many things in your theme.


    .

  • #9
    Regular Coder
    Join Date
    Mar 2011
    Posts
    147
    Thanks
    35
    Thanked 0 Times in 0 Posts
    I know css and html pretty well, I just couldn't figure that out for some reason.

    Thanks!

  • #10
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,464
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    I should mention to anyone that is customizing a theme (WordPress).
    Always save a complete copy of your theme directory (folder) / all files, to a safe place on your PC.
    That way, you can always see the original script, in the event you wreck something.

    Only make changes to the theme directory ... do not make any changes to any other
    WP file or directory. This is important, because if you update WP (which happens
    all the time), you'll overwrite any changes you've made.

    WP updates do not affect your theme, unless you're using the default WP theme.
    For some odd reason, WP keeps making theme changes to their own default theme.
    They should not be doing that, as it erases any customizations a user does.



    .

  • #11
    Regular Coder
    Join Date
    Mar 2011
    Posts
    147
    Thanks
    35
    Thanked 0 Times in 0 Posts
    Well the thing is I can't actually update the theme either, because the theme has updates and they will overwrite the changes I made..


  •  

    Posting Permissions

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