WordPress.org

Ready to get started?Download WordPress

Forums

Adding image to Black-Letterhead theme (18 posts)

  1. Inky
    Member
    Posted 9 years ago #

    I'd like to add an image to the header (instead of the title), but I've no idea what tag to put in and in which template. Please help.

  2. Lorelle
    Member
    Posted 9 years ago #

    Not familiar with that particular theme, traditionally the header information is found in the header.php template file.

    The image information is either stored in CSS in the head of the header.php or in the style.css style sheet. Some put the image in the background of the h1 tag, or in the header ID.

    You'll find the information there and just change the file name.

  3. ulyssesr
    Member
    Posted 9 years ago #

    The Letterhead and Black Letterhead themes are based on Kubrick. You can disect Kubrick to get same effect with header image. Edit the 'header.php' file and place image tags there. Your header image must be less than width of 740px and height 192px.

    1. Edit 'header.php'

    Add the following codes bold between......


    <?php wp_get_archives('type=monthly&format=link'); ?>


    <style type="text/css" media="screen">
    /* BEGIN IMAGE CSS */
    #header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/yourimage.jpg") no-repeat bottom center; }
    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
    #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }
    /* END IMAGE CSS */
    /*
    #headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/yourpersonalheader.jpg') no-repeat top;}
    */
    </style>

    <?php wp_head(); ?>

    </head>
    <body>

    <div id="page">
    <div id="header">
    <div id="headerimg">
    <h1>"><?php bloginfo('name'); ?></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
    </div>
    </div>
    <img src="images/line.gif" width="433" height="1" alt="" />

  4. washburn
    Member
    Posted 9 years ago #

    One (dumb) question. The example above refers to two image files--"/images/yourimage.jpg" and "images/yourpersonalheader.jpg"--should this code really refer to two separate images, or should these file names really be the same?

    If it's two different images, what image, aside from the one to be used in the header, is refered to here?

    Maybe a dumb question, but whatever.

  5. washburn
    Member
    Posted 9 years ago #

    Also, I note that the Black letter-head based website Fireofthemind.com seems to use a header image that's 760x200 px--so it would seem that it must be possible to use images larger than 740x192. (see http://www.fireofthemind.com/images/fotm_banner2.jpg).

  6. washburn
    Member
    Posted 9 years ago #

    A further note: in the code you provide above, it looks like at least one line doesn't display properly. It looks like something got chopped-out of the fifth line from the bottom. Is something missing there? Maybe that's the issue.

  7. beohbe
    Member
    Posted 9 years ago #

    OK I did all that ulyssesr said and my picture just doesn't display, it is still the text.

    My site is http://www.fragtheblog.com

    my code in the header is this

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <!-- leave this for stats -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>

    <style type="text/css" media="screen">
    /* BEGIN IMAGE CSS */
    #header { background: url("<?php bloginfo('stylesheet_directory'); ?>http://www.fragtheblog.com/images/personalheader.jpg") no-repeat bottom center; }
    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
    #headerimg { margin: 7px 9px 0; height: 183px; width: 719px; }
    /* END IMAGE CSS */
    /*
    #headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>http://www.fragtheblog.com/images/personalheader.jpg') no-repeat top;}
    */
    </style>

    <?php wp_head(); ?>
    </head>
    <body>

    <div id="page">

    <div id="header">
    <div id="headerimg">
    <h1><?php bloginfo('name'); ?></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
    </div>
    </div>
    <img src="images/line.gif" width="433" height="1" alt="" />

    whats wrong here!?

  8. Lorelle
    Member
    Posted 9 years ago #

    Or you can follow the simple instructions at

    http://codex.wordpress.org/Designing_Headers

  9. adnihilo
    Member
    Posted 9 years ago #

    New to wordpress but not php. This is the most wierd php program I've run into yet. Perhaps because it doesn't seem to be standard php scripting.. No matter what I do or try, I can't get header images to work! Question - isn't there supposed to be a header image on the default wordpress theme (from kubrick) because I get nothing??? Or is it commented out using */ ???

    Anywho, the point is I also have tried for hours to get an image on Black-Letterhead theme using variations on this above script from ulysses?? Obviously it can be done as seen here on http://www.fireofthemind.com/fotmwp/ Who's author makes a comment on the designer's page here http://ulyssesonline.com/blackletterhead/to check out his site to see how he incorporated it - but unfortunately is keeping it a secret as to how he managed to do it.. Instructions at http://codex.wordpress.org/Designing_Headers aren't what I would call simple, or at least don't give a straight forward script to insert a header image into header.php that I found..

    I got the header image to download but it just won't display. In firefox I can right click to display background image and then click back and I'll then see the header image - but on IE I get nada.. as one can see here http://lessthanhuman.lostvegas.us/

    About ready to go back to pmachine or something else with more standard php but I do like all the plugins for wordpress.. Anyone out there got any ideas on how to get a header image to work with this letterhead theme????? Much prior thx...

    Regards

  10. adnihilo
    Member
    Posted 9 years ago #

    I've loaded other themes like 'ICE' http://geo.trippy.org/themetest/ and McStars http://www.mcmike.nl/english/ with background bodyand/or header images and no themes that use header images display any header or body images for me after 'selecting' them in admin/presentation.. In fact, I've yet to upload a theme using images in their themes that works so something else is up.. Commented the css garbage */ and /* in default wordpress theme for # headerimgand and loaded the image into images/personalheader.jpg and still no header image...

    For any theme I load in 'presentation' and Only after I right click - view background image using Firefox to be taken to the header or body background image - then back click can I actually see the background images displayed using wordpress... It shouldn't be this difficult for a mere background or header image on a blog but yet it is... Probably something simple...

    I may as well give up since 'on my own' here (although I've solved multitudes of php problems I've had on my own, I can't figure this out) so will just have to use more standard php blog programs that I can manipulate... For this one I CAN NOT.

    Anyone see a header image here on http://lessthanhuman.lostvegas.us/ and if so what browser???

  11. adnihilo
    Member
    Posted 9 years ago #

    Figured out problem... In case anyone else has similar problems with imgaes.. Hope this program is worth it for so far it IS NOT! A WordPress glitch for images in subdomains! What a pain!! See http://wordpress.org/support/topic/18007

    Not worth screwing around trying to resoolve subdomain glitches with program that apparently go unresolved...

  12. adnihilo
    Member
    Posted 9 years ago #

    Oh, and the only reason this script above doesn't work 'as is' is because below isn't commented out...
    /*
    #headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>http://www.fragtheblog.com/images/personalheader.jpg') no-repeat top;}
    */

    Normally when someone says 'insert' the following code it would be as is.. Apparently not so with much of these wordpress themes.. Get rid of those goofy CSS signs /* and */ and it works...

  13. PaulFlack
    Member
    Posted 9 years ago #

    OK, how do you put a link in an image in a header???

  14. PaulFlack
    Member
    Posted 9 years ago #

    Hello, does anybody read these?

  15. moshu
    Member
    Posted 9 years ago #

  16. maevealleine
    Member
    Posted 9 years ago #

    Hello:

    I am very very much new to this sort of scripting and I've followed the instructions above to attempt to place an image on the header for this theme. Can anyone tell me what I might be doing wrong? Here is the code I have below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;

    charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog

    Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <!-- leave this for stats -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"

    media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php

    bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php

    bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php

    bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>

    <?php wp_head(); ?>

    <style type="text/css" media="screen">
    BEGIN IMAGE CSS
    #header { background: url("<?php bloginfo('stylesheet_directory'); ?>http://www.dragonfyre.net/images/melissameanderings.jpg") no-repeat bottom center; }
    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
    #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }
    END IMAGE CSS
    #headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>http://www.dragonfyre.net/images/melissameanderings.jpg') no-repeat top;}

    </style>
    </head>
    <body>

    <div id="page">

    <div id="header">
    <div id="headerimg">
    <h1>"><?php bloginfo('name');

    ?></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
    </div>
    </div>
    <img src="images/line.gif" width="433" height="1" alt="" />

    I really appreciate any help. Thanks :)

  17. enveloop
    Member
    Posted 8 years ago #

    Hi, I just made a short article about this issue in my own site (which uses black letterhead with an image), including the fragments of code that I modified. This is the link to the article: http://envelooponline.com/nan/index.php/archives/adding-an-image-to-black-letterhead

  18. SAFFLEUR
    Member
    Posted 8 years ago #

    I posted a fix for this on nan's site. This should work on all black-letterhead style themes.

    Nan's

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags