Chrome extension Stylish: one-touch "skin-changing" for a website you don't like

Original address: http://whosmall.com/?post=419 This article tags: Chrome extensions chrome plugin chrome extension stylish What is stylish? What is stylish?

Straight to the point, the role of stylish is that it can turn Baidu homepage into this:

It can also be known to "beat", so that the microblog web version becomes concise and incomparable, so that Feedly with Material Design ...

This magical stylish is actually a browser plugin for Chrome,firefox,opera and Safari browsers (click on the browser name to download). Stylish by replacing the CSS of the web itself to achieve the "beautification" purpose.

What is CSS? The Chinese full name of CSS is cascading style sheets, which are used to represent HTML or XML ... It's an obscure thing. In other words, CSS is like a Web page of clothing, although not the ability to add the page itself, but can decide the layout, font, and even scroll bar and other things related to the appearance. As to the importance of appearances, I think it is not necessary to say much, you may have more experience than I do.

CSS Advanced but stylish can also be very easy to use

The basic usage of stylish is very simple, install stylish from the official website to your browser. In the stylish Options menu you can update, deactivate, uninstall, and edit the installed CSS, which is similar to Chrome's extension management.

* Different browser interface, but using the same method, this article takes Chrome as an example

Now that your stylish is empty, the next step is to add a CSS style template. Don't be afraid, you just have to open a Web site, open the stylish menu, click "Find more suitable for this site",stylish will list the site for you the appropriate CSS template. "

You can also go directly to userstyles.org to find the CSS template that has been written, this is the stylish "app Store", but the site is not friendly interface, it is recommended to use the upper left corner of the search function.

Once you've found your favorite template, click the green button to install it, like installing a browser plugin without pain. And some CSS has more options.

You should try these CSS templates 1. Give you a clean micro-blog: weibo_v6

This CSS and a "micro-Twitter" Chrome plug-in has the same effect, the micro-blog to a big facelift, remove the ads and other unnecessary elements, re-typesetting, to give you a clean microblogging.

2. Baidu also uses Material Design: Baidu Light

This is the text to see the first can let Baidu use Material design style CSS. It also applies to search results pages.

3. The re-beautification of Google search: Google search-material Design

This CSS is based on dribbble on the designer Aurélien Salomon? Redesigned Google search to do it. Similar to the above Baidu Light, because Google itself is very clean, so the effect is not so obvious as Baidu, good-looking is true.

4. Flat version: Flat_zhihu

This CSS is not only to know the flat, but also optimize the font, dynamic, as well as the width of the page. In short, it looks more comfortable than the original, to see how to finally do not open the page zoom.

5. Global Night mode: Nightshift-eye Care

This global CSS will darken the white part of the page and reduce the brightness of the image, using it as if it were "Night mode". There will be some compatibility issues that do not affect the use.

6. Mac Style scroll bar: universial minimalist Scroll Bar

This is the global CSS style for Windows systems. He can make your browser have a transparent minimalist scroll bar for Mac OS X style.

customizing Web page fonts with stylish

In addition to using the template above to change the style of the page, many people want to use their favorite fonts to browse the Web, using stylish can easily achieve this purpose, on the Userstyles site search " Fonts ", you can easily find a lot of ready-made templates for you to choose to use, download after almost no adjustment can be used directly.

Here to recommend a template called Forcemyfont, this template built-in options are very rich, allowing you to manually select a variety of English and Chinese fonts, even if you are not in the CSS, you can easily complete the font settings, select the font you want to use in the list, then choose to install it, very convenient. Note, however, that you have installed the appropriate fonts on your PC, and if not, you will need to download them for additional installation.

If you know some CSS styles, you can of course write the page effects manually. The advantage of this is the high degree of freedom, can according to their own preferences to change what to change, but the use of the threshold is also proportional to the high. Here I give an example of a custom font CSS.

First, open the Stylish Options menu, select "Write New Style" and fill in the following code:

*{font-weight:600!important;}

*{font-family:arial, "Fangzheng Orchid pavilion Black Simplified";}

The first line is to define the weight of the font, the larger the thicker. The second line is the specified font, just fill in the installed fonts on a computer.

If you like font shading, you can add the following line of code:

*{text-shadow:0.01em 0.01em 0.01em #999999!important;}

The values in turn represent the X-axis offset of the shadow, the Y-axis offset, the shadow size, and the font color.

When you fill out the "app", go to the page to see the effect. If you want to apply to the global, such as configuration.

Finally, if you are a MAC user and want to invoke the latest San Francisco font, you may find that the font is not in the font book, and typing directly into the CSS "San Francisco"  does not work, because Apple does not put the font in the Fon T book for everyone to use, if you want to use this font on the page, you need to use it -apple-system, BlinkMacSystemFont, .

At last

As you can see, stylish can optimize the style of the page. For most ordinary users, it is a good solution to use stylish to apply those ready-made templates to optimize sites that are poorly designed or styled.

More advanced, stylish can actually achieve the removal of ads, complete the browser part of the function. But this is not within the scope of this article, and this article is just a start, so that more people will know and get a preliminary understanding of such a browser extension.

You are welcome to discuss more usage of stylish in the comments, or share your favorite CSS templates.

written at the end: for Freedom look outside the world, and it this line, not to go to Google data, finally, Amway some speed agent.

Accelerator recommended	Free solution	Payment Scheme	official website
a red apricot accelerator	free program, stable high speed	Enter 80 percent coupon code WH80, annual pay only 80 yuan/year	official website Direct
Azumino Accelerator	Best Foreign Trade VPN	minimum ￥30/month	official website Direct
Loco Accelerator	free 2 hours a day	minimum ￥15/month	official website Direct

This article tags: Chrome extensions chrome plugin chrome extension stylish Stylish is what extentions Google

Turn from SUN's BLOG-focus on Internet knowledge, share the spirit of the Internet!

Original Address : "Chrome extension Stylish:" Skin-changing "for a site you don't like

Related reading : "Integrating QQ music, NetEase cloud music and shrimp music resources" with chrome extension listen 1 "

Related reading : "8" new tab "chrome Extensions: teach you to play the New tab page with a sneak "

Related reading : "7 Practical Chrome Extensions recommended: help you improve your chrome experience "

Related reading : " no extension is not Chrome: 15 Premium Chrome Extensions recommended for everyone "

Related reading : thebest experience for Web browsing with 12 no less chrome extensions

Related reading : "5 Chrome extensions that bring happiness "

Related reading : " use case for Palette class in Android: Color adaptive Toolbar"

Related reading: What git can do, how it differs from SVN in depth

Related reading: " share some of the most useful, user-friendly, and feature-rich Google Chrome Extensions for developers "

Related reading: A lot of brief encounter tools or websites that share some of the actual Android development process

related reading:" I am a G powder, has been concerned about Google, recently Google has some little gestures, probably a lot of people do not understand "

related reading:" machine learning leads to technological innovation in the field of cognition, so how can the SaaS industry be changed by machine learning?" "

related reading:"VPS Tutorial Series: DNSMASQ + DNSCrypt + SNI Proxy smooth access to Google configuration tutorial "

Related reading: useful for programmers: 2017 latest in Google's Hosts file download and summary of the various hosts encountered the problem of the solution and configuration of the detailed

Related blog:SUN ' S blog -Focus on Internet knowledge and share the spirit of Internet! Go and see:www.whosmall.com

Original address: http://whosmall.com/?post=419

Chrome extension Stylish: one-touch "skin-changing" for a website you don't like