[087] Stylish & Greasemonkey

Stylish and Greasemonkey are two classic extensions in Firefox. The former is mainly used to decorate pages and beautify pages through CSS, because CSS is used to beautify any pages, so let those charged theme die! Greasemonkey is even more powerful. It is omnipotent to change the internal structure of the page through the JavaScript language and re-design it. This blog mainly introduces a bit of my summary in the learning process! In addition, Greasemonkey also uses a lot of jQuery knowledge!

<I> Stylish

1. Global "" font

*{font-family: "Microsoft Yahei" !important;}

2. Modify the background color, background image, and font color.

div.uname, div.handle{color: #00FF00 !important;background-color: #222222 !important;background-image: url("http://24.media.tumblr.com/tumblr_maw5xgAWmq1rytmx2o1_1280.png") !important;}

3. Border design. Images (img) are also supported!

div.logo div.container {border-style: none !important;border-radius: 7px 7px 7px 7px !important;width: 99% !important;}

4. Adjust the page width

body { margin-left: -10px !important; margin-right: 0px !important; }

Note: Youku homepage is very strange. In order to ensure that there is no scroll bar below, I will shrink to a very small size. However, at this time, the two sides are very empty, so they have been very entangled, because it is best to keep the width of both sides slightly, and the scroll bar appears below. The above code can reduce the margin on the left to achieve the effect! In addition, margin indicates the boundary, that is, external, and padding indicates filling, that is, internal.

5. Firefox gradient color (only use background)

• Background:-moz-linear-gradient: linear gradient!
• Background:-moz-radial-gradient: Ray gradient!

　　
Background-image:-moz-linear-gradient (top, #999999, #333333 );
Or

Background-image:-moz-linear-gradient (center top, #999999, #333333 ); 　　
Background-image:-moz-linear-gradient (0deg, blue, cyan); (= left) → 　　
Background-image:-moz-linear-gradient (90deg, blue, cyan); (= bottom) skip 　　
Background-image:-moz-linear-gradient (180deg, blue, cyan); (= right) gradient 　　
Background-image:-moz-linear-gradient (270deg, blue, cyan); (= top) gradient 　　
Background-image:-moz-linear-gradient (left, red, orange, yellow, green, cyan, blue, purple); (rainbow) 　　
Background-image:-moz-linear-gradient (left, blue, white 80%, orange); (0%, 80%, 100%) 　　
Background-image:-moz-linear-gradient (left, blue, white 10%, blue 20%, white 30%, blue 40%, white 50%,
Blue 60%, white 70%, blue 80%, white 90%, blue 100% );

Reference: background:-moz-linear-gradient usage in html5 + css3

Reference: Firefox Linear Gradients (Linear gradient)-Css3 demonstration

6. Add a background image

html{background:url(http://www.ttdesk.com/resources/upfile/ttdesk/holiday/eerie_autumn_halloween_desktop/1366x768/15eerie15.jpg) fixed !important;background-size:100% auto !important;}body{background:transparent !important;}

Images are added to the html part. The images are fixed. The images are placed behind the entire page ~
The body part must be transparent so that the background behind the body can be displayed. You can set transparency for different labels in this part!
You can also insert an image directly in the background of the body, as shown in the following code. This Code only displays the image in the body section, and the rest remain unchanged!

body{background:url(http://www.ttdesk.com/resources/upfile/ttdesk/holiday/eerie_autumn_halloween_desktop/1366x768/15eerie15.jpg) fixed !important;background-size:100% auto !important;}

 

 

<II> Greasemonkey

1. Adjust all links to open on the current page

/// = UserScript ==/// @ name: the current page is displayed. // @ namespace McDelfino // @ description: the current page is displayed. // @ include * // @ grant none // @ version 1 // =/UserScript = (function () {var links = document. getElementsByTagName ('A'); for (I = 0; I <links. length; I ++) {linkspolici}.tar get = "_ self ";}})();