[087] Stylish & Greasemonkey

Source: Internet
Author: User

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 );

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 ";}})();



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.