Appear to Edit Text on Any Website

Any prankster can see the potential in being able to temporarily change the way a website appears on your computer, and there are lots of practical applications of being able to adjust the way a website appears to you as well.[1] Hopefully your goals are more playful or utilitarian than nefarious, but whatever you plan to get up to, the process is relatively simple.

Steps

Appearing to Edit a Website with Any Browser with a Bookmarks Bar

  1. Find a link to the Edit Current Website bookmarklet. The simplest way to do this is just by Googling, “edit current website bookmarklet.” This will bring up a number of pages with the appropriate link.[2]
  2. Drag it into your bookmarks bar. You can edit the website you on which you found the link by simply clicking it, but you will more likely want to drag it into your bookmarks bar. This will enable you to use it on any website.
  3. Put it to use. Navigate to the website you want to appear to edit, and click on the bookmark. Clicking it won’t have any noticeable effect, but you will now be able to go into the text of the website and edit it as you see fit.[3]

Appearing to Edit a Website with Chrome

  1. Find the text or photo you want to change. In Chrome, navigate to the website you want to appear to edit. If you want to edit text, highlight the words you want to change, and right-click them; if you want to edit a photo, just right-click it without highlighting.[4]
    • To appear to edit a photo, you will need to upload the photo with which you want to replace an existing one. You have to be able to replace the URL in the original code with a new URL.
  2. Open Inspect Element. When you right click, a menu will pop up. Click “Inspect Element.” A new window with lots of HTML will pop up inside the current one.[5]
    • If you are using Windows, you should also be able to open Inspect Element by pressing F12.
  3. Find the text you want to change in Inspect Element. If you are editing text, the words you highlighted on the original website should also be highlighted here. If you are editing a picture, a larger chunk of text will be highlighted, with an underlined URL at the end.
  4. Change the code. If you are changing text, simply overwrite the words you highlighted with whatever you want to replace them with. If you are changing a photograph, replace the URL with the desired new one, leaving the rest of the code alone.
    • If you make a mistake, just press Command+Z on a Mac or Control+Z on a Windows to undo it.
  5. Finish up. Click “Enter,” and close “Inspect Element.” The website should now appear to have the text or image you changed. You have not truly edited the website, of course, and these changes will disappear when you refresh the page.

Appearing to Edit a Website with Safari

  1. Enable the Develop menu. In Safari, click the “Safari” menu on the menu bar at the top of the screen. From here click “Preferences,” and then select “Advanced” from the menu at the top of the Preferences window. Check the box at the bottom of the window that says, “Show develop menu in menu bar.” There will now be a “Develop” menu in the menu bar, between “Bookmark” and “Window.”[6]
  2. Find the text or photo you want to change. Navigate to the website you want to appear to edit. If you want to edit text, highlight the words you want to change, and right-click them; if you want to edit a photo, just right-click it without highlighting.
    • To appear to edit a photo, you will need to upload the photo with which you want to replace an existing one. You have to be able to replace the URL in the original code with a new URL.
  3. Open Inspect Element. When you right click, a menu will pop up. Click “Inspect Element.” A new window with lots of HTML will pop up inside the current one.
    • You can also open Inspect Element window by click the “Develop” menu, and selecting “Show Web Inspector.” Then find the text you are looking for by pressing Command+F on a Mac or Control+F on Windows, and type in the text you want to change. This is a more roundabout method.
    • You can also open Web Inspector with the shortcut Alt+Command+I on a Mac, or by pressing F12 on Windows.
  4. Change the code. If you are changing text, simply overwrite the words you highlighted with whatever you want to replace them with. If you are changing a photograph, replace the URL with the desired new one, leaving the rest of the code alone.[7]
    • If you make a mistake, just press Command+Z on a Mac or Control+Z on a Windows to undo it.
  5. Finish up. Click “Enter,” and close “Inspect Element.” The website should now appear to have the text or image you changed. You have not truly edited the website, of course, and these changes will disappear when you refresh the page.

Related Articles

Sources and Citations

  1. ↑ http://www.hongkiat.com/blog/google-chrome-extensions-designers
  2. ↑ http://www.labnol.org/internet/design/edit-web-pages-like-wiki/3832
  3. ↑ http://inspectelement.com/articles/10-useful-bookmarklets-for-web-designers-and-developers
  4. ↑ https://www.youtube.com/watch?v=M-iYQU2UvJA
  5. ↑ https://developers.google.com/web/tools/iterate/inspect-styles/basics
  6. ↑ http://hints.macworld.com/article.php?story=20110328132622709
  7. ↑ http://apple.stackexchange.com/questions/139767/inspect-element-in-safari
Retrieved from "https://kipkis.com/index.php?title=Appear_to_Edit_Text_on_Any_Website&oldid=307853"