Edit ANY website in your browser window

//Edit ANY website in your browser window

Edit ANY website in your browser window

Sometimes you want to know what a website would look like with a little edit made to the design. It could be your own website which you are building, or any website on the web.

Doing this is really simple. In this example we will change the appearance of the Twitter website.

Inspect Element tool

If you have not used Inspect Element before, you really should start. This tool is built into Google Chrome and most other browsers. It allows you to:

  • View the source of a page
  • View the CSS styles applied to each element
  • Change both of the above

Opening the inspect element tool is really simple:

  1. Right click anywhere on the page
  2. Select ‘inspect element’

Inspect element tool

This will show you the code of the website like this:

inspect element on twitter

If you hover over an element in the code, the tool will highlight the element in your browser, and tell you useful details:

inspect element highlight

 

You can edit the CSS

In the tool you can change the CSS attributes for this element. Let’s for example make the twitter logo huge (as an example).

Change CSS in Inspect element

You simply:

  1. Right click the element
  2. Select inspect element
  3. Add CSS styles in the style bar as shown below

Inspect element zoom

 

 

You can see I added 2 lines of CSS on the top right corder of the Inspect Element console at the bottom:

  • zoom: 5; (to make the logo bigger)
  • margin-top: 0; (because the logo moved when I zoomed it)

Editing entire classes

When doing development work you may want to see what happens if you change the css of a specific class. You can do this in this tool. In the right bar you will see all the CSS rules that apply to an object. For example, look at the results for the twitter logo:

Inspect elements styles

 

We see that for example:

  • The width and height are set inline (the top block is inline code)
  • The class .bird-topbar-etched makes the logo blue (#55acee to be specific)
  • Most styles are given by the twitter_core_bundle.css stylesheet

Now let’s take an example where we have elements with the same class. For example the Pinterest cards:

Pinterest inspect element

 

What we see is that the selector .Pin.summary.summary defines the width of the cards. So let’s change this little bit:

Change width in inspect element

And make the width 100px  instead. Then this happens:

Edit inspect element attribute

You can do this to any website. And you can do pretty much anything. Please note though: You are not editing the actual website. Once you refresh the changes are lost.

By | 2018-07-24T15:58:29+00:00 March 19th, 2015|Categories: Uncategorized|0 Comments