WD Blog Park Custom Theme Styles

1

Open the Background Settings screen, go to your blog home page, open the debugger (Chrome comes with a debugger or firebug), see where uncomfortable, navigate to the relevant elements of the page DOM structure, start debugging, for example I want to change the background of the body:

Where the http://files.cnblogs.com/cyStyle path is the root path in the background file upload, you can upload styles, scripts, compressed files, etc., but there is a size limit, and update the file needs to pay attention to the CDN cache. After debugging, go to the Settings page, in the page custom CSS code box, enter the code you want, save it. Back to blog homepage found body background has changed. For the attribute with insufficient weight, you can add !important after the attribute value, a trick enemy ~ ~ ~

2

According to the above steps step by step debugging, until you reach your aesthetic. When you have finished debugging, you can package these CSS into a file and then upload it, in the Settings page of the first page of the HTML code to introduce, such as: <link type="text/css" rel="stylesheet" href="(http://files.cnblogs.com/cyStyle/custom.cs" /> If you think your style is enough to replace the original theme provided by the style, you can disable the template default CSS in the Settings page. Next you can define some personal public information in the blog sidebar of the settings page, for example:

<div class= "PageView" > Welcome  Visitors </div><p class= "Para" > About me:<strong> passionate and concerned about the front-end development of the cock silk youth a ~</ Strong></p><p class= "para" > Blog: <a href= "http://hcy2367.github.io/" title= "Chmyun ' s Blog" target= "_ Blank ">http://hcy2367.github.io/</a></p><p class=" para "> Contact me: <a href=" mailto:[email  Protected] "title=" email ">[email protected]</a></p><a href=" https://github.com/hcy2367 " ></a>

3

If you want to introduce JS, you need to send email to [email protected] Request permission, why introduce JS? For example, I want to change the structure of the DOM after the page load, I want to load some class libraries and plugins (such as code highlighting plugin prettify.js,bootstrap), I want to introduce social sharing ( Baidu share , Jiathis), I want to do some special effects (the most popular snow in the sky) and so on, it is worth noting that it is best not to directly in the page footer HTML code to add inline script, otherwise there will be some strange phenomenon, such as alert will be filtered out, and the external file will not, Because the blog Park backstage will be the HTML code to do some filtering processing. Once you've done this, you can customize the blog theme that we want.

It is important to note that if you want to hide some modules that you do not want to see, such as the Calendar module, when you try to hide when the DOM is ready, you will notice that the element is not hidden and that you need to perform the action when the window onload triggers. The reason is that these modules are designed to be loaded after the page has been loaded, or Ajax asynchronous loading, the specific reasons need to be explored.

WD Blog Park Custom Theme Styles