2018-5-1 I just learned [detailed illustration] step by step to teach you to customize the blog garden (cnblog) interface-latest

2018-5-1 I just learned [detailed illustration] step by step to teach you to customize the blog garden (cnblog) interface-latest

1. The blog garden is rich, strong, democratic, civilized and harmonious. 

Reprinted from: http://www.cnblogs.com/zwfymqz/tag/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E7%BE%8E%E5%8C%96/

Recently a lot of people have asked me how this thing is achieved.

Then I'll share it :grin:

<!--Rich, strong and democratic click special effects-->
<script type="text/javascript">
/* Mouse effects */
var a_idx = 0;
var b_idx = 0;
/*    Text and color arrays */
var a = new Array("Prosperity", "Democracy", "Civilization", "Harmony", "Freedom", "Equality", "Justice" , "Rule of Law", "Patriotism", "Dedication", "Integrity", "friendly");
var b = new Array("#FF0000","#FF7F00"," #FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF","#FF0000","#FF7F00"," #FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF");
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        
        var $i = $("<span/>").text(a[a_idx]);
          a_idx=parseInt(12*Math.random()); //Text random number
          b_idx=parseInt(14*Math.random()); //Color random number
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999,
            "font-size":"1.3em", //font size
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": b[b_idx]
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
<!--Rich, strong and democratic click special effects-->

 

Other settings in the second part

Reprinted from: https://www.jianshu.com/p/23b2bfc9a90d

The place to set custom css is: set page custom CSS code

 

For people with good basics, of course, they can make a skin completely by themselves, and can completely disable the default CSS. For us practical observers, it is better to "learn from".

Choose a template

Let's start our customization journey by picking a ready-made template in the skin. Here I chose SimpleMemory, and I still like this simple style.

This template itself is very beautiful, and it does not need to be customized, but I think it is a bit too "exquisite" by default. The page only displays 65%, which clearly does not make full use of the space.

View elements

The first step we start to customize is to learn to view elements. Basic Chrome and Firefox can use F12 to easily view page elements.

Generally speaking, the current CSS style can be displayed directly on the right, and can be edited by <font color=red>! </font>

This button is to use the mouse to select elements in the page, and then the corresponding elements will be displayed below.

 

Then paste it into the place where the CSS code is customized on the page mentioned above. In fact, you can only copy the part you modified, and you don't need to copy the rest, but for convenience, just copy it all over.

 

 

Then save it and go back to your homepage to see if it has changed ?

Text / voidsky_ very interesting (author of the short book)
Original link: http://www.jianshu.com/p/23b2bfc9a90d
The copyright belongs to the author, please contact the author for authorization, and mark the "author of the short book".

 Explore for yourself later! ! !