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!

The post "Little Web Inspector / CSS Tricks" was originally pushed out of the bottom of a purple jar of Play-Doh at CogDogBlog (http://cogdogblog.com/2016/07/little-web-tricks/) on July 7, 2016.

3 Comments

  • Tom

    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.

  • john

    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.

  • Colin

    Thanks for this Alan! I’ll be experimenting soon.

Leave a Comment

All fields are required. Your email address will not be published.