Little Web Inspector / CSS Tricks

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

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:

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

Again adding 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!

https://www.youtube.com/watch?v=SY72lO_19-Y

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon