Support » Fixing WordPress » Kubrick template: how to edit top image and side frame

  • Hi,

    I am trying to make a really basic look on the Kubrick blog, with basically just customizing the top image (which is currently pink with green text saying “the edible adventures of grapefruitgirl”) – I’d like to replace that bit with my own customized image. How does one do this?

    And secondly, how does one customize the side images of the frame (you’ll notice that at present mine are currently broken).

    Here’s the blog: http://www.grapefruitgirl.com/edibles/

    Thanks SO much for any help you can offer. I’ve been writing on this blog behind the scenes for a while now, and am eager to finally get it coded properly on a very basic level.

Viewing 15 replies - 1 through 15 (of 23 total)
  • Practically all the “look” of kubrick is handled by jpgs in the images folder. You’ll need to open them all in a graphics editing program and recolor the parts that you need changed.

    Alternatively, look over the themes at http://themes.wordpress.net – see if you can find one with the basic look you want, then do the color and graphics changes.

    Thread Starter grapefruitgirl

    (@grapefruitgirl)

    Thanks, I managed to edit the footer image and make it look how I want it to. Now I just have to edit the header image and the side images.

    My question: I kindof created all white .gifs over the default gifs and now I want to get the default .gifs back, especially the image that crops the left and right and side of the main box on of the page. Is there a way to get the default images back?

    Sure. If you saved the original wp distro somewhere, just uncompress it to desktop or wherever and copy the default theme files back to where you want them. If you didn’t save it, just redownload 2.0.4 then do the same.

    Thread Starter grapefruitgirl

    (@grapefruitgirl)

    Ah, thank you.

    Here is my current sticking point. I updated the header image and the image i made is viewable here:

    http://www.grapefruitgirl.com/edibles/wp-content/themes/default/images/kubrickheader.jpg

    but for some reason the header is not rendering on the site? this perplexes me. how can i get the header image to actually show up on my site?

    http://www.grapefruitgirl.com/edibles

    Thread Starter grapefruitgirl

    (@grapefruitgirl)

    anyone?

    Thread Starter grapefruitgirl

    (@grapefruitgirl)

    I am officially banging my head against the wall trying to get this sorted. I edited the image for Kubrick titled

    and located here on my server: kubrickheader.jpg

    grapefruitgirl.com/edibles/wp-content/themes/default/images/kubrickheader.jpg

    why is this image not rendering on my website? i dont understand. what does one need to tweak to have the kubrickheader.jpg image appear on the blog?

    please help ?!?

    Thread Starter grapefruitgirl

    (@grapefruitgirl)

    I just did a search on the forum as well and didnt find any topics discussing how to make the kubrick header render on a webpage/blog.

    i feel at a head end. is there some documentation i could be reading to educate myself on this?

    looks like your image isn’t valid.

    Maybe got corrupted in the upload? No, wait – the image is calling “header-img.php”? Wait – there it is. Right before the closing “head” tag.

    <style type='text/css'>
    <!--#header { background: url('http://www.grapefruitgirl.com/edibles/wp-content/themes/default/images/header-img.php?upper=&lower=') no-repeat bottom center; }
    #headerimg { display: none }
    --></style>

    Get rid of that.

    In your embedded styles (header.php?) I noticed this:
    <!--#header { background: url('http://www.grapefruitgirl.com/edibles/wp-content/themes/default/images/header-img.php?upper=&lower=') no-repeat bottom center; }
    #headerimg { display: none }
    -->

    Just delete that #header line, and test again?

    LOL ;’)

    You could always use the personalheader.jpg functionality in the header.php file …

    Thread Starter grapefruitgirl

    (@grapefruitgirl)

    Thank you, Yosemite and Doodlebee. However, what file should I edit? There are so many files assoc with each template, I am having a hard time figuring out how they all relate to one another.

    I looked in the styles.css file and didnt see the code you are referring to.

    Help…!

    In your embedded styles (header.php?) I noticed this:
    <!--#header { background: url('http://www.grapefruitgirl.com/edibles/wp-content/themes/default/images/header-img.php?upper=&lower=') no-repeat bottom center; }
    #headerimg { display: none }
    -->

    Just delete that #header line, and test again?

    Thread Starter grapefruitgirl

    (@grapefruitgirl)

    Sorry, I see you were talking about the embedded styles (header.php?) file, but i looked in that file and still dont see the code> I even did a search for the code and the code didnt come up in the embedded styles/header.php. what am i missing here?

    here’s the code from my header.php file:

    <!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="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <style type="text/css" media="screen">
    /* To accomodate differing install paths of WordPress, images are referred only here,
    and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
    not, then go right ahead and delete the following lines, and the image files. */

    body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); }
    <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single())) { ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    <?php } ?>
    #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;}

    /* Because the template is slightly different, size-wise, with images, this needs to be set here
    If you don't want to use the template's images, you can also delete the following two lines. */

    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
    #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }

    /* To ease the insertion of a personal header image, I have done it in such a way,
    that you simply drop in an image called 'personalheader.jpg' into your /images/
    directory. Dimensions should be at least 760px x 200px. Anything above that will
    get cropped off of the image. */
    /*
    #headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/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>
    <hr />

    Hmm. Take a gander at the top of your index.php?

    Thread Starter grapefruitgirl

    (@grapefruitgirl)

    This is still unresolved. I checked both the index.php and the header.php and the code you suggested I removed to fix this is not in either files ?!? How can this be, as I have not edited the php of these docs/the template at all yet. I’m just trying to upload custom images and have them show up ??

    Also, Arbu, I tried your solution of uploading a personalheader.jpg to the images folder as well and its still not showing up.

    What is going on here? This isnt rocket science, not sure why I cant sort this out…Grrrr…

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Kubrick template: how to edit top image and side frame’ is closed to new replies.