Return to Support

sprite images

Home Forums Graphene WordPress theme Support sprite images

Viewing 15 posts - 1 through 15 (of 40 total)
  • Author
    Posts
  • #36
    jkeis
    Member

    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!

    Jason

    #10769
    Syahir Hakim
    Keymaster

    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.

    #10770
    jkeis
    Member

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

    #10771
    Syahir Hakim
    Keymaster

    Correct.

    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.

    #10772
    jkeis
    Member

    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.

    #10773
    Syahir Hakim
    Keymaster

    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.

    #10774
    jkeis
    Member

    Is there an easy way to locate pixel 943?

    #10775
    jkeis
    Member

    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….

    #10776
    Syahir Hakim
    Keymaster

    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.

    #10777
    jkeis
    Member

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

    #10778
    jkeis
    Member

    BTW, I saw you posted an article on randomness… I’m currently reading The Drunkard’s Walk – How Randomness Rules our Lives by Leonard Mlodinow – highly suggested read 🙂

    #10779
    Syahir Hakim
    Keymaster

    Yep, I read that book already, few months back 🙂

    #10780
    jkeis
    Member

    It’s great.

    #10781
    jkeis
    Member

    I have a question… take the following for instance:

    background:url(images/sprite_h.png) left -66px repeat-x;

    It starts at 66 but how do I know at what pixel it stops? The gradient tool seems to be applying my new color to the whole image :/

    #10782
    Syahir Hakim
    Keymaster

    CSS property only allow offset value, and not where the background should stop. For that, I simply set the width or height of the element that uses that particular image in the sprite. For elements with expandable width or height, I carefully choose the placement of the image to be used as background in the sprite, so that other images in the sprite won’t show up.

    As for the gradient tool, you can select the area to apply it first by using the selection tool.

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

You must be logged in to reply to this topic.