sprite images

  • jkeis


    Greetings! SOooo yes, as I was saying, fantastic theme! I just wanted to customize it a bit for my own personal taste.

    How may I change the silver background under content (the one that wraps around the main column so that it’s purple #2f293b (which I used for line #333 border-top:21px solid #2F293B’)

    I would also like to all the silver buttons and whatnot on the master sprite image to reflect this purple color. I tried messing with it in photoshop but to no avail.

    Any help would be appreciated, thanks!



    Syahir Hakim


    Hi jkeis,

    You need to know which part of the sprite image to edit. If you look in the CSS background property for the appropriate element that uses the sprite image, you can see there’s an offset value in pixels. This serves as a reference point to where on the sprite image that the element should use as background image.

    For the case you mention above, the sprite image is sprite_v.png, and the CSS background property is as follows:

    background:url(images/sprite_v.png) -943px top repeat-y #e3e3e3;

    The value -943px top is the offset value. -943px means it’s 943px from the left, and top means the top of the image, i.e. no vertical offset.



    Ok so you’re saying both sprite_v and h actually consist of a bunch of images in each ?


    Syahir Hakim



    In the Graphene theme, there are 3 sprite images: sprite_master.png (for non-repeating images), sprite_h.png (for horizontally-repeating images), and sprite_v.png (for vertically-repeating images).

    The concept behind using sprite images is to combine as many images as possible that you use in your XHTML/CSS document into a single image. The reason for this is that each separate image will require a separate HTTP request, and the more HTTP requests the slower the website loads, due to the overhead associated with each HTTP request. Reducing the total number of images from what would range in the 20s down to 3, the loading speed and connection reliability of the website can be increased quite significantly.

    Though, of course, the downside of this is that it’s a little bit more difficult to edit those images.



    Thanks 🙂 Now the silver images on these sprites don’t seem to be solid as they all seem to have a fade to white effect. How may I apply the purple #2f293b to these so that I retain this effect? I tried to use photoshop’s color replace tool but it turned pink and not anywhere near the purple I wanted.


    Syahir Hakim


    You’d have to use the gradient tool for that. Notice that there’s two part to the main content wrapping background: 1) the post content part and 2) the sidebar part. The part that fades to white is the sidebar background.

    And while we’re on the customisation discussion, I would just like to remind you that you best do these customisations using a child theme instead of directly modifying the theme’s files. A new update (version 1.0.8) is coming soon with a lot of new features, and you really don’t want to miss on that. Modifying the theme’s files directly will cause you to lose those modifications when you update the theme.



    Is there an easy way to locate pixel 943?



    Well, I’m only editing images and style.css, so I’m assuming I can just replace that file, unless there are new implementations in style.css itself?

    Even if I used a child theme, I would run into the same problem… I can rename the folder in my themes folder….


    Syahir Hakim


    In Photoshop, you can use the Rectangular Marquee Tool (that selection tool), and select the Info tab near the Navigation tab at the right hand side. Then do a selection from the left side of the document until the width in the info tab reads 943.

    And yes, there are new implementation in the style.css itself. If you’re using child theme to make modifications, you would only need to modify the elements that you need to modify, and not copy/paste the whole of the original style.css, so the new implementation in style.css when you update the theme will still be reflected in the site.



    Ok thanks for your help, I’ll try to run with this…

Viewing 10 posts - 1 through 10 (of 40 total)

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