Header Image – Photoshop Template

  • Hendryk

    #3348

    Hi there,

    I wanted to briefly ask if there is any existing photoshop template for the header image? (Sorry, if this might be a duplicate thread – I didn’t find anything useful in the forums yet. Maybe this is also rather a “support topic”? Just move it to that forum, if needed.)

    So far I just created a template for myself, reflecting the general size of the header images, placement of my own “logo” within that picture, etc.

    What I can’t yet really predict in this template I just created is the size and exact position of the site-title and description, although I analyzed the output on my own website via the firefox firebug-plugin. (Since the recent update of Graphene to v.1.6 this also seems to have changed slightly.) What I now created in Photoshop looks “similar” but not yet close enough to really create really nice header images that fit to the theme.

    I don’t know if you use Photoshop yourself and if you can give me any assistance, I just ask. I will try to make a better template – and if there is any interest in it, also provide it here as a free download. 🙂

    Anonymous

    #24449

    Moved to support.

    To change header dimension, first you’ve to add this to your child theme’s functions.php file

    function graphene_custom_header_width(){
    return 1000;
    }
    function graphene_custom_header_height(){
    return 200;
    }
    add_filter('graphene_header_image_width', 'graphene_custom_header_width');
    add_filter('graphene_header_image_height', 'graphene_custom_header_height');

    where, 1000 is the custom header width and 200 is the height. (Change those values to suite your header picture dimension)

    Then this code to child theme’s stylesheet or in Graphene Custom CSS

    #header {
    width: 1000px;
    height: 200px;
    }

    Tweak header_title and header_desc positions for better alignment.

    Mod

    Kenneth John Odle

    #24450

    For Photoshop templates:

    http://graphene.googlecode.com/svn/trunk/PSDs/

    If you use Firebug, you can tweak the placement of items by editing the CSS panel of Firebug. See Josh’s tutorial for how to do this. It’s really cool, and saves you a lot of constantly going back and forth to custom CSS panel or FTP panel.

Viewing 3 posts - 1 through 3 (of 3 total)

  • You must be logged in to reply to this topic.