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:
- Right click anywhere on the page
- Select ‘inspect element’
This will show you the code of the website like this:
If you hover over an element in the code, the tool will highlight the element in your browser, and tell you useful details:
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).
- Right click the element
- Select inspect element
- Add CSS styles in the style bar as shown below
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:
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:
What we see is that the selector .Pin.summary.summary defines the width of the cards. So let’s change this little bit:
And make the width 100px instead. Then this happens:
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.