Fix Web Annoyances with Stylish - Firefox & Chrome
The Challenges of Universal Web Design
Creating web designs that achieve universal appeal presents a significant challenge for designers. The task involves developing a single aesthetic that resonates with a diverse audience.
Considering a widely utilized service such as Gmail, boasting millions of users globally, the difficulty is amplified. Achieving complete satisfaction is simply unattainable.
Even redesigns that garner positive feedback from the majority will inevitably encounter resistance from some users who dislike the alterations.
When User Feedback Drives Change
Occasionally, substantial negative feedback compels a company to revert changes, as demonstrated by Google’s recent adjustment to the Gmail icon buttons.
However, what recourse do users have when a disliked feature remains unchanged despite their dissatisfaction?
Taking Control with User Styles
Fortunately, users aren't permanently bound by unwanted design elements. User styles offer a solution to personalize the browsing experience.
Through the implementation of user styles, individuals can effectively address design issues themselves, circumventing the need for company-led modifications.
This empowers users to tailor their online environment to their preferences, even when official changes aren't forthcoming.
Stylish: Customizing Your Web Experience
Stylish is a complimentary browser extension accessible for both Firefox and Chrome. It empowers users to modify the visual presentation of webpages by applying custom styles to individual elements.
Despite requiring no prior knowledge of CSS or web development, altering website appearances is surprisingly straightforward. While complete website transformations are possible, a key benefit lies in its ability to quickly resolve minor website irritations.
Addressing Website Annoyances
Consider the example of Gmail’s default font size. A desire to increase readability of message text without globally zooming the entire interface (using Ctrl +) presents a common challenge.
Stylish provides a simple solution to this issue, which will be demonstrated shortly. However, before creating personalized styles, exploring pre-existing user contributions is worthwhile.
Leveraging Community Styles
A significant advantage of Stylish is the ability to utilize styles created and shared by other users. This eliminates the need to write code from scratch for common customizations.
This collaborative aspect of Stylish fosters a community where users can benefit from each other’s work and quickly enhance their browsing experience.
The following sections will detail how to both utilize existing styles and create your own custom user styles with Stylish.
UserStyles.org
Many common website frustrations are shared by numerous users. UserStyles.org provides a platform for individuals to distribute custom styles they have developed.
The image above illustrates a style – specifically, "Add labels to toolbar icons" – as suggested by a MakeUseOf reader, RandyN, following our coverage of Gmail’s icon buttons.
Customizing Your Web Experience
This particular style allows users to retain the icons while simultaneously displaying accompanying text labels, a feature not currently offered by Google.
While UserStyles.org is a valuable resource, it isn't without limitations.
Potential Drawbacks
- Some styles attempt overly comprehensive alterations to website appearances.
- Certain styles are designed for outdated website versions and may no longer function correctly.
If a minor annoyance persists and a solution isn't available on UserStyles.org, creating a custom style may be the most effective approach.
Consider developing your own solution if you can't locate a pre-made style that addresses your specific needs.
Crafting Personalized User Styles
The process of creating a custom user style begins with identifying the specific page element you intend to modify, followed by determining the desired alteration. To initiate this, locate the element in question and right-click on it, then select Inspect Element from the context menu.
Upon selection, Firefox will typically dim the surrounding page content and highlight the chosen element with a distinct border. Directly above the selected element, you’ll observe text such as div#2d6.ii.gt.adP.adO; this represents a series of CSS classes, including a unique ID (denoted by the leading # symbol). This selector is crucial as it governs the styling applied to this particular element.
A navigation bar at the screen's base allows you to "traverse the DOM tree," effectively navigating the hierarchical structure of elements leading to your selected item.
Successfully styling an element relies on selecting an appropriate scope – not so restrictive that it fails to affect all intended areas, and not so broad that it inadvertently alters unrelated elements.
I chose to select the parent element, div.gs, primarily due to its descriptive name (though its stability is purely speculative). This selection impacts the entire message area. With the desired area selected, activate the Style button in the bottom-right corner to reveal the Rules pane:
Initially, this interface may appear complex. However, it displays the CSS rules currently influencing the selected element, and provides a platform for making temporary adjustments with immediate visual feedback, without requiring a page reload.
To understand the available options, click the Properties button and disable the “Only user styles” filter:
This reveals a comprehensive list of all applicable CSS rules. You can scroll through this list to identify a suitable rule for your needs (such as font-size), and clicking the question mark icon provides access to explanatory documentation. Therefore, we aim to adjust the font-size property for all div elements possessing the class "gs" (represented concisely as div.gs).
The remaining task is to determine the desired value for this property. Return to the Rules pane and begin experimentation:
While a value of 40 pixels might be excessive, it illustrates the concept. Experiment with different values and additional properties until you achieve the desired visual outcome. Remember that these changes are not saved until explicitly committed, so avoid closing the browser window.
Preserving Your Customized Appearance
After achieving the desired look for a specific website section, the next step is to preserve these changes. Initiate the saving process by clicking the Stylish icon located in the add-on bar. From the options presented, select “Write new style”.
Defining Style Application
Stylish will then prompt you to specify the pages where the new style should be implemented. In this instance, choose the second option, “mail.google.com”, to apply the style specifically to Gmail.
Understanding the Style Code
The subsequent dialog box will appear. A name and relevant tags for the style have already been entered as an example. However, the core modifications reside within the code itself.
Line 3 was automatically added by Stylish to define the pages to which the style will be applied. Lines 5 through 7 represent the custom CSS rules you’ve created.
Line 5: div.gs { – This selector corresponds to the element that was targeted for styling. The opening curly brace indicates the beginning of the CSS rules.
Line 6: font-size: 20px !important; – This line defines the modification to be made – the font size – setting it to 20 pixels. The “!important” declaration ensures that this rule takes precedence, even if other styles attempt to override it.
Line 7: } – This closes the style definition block.
Previewing and Saving Your Style
Before finalizing, click the Preview button to observe the changes in action. This allows for immediate verification of the applied style.
Upon confirming the desired outcome, click Save to permanently store the new style.
Acknowledging Limitations in This Overview
It’s understood that, due to the need to maintain brevity within this single article, certain explanations have been condensed or presented with some assumptions. Should any aspect of the preceding information have caused confusion, please accept our apologies.
While CSS can initially appear complex, it becomes more manageable with practice, and local website customization offers an excellent learning environment.
Seeking Clarification
Should you encounter any points requiring further explanation, please do not hesitate to submit your questions below. We are committed to providing assistance to the best of our ability.