Often in my web work, I need to extract a logo or element from another web site. The old right/control click does not work if the image is set by a more elaborate CSS extension (e.g. the background image for a header).
Today I used a trick I know I have done before, but hey, might was well share the treats. Ready?
Okay, I needed a banner image to use on a Google Form I am prototyping for the Creative Commons Certification project. Sure, they offer a lot of nice images from the settings in the new form editor, but why look like everybody else?
They have recently rolled out a new look for the Creative Commons web site
What I need is something like the logo and the background in the header, a banner like image. But I don’t want all the menus as it might look like something you can click, when I will be using just an image.
I could download the white logo and make a redo of the background in Photoshop. That gradient pattern is not an image, but some CSS magic.
So I have another idea… I am going to modify the elements in my browser using the web inspector. I use the Chrome Web inspector several times a day. To use it, you have to first got to your settings, technically the extension settings chrome://extensions/ and make sure the box for
Developer Mode in the top right is checked:
I go back to the web page, and control-click (Mac, right click on those other platforms) on an area near where I want to look at, and select
Inspect from the contextual menu:
It might open as a side by side window thing, I like it better to have the inspector in its own window (I am not quite remembering which icon in the Inspector does it). Take a breath, we are looking at
CODE. I open toggles on the left looking for the CSS element (probably a dv) that contains some elements I want to hide. As I click on different elements in the code, my browser shows me on screen the part I am working on:
With some trying, I am pretty sure it is this div named
#site-header-menu, and on the right, I can see the CSS applied to it. I can place my cursor within the CSS declaration, press RETURN, and start adding.
Once I start typing
disp Chrome will autocomplete to
display: I can even press tab and see what options I can use– here is the key, setting
display to a value of
none, then hitting TAB to put it into play, will hide the element.
BOOM! All the side menus are gone. I go on to find the element that contains the DONATE button, a class called
display:none; to the CSS class that contains that green button, will hide it:
I of course am not changing anything to the web site, just to the way my browser sees it. If I reload the page, all my changes disappear. But I got what I want- the logo sitting on the orange gradient background, and the tag line in the grey bar:
Now I can do a screenshot and get the clean image I need:
This by the way, is a totally useful way to experiment with CSS, I do it all the time on my web projects to test, which is way easier then editing CSS, saving, uploading, reloading.
Go try it, and let me know how it works. I will email you a Milk Bone.
Top / Featured Image: I went to the licensed for reuse well of Google Images-
"little tricks" was not quite doing it, but seeing a few photos of dogs performing (sadly they were portrait landscape, I went back to a search on
"dog trick" and hit gold.
This is a still image from Cool Dog Trick Backstall All Fours a Creative Commons licensed YouTube video. Heck you might was well watch!
Thanks for the share. Appreciate as well that you pop the hood on the web like this. A similar tool that I like is Firebug https://getfirebug.com/ . Gave away my dog treats to 2 stays tonight. Stripey dog and slobbery dog. Floppy-eared husky dog really one though, so he can have any extras you have.
I do this too.
I also use this extension in Safari & Chrome:
Nice because, for example, on a WordPress multi-site where you can’t edit themes you can use it to write a bit of css them copy paste it into the jetpack css editor.
Thanks for this Alan! I’ll be experimenting soon.