August 31, 2010 at 11:09 pm #36
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!
JasonSeptember 1, 2010 at 12:09 am #10769
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;
-943px topis the offset value.
-943pxmeans it’s 943px from the left, and
topmeans the top of the image, i.e. no vertical offset.September 1, 2010 at 12:20 am #10770
Ok so you’re saying both sprite_v and h actually consist of a bunch of images in each ?September 1, 2010 at 12:32 am #10771
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.September 1, 2010 at 12:35 am #10772
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.September 1, 2010 at 12:40 am #10773
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.September 1, 2010 at 12:43 am #10774
Is there an easy way to locate pixel 943?September 1, 2010 at 12:45 am #10775
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….September 1, 2010 at 12:52 am #10776
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.September 1, 2010 at 1:01 am #10777
Ok thanks for your help, I’ll try to run with this…September 1, 2010 at 1:03 am #10778
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 🙂September 1, 2010 at 1:05 am #10779
Yep, I read that book already, few months back 🙂September 1, 2010 at 1:09 am #10780
It’s great.September 1, 2010 at 2:19 am #10781
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 :/September 1, 2010 at 4:02 am #10782
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.
You must be logged in to reply to this topic.