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?

Sit….

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

cc-web

Nicely done.

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:

chrome-developer

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:

inspect

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:

site-header-menu-div

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.

display none

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 .donate-action

donate-fiv

Again adding display:none; to the CSS class that contains that green button, will hide it:

button display none

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:

cc-clean-header

Now I can do a screenshot and get the clean image I need:

cc-header-final

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!

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

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

  2. Hi Alan,
    I do this too.

    I also use this extension in Safari & Chrome:
    http://www.livecsseditor.com

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *