Extension "Styles Tuner". Customize site styles for yourself

Each of us, wandering through the open spaces of the network, sometimes encounters such a problem: the information on the site is useful and necessary, but it is very difficult to read. Either the font is too small, or the background is dark, and the text is light and the eyes quickly get tired.

In this article I want to talk about my extension for Firefox “ Styles Tuner ”, which allows you to customize the colors and fonts of any site as it will be convenient for you.

For example, consider the site rocklab.ru, where musicians post their works, communicate and evaluate the composition. It so happened that the site was originally created dark, and the fonts on it are light, which corresponds to its rock orientation, but it is often inconvenient for users. Especially if you spend a lot of time, for example, on the forum.
')
Below is a demo video of the expansion (no sound):



So, install the extension from the site addons.mozilla.org , open the edited site and click on the icon on the browser panel.

Five icons appear in the sidebar of Firefox.



We will talk about the appointment of the last four later, but for now click on the first one and go to the editing mode of the site styles.

The idea of ​​the extension was to customize the styles of the site for anyone, even those who are completely unfamiliar with HTML and CSS. The program runs throughout the site and displays a list of items in the sidebar. Identical tags with the same class are shown in the panel as one block.



Now, select the element we need and proceed to editing. You can choose both by pointing at a block in the sidebar (at the same time, the element on the page will be highlighted by a border), or by clicking on the element on the page itself (while in the sidebar the element control unit will be highlighted). To cancel the selection on the page itself, you need to click on the selected item again.

Since the site's background is not completely black, but gray, we start editing with the font color, and last of all we will replace the background color.

Select the element in the sidebar and dragging the slider, make it Color black.



Next, change the colors of the links, for example, to blue:



Also set the colors of the pagination links:



Well, the final step is to set the light background of the page.



So, in four steps we got more convenient and readable content.

Similarly, you can edit the content and all other elements of the site. In addition to changing the font and background colors, you can edit the font size and select a family. If you want to return the author's settings for any element, simply click on the link "Default".



Now consider the purpose of the remaining four buttons at the top of the browser sidebar.
Button "Delete changes for this site" designed to reset your own site settings and returns it to its original appearance, that is, it makes the site the way the creators intended it.

Button "Delete changes for all sites" removes all settings for all sites.

Settings button allows you to customize the color theme of the expansion itself, select the color of the borders with which the blocks on the page will stand out, and also has another very important option “Time to store changes.” In order not to litter the memory of the browser, unnecessary settings, of course, must be deleted. But it's not convenient to do it manually, and not everyone remembers on which sites he made changes.

Therefore, it was decided to give the user the opportunity to set the number of days after the last visit to the site for which he made changes, after the expiration of which, these changes are automatically deleted. For example, you stopped going to google, and after 10 days all changes to its interface were erased.

And finally, the "Exit edit mode" button removes the list of items from the sidebar and reloads the open page of the site, but leaves the sidebar open.

At the end, you can add that the extension can be used in a different way. For example, you or your customer urgently needed to make changes to the colors or fonts of the site. You can try several different options for a particular element, and then, by clicking the CSS button, get new styles, which you can then use in the source code of the project.



In the near future: adding the ability to enable and disable the background image, as well as adding the ability to control properties such as line-height and font-style.