Teach you how to quickly DIY your blog Park SKIN

It is better to teach fish. I want to share 100 Skin based on my own aesthetic vision. It's better to teach you how to do it yourself ~~ After all, we have different aesthetic perspectives. In addition, I am a blind person and I cannot make a good appearance.

To do well, you must first sharpen your tools. First, we must teach you how to use advanced weapons. Otherwise, it may take a whole day to create a Skin using the "view source files & capture images" method.

Microsoft's IEDevToolBar is the first to appear. It is a free Internet Explorer plug-in made by Web developers. The main functions used for blog Skin are as follows:

1. view the CodeDom in the tree structure and view the attributes of each Element. You can click and select the Element. This is useful when we create a Skin.
2. generate an image report, that is, generate a detailed report for the images displayed on the page. This saves us the trouble of finding the image path and measuring the image size.
3. Highlight the borders of tables, table units, and Div. This is also useful when we adjust the layout.
4. The page ruler allows you to measure the length on any page. This greatly improves our work efficiency. You do not need to capture images and use the drawing tool to measure the length.

Please download and install it now. Even if you don't do Skin, I strongly recommend you install it. It is really useful when you adjust the Web Project interface.

The following shows ColorPic, which is also a free software used to pick up the color. You can group the color when you move the mouse to the desired color, in this way, we can pick up all the required colors and use them slowly. The Ctrl + G shortcut is used to pick up the color and re-pick the color. Other functions depend on your own.

Finally, the editor is ready. If you are a CSS expert, the text editor is enough. If you are at the same level as me, I suggest you select an editor that can be intelligently prompted, for example, Dreamweaver or Visual Studio2005/2003 can also be used.

The tool is ready. Let's start to warm up. First, let's talk about how to define CSS in the blog garden. Some new friends may not know yet.

Go to the background management of your blog, select the "options" page, and then select the "Configure" item. Now you can see the "Custom page through CSS" item, you can put your own CSS in this text box. Remember not to add the <style> label.

However, I am not using this method. I put my CSS with the <style> label in the "subtitle", because I used the first method, several times when the CSS effect suddenly fails to display and the style of the default template is restored, I don't know why I have to ask DuDu, I will not have this problem any more if I use the second method.

CSS alone is not enough. The custom CSS in the blog garden is related to the original template. For example, some IDs and class names are different in each template, therefore, CSS Skin made for a template is generally not generic.

Next, let's talk about the CSS definition habits of the blog garden. Generally, the page is divided into three parts: the top title and the menu bar (that is, the document category and calendar, one is the subject of the article list.

These three blocks generally have their own id or class. If id is used to define CSS, use the format # id, for example:
# Main
{
Border: 1px solid # FF0000;
Width: 100%;
}

If it is a class, it is in. class format, for example:
. Main
{
Border: 1px solid # FF0000;
Width: 100%;
}

(If you do not know much about CSS, you can make up for it. Hey, in fact, CSS is also a little bit of experience accumulated by engaging in the appearance of your own blog)

Every template does not necessarily use Class or ID, or the names of these three major blocks. If we use "view source files", it will not be so fast to find them, now we can use the View DOM function of IEDevToolBar. View DOM provides a "Select Element by Click" function, so that we can Select an item with the mouse and View its id.

After capturing the id and class names, start to define your own CSS.

First, you need to download the CSS file of the template currently used by your blog. How can you download it? You can see the css file at a glance.

After downloading it, modify it based on your needs, but pay attention to it! Do not delete the original definition. For example, if border was originally defined as 1px solid # FF0000, do not delete the boder definition directly if you do not want border, the border should be redefined to 0px none # FFFFFF. Otherwise, the CSS definition of the template cannot be overwritten.

The article is over now. You can define your own CSS. (Eggs and stones fly under)

Hey, it's really enough. The only thing you might not have enough is your color vision and your proficiency in CSS. How do I design the color scheme and layout for people like me? Well, one sentence: A big copy of the world's color scheme.

I sometimes use ColorPic to capture the color of a good-looking foreign website and then configure it with my own CSS. For example, I share a few appearances that are captured from the Blogger template of google, the layout of the Blog is usually the three blocks, which are easily imitated. Sometimes the color of the link changes when the mouse moves to the ColorPic to capture the connected color. What should I do. At this time, you may need to capture the image, and then capture the color of the image. You cannot be too lazy ~~ Haha.

Hey, I was supposed to capture a credit card for stealing the color of the Blogger template ~~~ ColorPic cannot see the result capture ~~ You can't try it.

After reading the article, you must be at ease ~~~ I wish you all a happy DIY experience. Remember to develop the spirit of sharing ~~ If you do not share it, let me know how to learn it (ensure that ColorPic and DevToolBar are not enabled.