WordPress.org

Forums

[resolved] How to make a different bg image for pages? (9 posts)

  1. uriash
    Member
    Posted 9 years ago #

    Hi,
    I use the kubrick theme and wanted to use different header image and footer image for the wide pages (those without the sidebar). I understand it has to be something with the header php?
    thanks,
    uri

  2. petit
    Member
    Posted 9 years ago #

    You might want to create a category template and include another header, like the one included in the pages you have.

    The get_header() function used there will include the normal header defined in header.php, so could use
    <? include("myheader.php") ?>
    to include your own myheader.php file.

    The myheader.php will look like the original header.php, but reference another image.

    You may have to tune the CSS file as well, as it may contain conflicting style rules for the header.

    For more on category templates see http://codex.wordpress.org/Category_Templates

  3. uriash
    Member
    Posted 9 years ago #

    thanks Petit,
    I've meanwhile found alone another method to do that (I don't know if it's a good method but the fact alone that it works makes me so proud, since I dont know PHP at all..)
    I changed the (if) (else) in the header.php to look like that:

    if ((! $withcomments) && (! is_single())) { ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; }
    #header{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
    #footer{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}
    <?php } else { // No sidebar ?>
    #page{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    #header{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheaderW.jpg") no-repeat bottom center; }
    #footer{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooterW.jpg") no-repeat bottom; border: none;} <?php } ?>

    now I have a bigger problem though..
    I wanted to make the header image clickable (and you actually helped me with that!: http://wordpress.org/support/topic/56303?replies=2 thanks!)
    but now I guess I need the link image to also toggle between the wide and the narrow version of the header..
    is it possible to use a transparent image in the scale of the header as the link image? and how do I make sure that it's well positioned?
    thanks alot,
    uri

  4. petit
    Member
    Posted 9 years ago #

    Good! You find your ways around both in WordPress and at the support site. For the header image to be a link, I suppose you just make the image a link `<img src="..>.
    I guess you will link to the blog's home page from the header image on all pages. That's what I'd expect any how, and in that case no reason to toggle the link target.

  5. uriash
    Member
    Posted 9 years ago #

    thanks, but I still don't get something: I want to link to the same target (the homepage) but the button should be different since the header image in the main page is different than the header image in the other pages.
    should I put a transparent image as the button
    (like that: <a href="<?php bloginfo('url'); ?>">
    <img src="images/transparentheader.jpg"/></a>>

    or maybe I can play with the #header id, since it is allready modified in the header.php and say something like:
    <a href="<?php bloginfo('url'); ?>">
    <#header></a>

    ?

  6. uriash
    Member
    Posted 9 years ago #

    edit: I tried inserting a transparent gif but nothing happens.. why?
    the code in the header.php now looks like this:
    (this's only the code that I've changed)

    headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/transparentheader.gif') no-repeat top;}
    */

    </style>

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

    <?php wp_head(); ?>

    </head>
    <body>

    <div id="page">

    <div id="header">
    <div id="headerimg">
    <a href="<?php echo get_settings('home'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/transparentheader.gif/"></a>

    :(

  7. petit
    Member
    Posted 9 years ago #

    Looks a bit strange. I think some of your code has disappeared in the wiki process. Looking especially at the lonely </style> tag.

    I don't think you need a transparent image. Instead you should skip the background image and us a div in the header containing your header image. You know, you cannot make a background link to anything. It has to be above the background.
    Well reading the code, maybe that's what you finally have done?

  8. uriash
    Member
    Posted 9 years ago #

    Hi petit
    I've only put a part of the php code so that's why it seems strange.
    anyway, I think I solved the problem - I earesed the id=headerimg from the div, and now it works!
    here, you can see:
    http://www.uriashi.com
    thanks,uri

  9. petit
    Member
    Posted 9 years ago #

    Good! It really looks nice and the song and dance is fine too. Certainly a very different WP theme.
    Congratulations!

Topic Closed

This topic has been closed to new replies.

About this Topic