aaa hi i'm trying to add a greyscale option to your desmond theme & im having some trouble!! if its not too much trouble could i ask for like a resource to learn how to do that if you have one or know of one?? everything ive found through google so far either is for old versions of tumblr and dont work, or they only work on solo images and not gifsets/videos/etc sddadsa
Ahhh, hello! I hope you can excuse me for posting this publicly, but by answering this way I can use this post/tutorial to reference to in my FAQ or any future questions that revolve around the same thing. I’ll mention two ways, one to simply put it in very quickly in the 2/3 locations as to have greyscale there, but also one to create a greyscale swatch in the customise (like my Khruseos and Leuthros themes have, which I’ll also implement for the rest of my themes in the future, for if you ever wanted to quickly turn it off/on for any reason in the future! Alright, so here we go:
Simple/quick greyscale (no swatch):
In essence, there’s multiple ways of implementing greyscale, but the easiest in my opinion that also gives you some control on contrast (so that you can turn it more B/W instead of just greyscale) is to put the following line of code in numerous locations:
-webkit-filter: brightness(1) contrast(1) saturate(0);
To explain this line and how it functions in case you want full control of how the images are edited by this; the ‘saturate(0)’ at the end is what activates greyscale, what the ‘0′ means is that the ‘saturation’ has been put on the lowest possible number. The saturation in an image is what controls the colour. ‘1′ is default that images in general have across the internet. If you were to change the ‘0′ to ‘0.5′, you’d be removing half of the colour in an image, making it much more muted in colour. If you were to up it to a higher number such as ‘1.5′, you’d be making the colours a lot more vibrant. ‘Contrast’ and ‘brightness’ work in similar ways, up the number behind each one and you make the images much stronger in contrast and/or they would get lightened, lower them and the opposite happens. If you wanted a more B/W effect, for example, you could combine the ‘0′ saturate with a, say, ‘1.1′ for contrast, and it’ll bring the dark greys a little closer to solid blacks and the lighter colours would touch a much more pure white. You can also be very liberal with the numbers; say ‘1.1′ is too strong in contrast and ‘1′ is too lacking of contrast, you can attempt ‘1.05′ and you’d sit right in the middle.
Alright, onto where this line needs to be pasted, you can paste it at every div that controls an image (there are some divs in my themes that already use this webkit filter that includes the greyscale option, but with it turned off, if you want to find them, do a search for: -webkit-filter: brightness and change the numbers of each result accordingly). Here’s the ones you want to find if you want to control the images only in your post content, you simply add the line I gave you earlier anywhere within each of these searched for results (anywhere in between the { and } parantheses that you see around each div):
More controlled greyscale (swatch):
Before anything else, do a search for <!– META LINES –> and look at all the lines that you find underneath it, in between any of them, you add the following line:
Be sure to hit ‘Update Preview’ for the swatch to pop up under Customise (if it appears on at default, turn it off and back on; Tumblr can be a little nitpicky with swatches), and then let’s move onto actually telling the code what this swatch will do. So here, you navigate to the exact same lines as I gave towards the end of the ‘Simple/quick greyscale’ tutorial above, and instead of adding just the single line, you’ll be copying these three instead:
{block:IfGrayscaleImages} -webkit-filter: brightness(1) contrast(1) saturate(0); {/block:IfGrayscaleImages}
What this literally says, is that when you turn on that specific swatch, all of the parts of the code that have those three lines for greyscale, get activated— once you turn off the swatch, all of those lines of code deactivate, returning your images to full colour.
I hope that this helped you, and if not or if anything is unclear, never hesitate to messages again, either through asks or IM, I’m always available, even if I may take a little while to respond sometimes! Hope you have a lovely day and/or night! <3
