August 9, 2010 at 09:56Extension "Styles Tuner". Customize site styles for yourself
Each of us, wandering around the expanses of the network, sometimes encounters such a problem: the information on the site is useful and necessary, but it’s very difficult to read. Either the font is too small, or the background is dark, and the text is light and 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 in a way that is convenient for you.
For example, consider rocklab.ru, where musicians upload their works, communicate and evaluate compositions. It just so happened that initially the site was 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 of the extension (without sound):
So, install the extension from addons.mozilla.org , open the editable site and click on the icon
in the browser panel.
Five icons appear in the sidebar of Firefox.
We'll talk about the appointment of the last four later, but for now we click on the first and go into the editing mode of the site’s styles.
The idea of the extension was to customize the styles of the site for any user, even someone who is completely new to HTML and CSS. The program runs throughout the site and displays a list of elements in the sidebar. Identical tags with the same class are displayed in the panel as a single block.
Now, select the element we need and proceed to editing. You can choose either by hovering over a block in the side panel (at the same time, the element on the page will be highlighted by the border) or by clicking on the element on the page itself (while the control block will be highlighted in the side panel). To cancel the selection on the page itself, you need to click on the selected item again.
Since the background of the site is not completely black, but gray, we start editing with the color of the fonts, and lastly, replace the background color.
Select an element in the sidebar and drag the slider, make it Color black.
Next, change the link colors, for example, to blue: We
also set the page colors for the page navigation links:
Well, the final step will be to set a light page background.
So, in four steps we got more convenient and readable content.
Similarly, you can edit the contents of 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, just click on the link “Default”.
Now consider the purpose of the remaining four buttons at the top of the browser sidebar.
The “Delete changes for this site” button is
designed to reset your own site settings and returns to its original appearance, that is, makes the site the way the creators intended it.
The “Delete changes for all sites” button
deletes all settings for all sites.
Settings button
it allows you to customize the color theme of the extension itself, choose the color of the borders that the blocks on the page will be highlighted, and it also has another very important option, “Change storage time”. In order not to clog the browser memory, unnecessary settings, of course, need to be deleted. It’s just that it’s inconvenient to do it manually, and not everyone remembers which sites he made changes on.
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 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 button “Exit edit mode”
removes the list of elements from the sidebar and reloads the open page of the site, but leaves the sidebar open.
In the end, we can add that the extension can be used in another 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 this or that element, and then, by clicking the CSS button, get new styles, which can then be used 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.
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 in a way that is convenient for you.
For example, consider rocklab.ru, where musicians upload their works, communicate and evaluate compositions. It just so happened that initially the site was 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 of the extension (without sound):
So, install the extension from addons.mozilla.org , open the editable site and click on the icon
in the browser panel. Five icons appear in the sidebar of Firefox.
We'll talk about the appointment of the last four later, but for now we click on the first and go into the editing mode of the site’s styles.
The idea of the extension was to customize the styles of the site for any user, even someone who is completely new to HTML and CSS. The program runs throughout the site and displays a list of elements in the sidebar. Identical tags with the same class are displayed in the panel as a single block.
Now, select the element we need and proceed to editing. You can choose either by hovering over a block in the side panel (at the same time, the element on the page will be highlighted by the border) or by clicking on the element on the page itself (while the control block will be highlighted in the side panel). To cancel the selection on the page itself, you need to click on the selected item again.
Since the background of the site is not completely black, but gray, we start editing with the color of the fonts, and lastly, replace the background color.
Select an element in the sidebar and drag the slider, make it Color black.
Next, change the link colors, for example, to blue: We
also set the page colors for the page navigation links:
Well, the final step will be to set a light page background.
So, in four steps we got more convenient and readable content.
Similarly, you can edit the contents of 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, just click on the link “Default”.
Now consider the purpose of the remaining four buttons at the top of the browser sidebar.
The “Delete changes for this site” button is
designed to reset your own site settings and returns to its original appearance, that is, makes the site the way the creators intended it. The “Delete changes for all sites” button
deletes all settings for all sites. Settings button
it allows you to customize the color theme of the extension itself, choose the color of the borders that the blocks on the page will be highlighted, and it also has another very important option, “Change storage time”. In order not to clog the browser memory, unnecessary settings, of course, need to be deleted. It’s just that it’s inconvenient to do it manually, and not everyone remembers which sites he made changes on. 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 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 button “Exit edit mode”
removes the list of elements from the sidebar and reloads the open page of the site, but leaves the sidebar open. In the end, we can add that the extension can be used in another 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 this or that element, and then, by clicking the CSS button, get new styles, which can then be used 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.