Social Items

How to modify the appearance of a website

How to modify the appearance of a website in Google Chrome with Local Overrides


On many occasions, we navigate daily through a series of certain pages. Those websites are designed in a fixed way and we can do little to change it. However, it may happen that we are interested in changing the colour, the font or anything else. Everything to make our visit to that page so often more comfortable. Today we are talking about Local Overrides, a tool that we have for Google Chrome and that allows us to modify, to a certain extent, a web page.

Local Overrides
Local Overrides is a relatively new experimental feature in Developer Tools. It is available for the Google Chrome web browser. We can use it to make permanent changes to web pages in a similar way as we would do with scripts or user styles files.

Most users may not want or need to change the look of a website. However, it may happen that, because we enter very frequently, it will be useful to us. Some users want to do this to eliminate discomfort, improve usability, or make other modifications.

This can occur in various situations. A good example is a site that is too bright in the user's eyes. With Local Overrides, we can change the style of the website to a darker one to make it more pleasing to the eyes. We can also use it to increase or decrease the size of the fonts, change the font, remove background images or manipulate any other element on the page.

Stylish: customize the appearance of any website with this extension
It may interest you ...
Stylish: customize the appearance of any website with this extension
Javier Jiménez December 31, 2017, • 19:12
In short, it can be adapted to what users need. All in order to make navigating that page more comfortable.

As we have mentioned, Local Override is an experimental function of Google Chrome. It is available in all the compatible versions of the browser.

Enable it in Google Chrome
To enable it we have to do the following:

  1. Load chrome: // flags / # enable-dev tools-experiments in the browser's address bar and change the flag to enabled. This allows Developer Tools experiments.
  2. Restart the web browser.
  3. Press F12 to open the Developer Tools interface.
  4. Press F1 on the interface to open Preferences.
  5. Switch to the Experiments tab and check "Modify requests with workspace project".
  6. Visit a web page where we want to make permanent changes.
  7. Switch to the Fonts panel in Developer Tools.
  8. Click on the icon with the two arrows pointing left and select Overrides from the menu.
  9. Select «Modification settings» and choose a local folder in which we want to store these changes.
  10. We accept Chrome's request to access the folder.
  11. Using Overrides is easy. We open the network panel in the browser to start. If we don't see any uploaded files, we reload the page to complete the list.

We right-click on any resource file that we want to overwrite and select the "Save as modification" option. Chrome saves the data on the local system and will use it instead of the original resource when we load the web page.

We can edit the file and then go to Fonts> Modifications. This works well for styles, but we can modify almost any source file, including HTML pages and JavaScript files.

Modifications are automatically saved. We can either remove them from the override list in Chrome Developer Tools or use the preferences instead

How to modify the appearance of a website in Google Chrome with Local Overrides

How to modify the appearance of a website

How to modify the appearance of a website in Google Chrome with Local Overrides


On many occasions, we navigate daily through a series of certain pages. Those websites are designed in a fixed way and we can do little to change it. However, it may happen that we are interested in changing the colour, the font or anything else. Everything to make our visit to that page so often more comfortable. Today we are talking about Local Overrides, a tool that we have for Google Chrome and that allows us to modify, to a certain extent, a web page.

Local Overrides
Local Overrides is a relatively new experimental feature in Developer Tools. It is available for the Google Chrome web browser. We can use it to make permanent changes to web pages in a similar way as we would do with scripts or user styles files.

Most users may not want or need to change the look of a website. However, it may happen that, because we enter very frequently, it will be useful to us. Some users want to do this to eliminate discomfort, improve usability, or make other modifications.

This can occur in various situations. A good example is a site that is too bright in the user's eyes. With Local Overrides, we can change the style of the website to a darker one to make it more pleasing to the eyes. We can also use it to increase or decrease the size of the fonts, change the font, remove background images or manipulate any other element on the page.

Stylish: customize the appearance of any website with this extension
It may interest you ...
Stylish: customize the appearance of any website with this extension
Javier Jiménez December 31, 2017, • 19:12
In short, it can be adapted to what users need. All in order to make navigating that page more comfortable.

As we have mentioned, Local Override is an experimental function of Google Chrome. It is available in all the compatible versions of the browser.

Enable it in Google Chrome
To enable it we have to do the following:

  1. Load chrome: // flags / # enable-dev tools-experiments in the browser's address bar and change the flag to enabled. This allows Developer Tools experiments.
  2. Restart the web browser.
  3. Press F12 to open the Developer Tools interface.
  4. Press F1 on the interface to open Preferences.
  5. Switch to the Experiments tab and check "Modify requests with workspace project".
  6. Visit a web page where we want to make permanent changes.
  7. Switch to the Fonts panel in Developer Tools.
  8. Click on the icon with the two arrows pointing left and select Overrides from the menu.
  9. Select «Modification settings» and choose a local folder in which we want to store these changes.
  10. We accept Chrome's request to access the folder.
  11. Using Overrides is easy. We open the network panel in the browser to start. If we don't see any uploaded files, we reload the page to complete the list.

We right-click on any resource file that we want to overwrite and select the "Save as modification" option. Chrome saves the data on the local system and will use it instead of the original resource when we load the web page.

We can edit the file and then go to Fonts> Modifications. This works well for styles, but we can modify almost any source file, including HTML pages and JavaScript files.

Modifications are automatically saved. We can either remove them from the override list in Chrome Developer Tools or use the preferences instead

No comments

Subscribe to: Post Comments (Atom)