Home > Article > Web Front-end > Pjblog Template Making Tutorial Highly Recommended_Experience Exchange
Pjblog Template Making Tutorial Highly Recommended_Experience Exchange
- WBOYOriginal
- 2016-05-16 12:09:132099browse
Updated on 2007.1.30...Reprinted from http://www.dnxh.cn/blog/article.asp?id=155
PjblogThe user base is getting bigger and bigger , a Blog is equivalent to a Blogger's online home. In today's era of pursuing individuality, it is everyone's wish to make a personalized Skin for their blog that suits their own characteristics. But this involves some knowledge after all, and we need to study hard to fulfill our wishes. I will start from scratch, which is probably a process like this: Preparation → Concept of Skin → Drawing → Slicing → Writing CSS → Preview → Debugging compatibility → Beautifying details, previewing and writing is a cyclic process . I want to use this tutorial to help everyone understand how to make Skin. You don’t need to use Skin made by others. You can rely on your own efforts to decorate your blog beautifully and with personality. Very exciting, let’s look down...
1. Preparation
##1.1 Some necessary basics You must have the desire to learn knowledge, this is the prerequisite for everything. You have a certain understanding of the use of
Pjblog (if you don’t know what Skin is and how to install it, we recommend you not to read further). When doing Skin, you must be careful, be strict with yourself, and have a certain sense of aesthetics. It is best to be familiar with some drawing software (Adobe Potoshop, Fireworks, etc.). Tomato has done a very good tutorial on CSS (registration required).
2.2 Tools involvedFirst of all, you must have a computer, and the color of the monitor is not very bad (the LCD monitor of my notebook makes me dumbfounded...) . Drawing software Adobe Potoshop, Fireworks and the like. CSS writing tool, of course you can also use Notepad to write. Color matching software, screenshot software. These are basically available for download on this site. In order to prevent the site from being blocked due to excessive traffic, I can only increase the download level and randomly change the download address. Please register and download, thank you for your cooperation!
Macromedia Studio 8.0 official simplified Chinese official versionEDonkey download address: http://lib.verycd.com/2005/10/14/0000069569.html
Webpage that I agree with For production software, here we mainly use Fireworks in the suite (it is used in the tutorial). Of course you can also use Adobe Photoshop.
CSS writing tool EditPlus V2.1.2 Build 147 Chinese versionDownload address:
Click to download the fileOf course some people say that it is not better to use Dreamweaver? It is not recommended to use it here. It is easier to remember the meaning of the code by handwriting. Besides, CSS visual writing is not very ideal. Originally TopStyle3 is the best tool for visually writing CSS, but the CSS between
Pjblog is divided into several files, and the effect is not very obvious when using it.
Color Schemer Studio1.5 color matching toolDownload address:
Click to download the fileColor matching is the first step for you to conceive Skin. This tool is more professional in color matching.
Su Yu Style Sheet Chinese Manual 2.0 (hereinafter referred to as "Manual")
Download address: Click to download the file
Debugging software Firefox
Download address: Click to download the file
Now 94% of people are using IE, but the number of Firefox users is also growing. I won’t go into details about how good Firefox is here. But there must be compatibility issues with CSS between the two browsers.
Screenshot tool HyperSnap5
Download address: Click to download the file
This is also a screenshot software that I think is relatively powerful after using it.
If you dozed off [79], then take a rest...
2. Conceive your Skin
2.1 Color matching
The first impression your blog gives people is visual, so color is very important.
Here we use white, gray and red. Generally gray is universal, just like blood type O in blood types.
2.2 Layout
Let’s not say that the layout of the page is too complicated. After you understand the structure, you can use your imagination. What I want to talk about here is CSS (Cascading Style Sheets). The focus here is cascading. If we say that Skin design is graphic design, I think it is wrong. From an appreciation point of view, this is a two-dimensional work, but from a design point of view, it is three-dimensional. How else could there be an attribute like z-index? Furthermore, we can make a comparison. The layers of CSS are similar to the layers in PS or FW. The only difference lies in: layer exchange order - PS can but DIV+CSS cannot; Alpha channel - PS can but CSS can't (some browsers can). As shown in the picture above, we can see the structure of Pjblog and the order of DIVs. The former covers the latter (of course it can also be transparent). Let’s not get fancy first. The layout of a blog is generally like this.
The header here is the head, which contains the blog name, subtitle, and horizontal menu;
Tbody is the middle content, which contains the main content (mainContent is the log we write, just like where this tutorial is) , sidebar;
foot is the bottom, which contains some of our copyright information, filings, etc.;
We have said so much about the structure of Pjblog, that is It is said to be the relationship between Box and Box. And how is Box composed? The expert Douglas has already made Flash models here, which clearly explain margin, background-color, background-image, padding, border and the relationship between them.
Of course these are the main part of Pjblog, each part also contains some other DIVs, and these details (such as horizontal menu, sidebar content panel, main content module, etc.) also beautify our Blog The main points, but let’s do this slowly. Look at the main body first so that you can have a rough idea of the skin in your mind and be fully prepared for our next drawing.
Below I made a structural model of Pjblog.
3. Drawing
3.1 Understanding the background
Why is there a special section about background? Because the images used in CSS all exist in the form of background. We should never forget this point in the process of drawing and cutting pictures. We should reduce the size of pictures as much as possible (many simple Skins now use no pictures or use less pictures), in order to reduce the number of downloads and improve Page browsing speed.
Then let’s take a lookbackground:
His properties include
background-color color
background-image image
background-repeat Repeat method
background-attachment Whether to scroll
background-position Position
And when we draw What are the ones you pay attention to? First, let’s look at the relationship between color and image. Color is always displayed below and image is on top. The function of this is that we do not need to use image but color in some large areas of monochrome; the other is repeat, which allows the picture to be displayed in a repeated or non-repeating manner in X or Y. The function of this is that if there is such repetition in a certain background, when we cut the picture, we only need to cut the width (length) to 1px; we need to combine the structure of Pjblog to comprehensively use these characteristics and cultivate our own 3D thinking.
3.2 Production of the main body
Let’s take the Skin I’m using now as an example to briefly describe the drawing process.
Let’s first take a look at what kind of subject we want to do (this should have already been formed in your own mind, or you may have a vague idea).
The main tone is white with a little shadow on both sides, and the sides are gray (#EEEEEE) 230px wide.
Open Fireworks and create a new file with a white background of 1000px×768px (because the main background of this Skin is white). Make sure our main content is 800px wide, draw a rectangle with a width of 800px and a height greater than the canvas, and add a 1px wide gray (#999999) border. Use the filter glow to add some shadows. The parameters of the filter are set to width 5, softening 10, transparency 15, color black, and offset 0.
Add a sidebar and draw a rectangle with a width of 230px and a height greater than the canvas, and place it to the left. Be careful not to suppress the 1px border. This way our main part is drawn. What should we pay attention to when making the main part? The main thing we have to consider is the height of the page, because the height of the page will change with different content, so we have to make a flexible height. We can use Background-repeat to set the value to y. Then our background is repeated vertically.
3.2 Production of the head
Similarly, let’s first take a look at what kind of Top we want to make.
What we see is two textured translucent horizontal bars pressed on the main body.
We draw two rectangles with a width larger than the canvas (because we want these two adaptive width). Add some texture to the rectangle by adjusting the gradient and adjust the transparency to 80.
This way our Top is ready.
3.3 Production of the bottom
The production of the bottom is generally relatively simple. Here, a horizontal bar is added to correspond to the Top. There is no adaptive width here (of course It can also be done, let’s start simple). Below is a gray rectangle with a horizontal bar on top.
At this point we have basically drawn a rough outline of the picture. You may only see it for a while, but sometimes it may take us several days from conception to completion. In order to match the effect, it is best to add some content. Play with the link color and modify it repeatedly to achieve the best effect.
3.4 Slicing
The so-called slicing, as the name suggests, is to cut the finished picture into the pieces you need. Many friends are stuck here and don’t know how to cut it properly. What I want to say here is that on the premise that it can show your effect, the smaller the picture is, the better, and the less, the better. So what do you need to cut? How to cut? In fact, it is cut according to your CSS needs. You can skip this first. After learning CSS, when you want to set the background in a certain Box, you will think of pictures. Then you can cut a piece of the prepared picture and use it. Slowly you will understand how to cut the picture. The picture below is a slice of the head background image. We can also see what tool is used to cut the image (I think Fireworks has a better image cutting function). In Fireworks, slices are placed in the web page layer. We can name the slices, and when we want this slice, we can export the image. What we also want to talk about here is the format of the exported image, which is the properties of the optimization column. Personally, I prefer the PNG32 format, which supports Alpha channel (future trend). If you want an opaque image, it’s also good to choose JPG (its size is small).
The overall PNG layered file is provided for everyone to study. Click to download this file
We can see it when we open this file. For example, the width of the header, main background, and bottom is not 800px as we said at the beginning. That is because we added shadows outside. Be sure to take this size into account (it is generally required to do so, but it is easy to make mistakes when the shadow and background color are not very different, so be careful). The global background does not need to be made very high, because we can use CSS to make the white color below. If it is too large, it will be wasted. There is also the button background image. If you have mouse contact mode, it is recommended that you do not divide it into two images. We will make it on one image and control the position of the image through CSS to achieve different backgrounds. This will wait until we talk about CSS. More details.
4. Writing code
4.1 Global style
Finally we have entered the core part, we will use CSS+DIV Beautify our Blog. Many friends always ask this question, how do I do Skin? What I want to say here is that you must first understand the relationship between CSS and DIV. DIV is like the skeleton of a house (brick walls, etc.), and CSS is the indoor and outdoor decoration. If you don't understand how the skeleton is composed, how can you decorate it? Another important point to mention is that one of the characteristics of CSS is that what is defined later replaces what was defined before. For example, if I define the font color to be red in the global style, and define the color to be blue in the main body later, then what we see will be blue.
Let’s get to the point, let’s talk about global styles first (in Pjblog is the global.css file under the Skin folder).Here we can define the appearance of specific tags throughout the page. Specific tags such as body, img, select, th, etc. are built-in tags. The style here is valid for the content and DIV inside . Look at the code ( is CSS code, is regarded as a DIV layout, and will be represented by this runnable code in the future. Not repeated)
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh it before executing it]
We can see one background style through the preview, but why are the others not withdrawn? That means there is no content inside. You can try adding code or text between . You can also change the attributes in the style to see what changes have occurred (if you don't know what the attributes are, I suggest you read the "Su Yu Style Sheet Chinese Manual 2.0" above). You can change the background-color: attribute to #000 to see if the background is black. Do you feel a sense of accomplishment (I felt it at the time!). Don't be limited to these tags, you can try using more combinations of tags and attributes to change the appearance. Only in this way can you make a personalized Skin.
4.2 Main body style
If we regard the global style as , then think of the main body style as #container. At this point, we may understand that writing CSS is actually a detailed process. Why do you say that? You see, #container is actually contained in , and everything we will talk about in the future is contained in #container.
As can be seen from the above model, #container contains #header, #Tbody, and #foot. Through the definitions of these, we can realize the picture drawn above. Let’s continue adding to the above code, look at the code
[Ctrl A Select All Tips: You can modify part of the code first and then press Run]
I don’t know why this paragraph cannot be styled. It may be because it is the same as the code on the page. Then we won't add it. Let's analyze the structure first and see what the role of each element is. Let's first set the style of #header, which we have already mentioned above.
#container #header{width:816px;height:110px;background: url(top.jpg) no-repeat;text-align:left;}
#blogname is our Blog name, which contains the #blogtitle sub-element. When we set it up, we first set #blogname and then #blogtitle.
#container #header #blogname{font-size:22px;color:#999;font-weight:bold;float:left;padding:15px 0 0 25px;}
#container #header #blogname #blogTitle{display:none}
Here we set the font size, color, bold, floating left and padding distance of #blogname. The blogtitle is set not to be displayed.
Looking further down, we see the two elements #left and #right. We will know the meaning of the naming. That's the style at both ends of #header. We can use float:left and float:right to achieve it. In this style, we don't need to set it. This can mainly implement #headers such as rounded corners.
#menu is a menu item. Generally, we are confused when we look at it. In addition, it contains the float attribute, which makes it difficult to use. Let’s analyze it:
#menu is an overall style. It contains a structure of
#container #header #menu{float:right;margin:35px 15px 0 0}
#container #header #menu ul{}
#container #header #menu ul li{float: left;height:20px;list-style:none;}
.menuL{}
.menuR{}
.menuDiv{width:1px;height:20px;background:#999;margin-right: 15px;margin-left:15px;}
float:left; in li is a necessary condition to implement a horizontal menu, list-style:none; is to eliminate the small dot in front of the list.
Just these top styles are not perfect. We need to style the menu links. That is, the style of menuA is missing one thing we didn’t mention just now.
.menuA:link,.menuA:visited{text-align:center;text-decoration:none;color:#cc3300;line-height:19px;height:15px;}
.menuA: hover{text-decoration:none;}
:visited is the style after visiting, :link is the usual style, :hover is the style of mouse contact, in fact there is also :active (when the mouse is clicked and released The style of events that occur between them) There is a written order "LoVe/HAte" (love/hate) link rule: Link, Visited, Hover, Actve. Please refer to the manual for specific parameters.
4.4 Content Style
Content style contains more elements and more transformations. Let’s take a look at what styles we need to do. The first is the content #Tbody, which contains the main content #mainContent and the toolbar, which is the sidebar #sidebar, on the home page. On the login page, there are login boxes, registration pages, and information prompts for errors. Congratulations on passing. These are the message box styles #MsgContent.If you have looked at the Layout.css in the previous style file, you may have found a problem. The tags I mentioned above are all marked with #, which is the ID selector, and there is no mention above that the tags starting with . are classes. Selector, that is, class="*". Why is there such a naming method? We know that Pjblog is a modular program. We can customize the sidebar module and content module ourselves, which means that the IDs (Module Identification) in several toolboxes in the sidebar toolbar can be named by ourselves. , the same is true for the modules in the content. This creates more styling possibilities for our templates. You can understand it this way, first we use a unified class, and secondly we define a unique ID for each toolbox. Then we can define the style of each toolbox through these two combinations. The form is as follows:
We start with the sidebar, which has a clear structure. A #sidebar main element contains three sub-elements #sidebar-topimg, #innersidebar, #sidebar-bottomimg. Obviously #sidebar-topimg, #sidebar- bottomimg is the style of the top and bottom of the sidebar, and #innersidebar is where the toolbox .sidepanel is placed. Toolbox .sidepanel is also used as a main element, which contains .Ptitle title, .Pcontent content panel, and .Pfoot bottom. Look at the code:
code
代码里的AA、BB、CC就是我们自定义的模块标识。这个在后台模块设置里可以自己定义。
那我们把上面的代码定义一下式样看看效果，想要的效果就是每个功能块(AA、BB、CC)的头部(ptitle)有一个自己的式样（分别是：红、黄、蓝）。
HTML代码
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
.ptitle{height:10px}Define the common style attributes of ptitle;
#Side_aa .ptitle{background:red}The following defines different colors.
#Side_bb .ptitle{background:yellow}
#Side_cc .ptitle{background:blue}
What should be noted here is ID naming rules for PJ sidebar modules: Add Side_ before the module identification. For example, aa here, that is #Side_aa. The default module identification of the program cannot be changed.
After seeing the effect, have you already felt the magic of the module function of Pjblog? We can also give each module absolute positioning to achieve various Layout. For example, the calendar style of Eternal Love and the Skins switching module style of Yahoo Weight. What we are also talking about here is the structure of Pj and how to use these structures. For specific CSS properties, please refer to the manual.
What we need to understand here is the relationship between module identifiers and selectors. There are more detailed instructions in the selector manual.
Then let’s look at the style of the main content. The style of the main content is a little more complicated than the side column. First, the label of the main content is #innermainContent, which is also a three-column (or multi-column, because custom modules can be added) layout. Including the header #mainContent-topimg, the middle column #Content_Contentlist and the bottom #mainContent-bottomimg. We can define their styles separately. The head and bottom are already the most basic DIVs and do not contain sub-elements. You can define their styles as much as you like without considering what other styles are in them. The meaning of this sentence is After the definition is completed, it is the final style. And #Content_Contentlist is the default module of the program and cannot be deleted. The bottom module is set in the background. If you add content modules, the added content modules can be freely defined as mentioned in the sidebar above. Also note here: the ID naming rules of PJ content module: For example, if the content module ID is Contentlist, then the ID of this module is #Content_Contentlist. It is important to add Content_ before the content module ID.
Because the custom module is uncertain, I will not go into details here, but focus on the default module Contentlist. Like the sidebar, the content here no longer uses ID selectors, but class selectors. First of all, #Content_Contentlist contains two columns, .pageContent and .Content. .pageContent is the paging style, which is also the final defined style. . What is the specific part? Let’s look at the picture below:
All these places belong to the category .pageContent. This is the advantage of class selectors. You may think that we have been talking about the structure for a long time without talking about CSS. Don’t worry, it is important to understand the structure. Hold back and look down.
After understanding the paging style, let’s look at the style of .Content. The content in .Content is relatively rich. First of all, it is a three-column layout, with header .Content-top, content .content-body, and bottom .content-bottom. The left and right DIVs are hung on the head and bottom respectively.The ones at the head are .Contentleft and .contentright, and the ones at the bottom are .ContentBleft and .contentBright. We can literally understand where these are located. If you don’t understand yet, please go to model.
In .Content-top it also contains some other log information, namely the title, author, and date of the log. So where are these differences? The title belongs to the .ContentTitle category, and the author and date packages belong to the .ContentAuthor category. They are contained in and respectively.
As mentioned above, these are the styles in the homepage mode, which are a little different in the single blog mode. There is an additional .Content-Info class under , which also contains two classes: InfoAuthor and InfoOther. The information contained here is as shown below:
The following is the text. Content-body. In a single blog, content such as [article from] [citation address] [Tags] is also given the .Content-body class. In order to distinguish it from [article from] [citation address] [Tags], this ID is added. The #logPanel tag is not available on the home page. In fact, you can also add it to the homepage. When I was making the style Yahoo Weight, I added a #logPanel tag to the homepage for the initial style of the content, so that I can control the log content and the style of the homepage summary separately.
In addition to these styles, there are also comment box styles.comment and information box styles #MsgContent and UBB box.comment in the content.
Comment box style.comment is usually in a single blog content, it is a two-column layout. It contains two classes: .commenttop and .commentcontent.
Scroll down to see if this is the case.
Information box style#MsgContent. It's just below the comment information, where you post comments (of course there are also login boxes, information prompts, registration, etc. that are used). This one is not complicated, just a header #MsgHead and #MsgBody, the meaning is very clear. The UBB editor style in the content is another file control, which will be discussed later.
The content format is basically over here. Now we will mainly look at some of the codes in this section.
The structure of the content block will appear in several situations, such as homepage status, single blog, content plug-in and other modes. Focus on the first two situations.
Home page status code
HTML code
[Ctrl A All selection tips: You can modify part of the code first, then press Run]
As you can see from the above code, I didn't use a lot of styling, I just used background and foreground colors to differentiate each element. It may not look very pretty, but the important thing is to change it yourself. Sometimes there is no content in an element, and it is not easy for us to understand the existence of this element. Some elements in my modules that do not have text or other content have added text descriptions. You can try deleting or changing the CSS code to further understand the role of each element. There is another little trick here. In the normal mode of the homepage, Pjblog gives each log summary an ID. You can define the styles individually or in batches. The naming rule is "log_" "Log ID number". We can see the difference between logs 173 and 174 from the above code. How do you know the ID of the log? We move the mouse to the link of the log and see that there is ?id=*** at the end of the link, which is the ID of the log.
Single post status
There is a big difference between the single post status and the homepage. The contents included include custom modules, categories and previous chapters (.pageContent), title author date (.ContentTitle.ContentAuthor), custom font size and log level weather conditions (.Content-Info), content, comment paging (pageContent ), comment (comment), comment box (MsgContent), etc.
Look at the code
HTML code
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
The comment box (MsgContent) will be explained in detail in a later chapter. The general part of the content is basically finished. The important thing is to understand the structure of Pjblog and the specific meaning and effect of each CSS attribute by changing and refining the above code.
4.5 Bottom style
The content of the bottom style is actually not very much, it can be said to be very little. But why do we need to open a section here? Some digressions from the tutorial are involved here. Everyone has to take a look, otherwise no matter how good Skin is, it will be BSed by others.
We know that the bottom of the Blog contains some important information. The first line begins with very important copyright information, which explains the copyright of Pjblog and contains the official website link, followed by the name of your site and the structure of the site (that is, xhtml | css). The second line is the page execution time and the number of database queries, followed by some information about our Skin, including the website and email address of the author of the Skin name. The third line is the registration of the site.
Here we want to focus on copyright. Some information about the Skin indicates that this Skin was made by you (how to do this will be discussed in a later chapter). Users can contact you through this information to respond to some problems. Of course, it is also a good way to promote you. It is also a benefit to encourage everyone to do Skin. We must absolutely protect the copyright information of Pjblog. We have also discussed this issue, saying that there are so many pirated versions of Windows, but these also retain the copyright of MS. We all know that Windows is a Microsoft product. Piracy may be because some people are poor, which I can understand. But for such an excellent open source program like Pjblog, does it cost you a penny? Do you need to remove his copyright? In this way, basic morality will be lost. So whether we are doing Skin or using Pjblog, we should respect the author. It seems like it's a little far apart.
Back to business, let’s take a brief look at the bottom style. It's very simple, look at the code:
HTML code
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
Clearly, a DIV with a Foot tag and two
liststyle:none;Calendar_Day: The structure here is the same as Calendar_week, but different The li contains the hyperlink , and different classes are assigned to dates in different situations.
Date selection (.click), today (.today), non-monthly date (.otherday), today’s existing log (.haveD), today’s existing log (.DayD) Let’s take a look The code and calendar stylesheet are in the typography.css of the template. Because
CSS has inherited features, we'd betterwrite the code in the order of the default style.
PjblogThe user base is getting bigger and bigger , a Blog is equivalent to a Blogger's online home. In today's era of pursuing individuality, it is everyone's wish to make a personalized Skin for their blog that suits their own characteristics. But this involves some knowledge after all, and we need to study hard to fulfill our wishes. I will start from scratch, which is probably a process like this: Preparation → Concept of Skin → Drawing → Slicing → Writing CSS → Preview → Debugging compatibility → Beautifying details, previewing and writing is a cyclic process . I want to use this tutorial to help everyone understand how to make Skin. You don’t need to use Skin made by others. You can rely on your own efforts to decorate your blog beautifully and with personality. Very exciting, let’s look down...
1. Preparation
##1.1 Some necessary basics You must have the desire to learn knowledge, this is the prerequisite for everything. You have a certain understanding of the use of
Pjblog (if you don’t know what Skin is and how to install it, we recommend you not to read further). When doing Skin, you must be careful, be strict with yourself, and have a certain sense of aesthetics. It is best to be familiar with some drawing software (Adobe Potoshop, Fireworks, etc.). Tomato has done a very good tutorial on CSS (registration required).
2.2 Tools involvedFirst of all, you must have a computer, and the color of the monitor is not very bad (the LCD monitor of my notebook makes me dumbfounded...) . Drawing software Adobe Potoshop, Fireworks and the like. CSS writing tool, of course you can also use Notepad to write. Color matching software, screenshot software. These are basically available for download on this site. In order to prevent the site from being blocked due to excessive traffic, I can only increase the download level and randomly change the download address. Please register and download, thank you for your cooperation!
Macromedia Studio 8.0 official simplified Chinese official versionEDonkey download address: http://lib.verycd.com/2005/10/14/0000069569.html
Webpage that I agree with For production software, here we mainly use Fireworks in the suite (it is used in the tutorial). Of course you can also use Adobe Photoshop.
CSS writing tool EditPlus V2.1.2 Build 147 Chinese versionDownload address:
Click to download the fileOf course some people say that it is not better to use Dreamweaver? It is not recommended to use it here. It is easier to remember the meaning of the code by handwriting. Besides, CSS visual writing is not very ideal. Originally TopStyle3 is the best tool for visually writing CSS, but the CSS between Pjblog is divided into several files, and the effect is not very obvious when using it.
Color Schemer Studio1.5 color matching toolDownload address:
Click to download the fileColor matching is the first step for you to conceive Skin. This tool is more professional in color matching.Su Yu Style Sheet Chinese Manual 2.0 (hereinafter referred to as "Manual")
Download address:
Click to download the fileDebugging software Firefox
Download address:
Click to download the fileNow 94% of people are using IE, but the number of Firefox users is also growing. I won’t go into details about how good Firefox is here. But there must be compatibility issues with CSS between the two browsers.
Screenshot tool HyperSnap5
Download address:
Click to download the fileThis is also a screenshot software that I think is relatively powerful after using it.
If you dozed off [79], then take a rest...
2. Conceive your Skin
2.1 Color matching
The first impression your blog gives people is visual, so color is very important.
Here we use white, gray and red. Generally gray is universal, just like blood type O in blood types.
2.2 Layout
Let’s not say that the layout of the page is too complicated. After you understand the structure, you can use your imagination. What I want to talk about here is CSS (Cascading Style Sheets). The focus here is cascading. If we say that Skin design is graphic design, I think it is wrong. From an appreciation point of view, this is a two-dimensional work, but from a design point of view, it is three-dimensional. How else could there be an attribute like z-index? Furthermore, we can make a comparison. The layers of CSS are similar to the layers in PS or FW. The only difference lies in: layer exchange order - PS can but DIV+CSS cannot; Alpha channel - PS can but CSS can't (some browsers can). As shown in the picture above, we can see the structure of Pjblog and the order of DIVs. The former covers the latter (of course it can also be transparent). Let’s not get fancy first. The layout of a blog is generally like this.
The header here is the head, which contains the blog name, subtitle, and horizontal menu;
Tbody is the middle content, which contains the main content (mainContent is the log we write, just like where this tutorial is) , sidebar;
foot is the bottom, which contains some of our copyright information, filings, etc.;
We have said so much about the structure of Pjblog, that is It is said to be the relationship between Box and Box. And how is Box composed? The expert Douglas has already made Flash models here, which clearly explain margin, background-color, background-image, padding, border and the relationship between them.
Of course these are the main part of Pjblog, each part also contains some other DIVs, and these details (such as horizontal menu, sidebar content panel, main content module, etc.) also beautify our Blog The main points, but let’s do this slowly. Look at the main body first so that you can have a rough idea of the skin in your mind and be fully prepared for our next drawing.
Below I made a structural model of Pjblog.
3. Drawing
3.1 Understanding the background
Why is there a special section about background? Because the images used in CSS all exist in the form of background. We should never forget this point in the process of drawing and cutting pictures. We should reduce the size of pictures as much as possible (many simple Skins now use no pictures or use less pictures), in order to reduce the number of downloads and improve Page browsing speed.
Then let’s take a lookbackground:
His properties include
background-color color
background-image image
background-repeat Repeat method
background-attachment Whether to scroll
background-position Position
And when we draw What are the ones you pay attention to? First, let’s look at the relationship between color and image. Color is always displayed below and image is on top. The function of this is that we do not need to use image but color in some large areas of monochrome; the other is repeat, which allows the picture to be displayed in a repeated or non-repeating manner in X or Y. The function of this is that if there is such repetition in a certain background, when we cut the picture, we only need to cut the width (length) to 1px; we need to combine the structure of Pjblog to comprehensively use these characteristics and cultivate our own 3D thinking.
3.2 Production of the main body
Let’s take the Skin I’m using now as an example to briefly describe the drawing process.
Let’s first take a look at what kind of subject we want to do (this should have already been formed in your own mind, or you may have a vague idea).
The main tone is white with a little shadow on both sides, and the sides are gray (#EEEEEE) 230px wide.
Open Fireworks and create a new file with a white background of 1000px×768px (because the main background of this Skin is white). Make sure our main content is 800px wide, draw a rectangle with a width of 800px and a height greater than the canvas, and add a 1px wide gray (#999999) border. Use the filter glow to add some shadows. The parameters of the filter are set to width 5, softening 10, transparency 15, color black, and offset 0.
Add a sidebar and draw a rectangle with a width of 230px and a height greater than the canvas, and place it to the left. Be careful not to suppress the 1px border. This way our main part is drawn. What should we pay attention to when making the main part? The main thing we have to consider is the height of the page, because the height of the page will change with different content, so we have to make a flexible height. We can use Background-repeat to set the value to y. Then our background is repeated vertically.
3.2 Production of the head
Similarly, let’s first take a look at what kind of Top we want to make.
What we see is two textured translucent horizontal bars pressed on the main body.
We draw two rectangles with a width larger than the canvas (because we want these two adaptive width). Add some texture to the rectangle by adjusting the gradient and adjust the transparency to 80.
This way our Top is ready.
3.3 Production of the bottom
The production of the bottom is generally relatively simple. Here, a horizontal bar is added to correspond to the Top. There is no adaptive width here (of course It can also be done, let’s start simple). Below is a gray rectangle with a horizontal bar on top.
At this point we have basically drawn a rough outline of the picture. You may only see it for a while, but sometimes it may take us several days from conception to completion. In order to match the effect, it is best to add some content. Play with the link color and modify it repeatedly to achieve the best effect.
3.4 Slicing
The so-called slicing, as the name suggests, is to cut the finished picture into the pieces you need. Many friends are stuck here and don’t know how to cut it properly. What I want to say here is that on the premise that it can show your effect, the smaller the picture is, the better, and the less, the better. So what do you need to cut? How to cut? In fact, it is cut according to your CSS needs. You can skip this first. After learning CSS, when you want to set the background in a certain Box, you will think of pictures. Then you can cut a piece of the prepared picture and use it. Slowly you will understand how to cut the picture. The picture below is a slice of the head background image. We can also see what tool is used to cut the image (I think Fireworks has a better image cutting function). In Fireworks, slices are placed in the web page layer. We can name the slices, and when we want this slice, we can export the image. What we also want to talk about here is the format of the exported image, which is the properties of the optimization column. Personally, I prefer the PNG32 format, which supports Alpha channel (future trend). If you want an opaque image, it’s also good to choose JPG (its size is small).
The overall PNG layered file is provided for everyone to study.
Click to download this fileWe can see it when we open this file. For example, the width of the header, main background, and bottom is not 800px as we said at the beginning. That is because we added shadows outside. Be sure to take this size into account (it is generally required to do so, but it is easy to make mistakes when the shadow and background color are not very different, so be careful). The global background does not need to be made very high, because we can use CSS to make the white color below. If it is too large, it will be wasted. There is also the button background image. If you have mouse contact mode, it is recommended that you do not divide it into two images. We will make it on one image and control the position of the image through CSS to achieve different backgrounds. This will wait until we talk about CSS. More details.
4. Writing code
4.1 Global style
Finally we have entered the core part, we will use CSS+DIV Beautify our Blog. Many friends always ask this question, how do I do Skin? What I want to say here is that you must first understand the relationship between CSS and DIV. DIV is like the skeleton of a house (brick walls, etc.), and CSS is the indoor and outdoor decoration. If you don't understand how the skeleton is composed, how can you decorate it? Another important point to mention is that one of the characteristics of CSS is that what is defined later replaces what was defined before. For example, if I define the font color to be red in the global style, and define the color to be blue in the main body later, then what we see will be blue.
Let’s get to the point, let’s talk about global styles first (in Pjblog is the global.css file under the Skin folder).Here we can define the appearance of specific tags throughout the page. Specific tags such as body, img, select, th, etc. are built-in tags. The style here is valid for the content and DIV inside . Look at the code ( is CSS code, is regarded as a DIV layout, and will be represented by this runnable code in the future. Not repeated)
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh it before executing it]
We can see one background style through the preview, but why are the others not withdrawn? That means there is no content inside. You can try adding code or text between . You can also change the attributes in the style to see what changes have occurred (if you don't know what the attributes are, I suggest you read the "Su Yu Style Sheet Chinese Manual 2.0" above). You can change the background-color: attribute to #000 to see if the background is black. Do you feel a sense of accomplishment (I felt it at the time!). Don't be limited to these tags, you can try using more combinations of tags and attributes to change the appearance. Only in this way can you make a personalized Skin.
4.2 Main body style
If we regard the global style as , then think of the main body style as #container. At this point, we may understand that writing CSS is actually a detailed process. Why do you say that? You see, #container is actually contained in , and everything we will talk about in the future is contained in #container.
As can be seen from the above model, #container contains #header, #Tbody, and #foot. Through the definitions of these, we can realize the picture drawn above. Let’s continue adding to the above code, look at the code
I don’t know why this paragraph cannot be styled. It may be because it is the same as the code on the page. Then we won't add it. Let's analyze the structure first and see what the role of each element is. Let's first set the style of #header, which we have already mentioned above.
#container #header{width:816px;height:110px;background: url(top.jpg) no-repeat;text-align:left;}
#blogname is our Blog name, which contains the #blogtitle sub-element. When we set it up, we first set #blogname and then #blogtitle.
#container #header #blogname{font-size:22px;color:#999;font-weight:bold;float:left;padding:15px 0 0 25px;}
#container #header #blogname #blogTitle{display:none}
Here we set the font size, color, bold, floating left and padding distance of #blogname. The blogtitle is set not to be displayed.
Looking further down, we see the two elements #left and #right. We will know the meaning of the naming. That's the style at both ends of #header. We can use float:left and float:right to achieve it. In this style, we don't need to set it. This can mainly implement #headers such as rounded corners.
#menu is a menu item. Generally, we are confused when we look at it. In addition, it contains the float attribute, which makes it difficult to use. Let’s analyze it:
#menu is an overall style. It contains a structure of
#container #header #menu{float:right;margin:35px 15px 0 0}
#container #header #menu ul{}
#container #header #menu ul li{float: left;height:20px;list-style:none;}
.menuL{}
.menuR{}
.menuDiv{width:1px;height:20px;background:#999;margin-right: 15px;margin-left:15px;}
float:left; in li is a necessary condition to implement a horizontal menu, list-style:none; is to eliminate the small dot in front of the list.
Just these top styles are not perfect. We need to style the menu links. That is, the style of menuA is missing one thing we didn’t mention just now.
.menuA:link,.menuA:visited{text-align:center;text-decoration:none;color:#cc3300;line-height:19px;height:15px;}
.menuA: hover{text-decoration:none;}
:visited is the style after visiting, :link is the usual style, :hover is the style of mouse contact, in fact there is also :active (when the mouse is clicked and released The style of events that occur between them) There is a written order "LoVe/HAte" (love/hate) link rule: Link, Visited, Hover, Actve. Please refer to the manual for specific parameters.
4.4 Content Style
Content style contains more elements and more transformations. Let’s take a look at what styles we need to do. The first is the content #Tbody, which contains the main content #mainContent and the toolbar, which is the sidebar #sidebar, on the home page. On the login page, there are login boxes, registration pages, and information prompts for errors. Congratulations on passing. These are the message box styles #MsgContent.If you have looked at the Layout.css in the previous style file, you may have found a problem. The tags I mentioned above are all marked with #, which is the ID selector, and there is no mention above that the tags starting with . are classes. Selector, that is, class="*". Why is there such a naming method? We know that Pjblog is a modular program. We can customize the sidebar module and content module ourselves, which means that the IDs (Module Identification) in several toolboxes in the sidebar toolbar can be named by ourselves. , the same is true for the modules in the content. This creates more styling possibilities for our templates. You can understand it this way, first we use a unified class, and secondly we define a unique ID for each toolbox. Then we can define the style of each toolbox through these two combinations. The form is as follows:
We start with the sidebar, which has a clear structure. A #sidebar main element contains three sub-elements #sidebar-topimg, #innersidebar, #sidebar-bottomimg. Obviously #sidebar-topimg, #sidebar- bottomimg is the style of the top and bottom of the sidebar, and #innersidebar is where the toolbox .sidepanel is placed. Toolbox .sidepanel is also used as a main element, which contains .Ptitle title, .Pcontent content panel, and .Pfoot bottom. Look at the code:
code代码里的AA、BB、CC就是我们自定义的模块标识。这个在后台模块设置里可以自己定义。
那我们把上面的代码定义一下式样看看效果，想要的效果就是每个功能块(AA、BB、CC)的头部(ptitle)有一个自己的式样（分别是：红、黄、蓝）。
HTML代码[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
.ptitle{height:10px}Define the common style attributes of ptitle;
#Side_aa .ptitle{background:red}The following defines different colors.
#Side_bb .ptitle{background:yellow}
#Side_cc .ptitle{background:blue}
What should be noted here is ID naming rules for PJ sidebar modules: Add Side_ before the module identification. For example, aa here, that is #Side_aa. The default module identification of the program cannot be changed.
After seeing the effect, have you already felt the magic of the module function of Pjblog? We can also give each module absolute positioning to achieve various Layout. For example, the calendar style of Eternal Love and the Skins switching module style of Yahoo Weight. What we are also talking about here is the structure of Pj and how to use these structures. For specific CSS properties, please refer to the manual.
What we need to understand here is the relationship between module identifiers and selectors. There are more detailed instructions in the selector manual.
Then let’s look at the style of the main content. The style of the main content is a little more complicated than the side column. First, the label of the main content is #innermainContent, which is also a three-column (or multi-column, because custom modules can be added) layout. Including the header #mainContent-topimg, the middle column #Content_Contentlist and the bottom #mainContent-bottomimg. We can define their styles separately. The head and bottom are already the most basic DIVs and do not contain sub-elements. You can define their styles as much as you like without considering what other styles are in them. The meaning of this sentence is After the definition is completed, it is the final style. And #Content_Contentlist is the default module of the program and cannot be deleted. The bottom module is set in the background. If you add content modules, the added content modules can be freely defined as mentioned in the sidebar above. Also note here: the ID naming rules of PJ content module: For example, if the content module ID is Contentlist, then the ID of this module is #Content_Contentlist. It is important to add Content_ before the content module ID.
Because the custom module is uncertain, I will not go into details here, but focus on the default module Contentlist. Like the sidebar, the content here no longer uses ID selectors, but class selectors. First of all, #Content_Contentlist contains two columns, .pageContent and .Content. .pageContent is the paging style, which is also the final defined style. . What is the specific part? Let’s look at the picture below:
All these places belong to the category .pageContent. This is the advantage of class selectors. You may think that we have been talking about the structure for a long time without talking about CSS. Don’t worry, it is important to understand the structure. Hold back and look down.
After understanding the paging style, let’s look at the style of .Content. The content in .Content is relatively rich. First of all, it is a three-column layout, with header .Content-top, content .content-body, and bottom .content-bottom. The left and right DIVs are hung on the head and bottom respectively.The ones at the head are .Contentleft and .contentright, and the ones at the bottom are .ContentBleft and .contentBright. We can literally understand where these are located. If you don’t understand yet, please go to model.
In .Content-top it also contains some other log information, namely the title, author, and date of the log. So where are these differences? The title belongs to the .ContentTitle category, and the author and date packages belong to the .ContentAuthor category. They are contained in and respectively.
As mentioned above, these are the styles in the homepage mode, which are a little different in the single blog mode. There is an additional .Content-Info class under , which also contains two classes: InfoAuthor and InfoOther. The information contained here is as shown below:
The following is the text. Content-body. In a single blog, content such as [article from] [citation address] [Tags] is also given the .Content-body class. In order to distinguish it from [article from] [citation address] [Tags], this ID is added. The #logPanel tag is not available on the home page. In fact, you can also add it to the homepage. When I was making the style Yahoo Weight, I added a #logPanel tag to the homepage for the initial style of the content, so that I can control the log content and the style of the homepage summary separately.
In addition to these styles, there are also comment box styles.comment and information box styles #MsgContent and UBB box.comment in the content.
Comment box style.comment is usually in a single blog content, it is a two-column layout. It contains two classes: .commenttop and .commentcontent.
Scroll down to see if this is the case.
Information box style#MsgContent. It's just below the comment information, where you post comments (of course there are also login boxes, information prompts, registration, etc. that are used). This one is not complicated, just a header #MsgHead and #MsgBody, the meaning is very clear. The UBB editor style in the content is another file control, which will be discussed later.
The content format is basically over here. Now we will mainly look at some of the codes in this section.
The structure of the content block will appear in several situations, such as homepage status, single blog, content plug-in and other modes. Focus on the first two situations.
Home page status code
HTML code[Ctrl A All selection tips: You can modify part of the code first, then press Run]
As you can see from the above code, I didn't use a lot of styling, I just used background and foreground colors to differentiate each element. It may not look very pretty, but the important thing is to change it yourself. Sometimes there is no content in an element, and it is not easy for us to understand the existence of this element. Some elements in my modules that do not have text or other content have added text descriptions. You can try deleting or changing the CSS code to further understand the role of each element. There is another little trick here. In the normal mode of the homepage, Pjblog gives each log summary an ID. You can define the styles individually or in batches. The naming rule is "log_" "Log ID number". We can see the difference between logs 173 and 174 from the above code. How do you know the ID of the log? We move the mouse to the link of the log and see that there is ?id=*** at the end of the link, which is the ID of the log.
Single post status
There is a big difference between the single post status and the homepage. The contents included include custom modules, categories and previous chapters (.pageContent), title author date (.ContentTitle.ContentAuthor), custom font size and log level weather conditions (.Content-Info), content, comment paging (pageContent ), comment (comment), comment box (MsgContent), etc.
Look at the code
HTML code[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
The comment box (MsgContent) will be explained in detail in a later chapter. The general part of the content is basically finished. The important thing is to understand the structure of Pjblog and the specific meaning and effect of each CSS attribute by changing and refining the above code.
4.5 Bottom style
The content of the bottom style is actually not very much, it can be said to be very little. But why do we need to open a section here? Some digressions from the tutorial are involved here. Everyone has to take a look, otherwise no matter how good Skin is, it will be BSed by others.
We know that the bottom of the Blog contains some important information. The first line begins with very important copyright information, which explains the copyright of Pjblog and contains the official website link, followed by the name of your site and the structure of the site (that is, xhtml | css). The second line is the page execution time and the number of database queries, followed by some information about our Skin, including the website and email address of the author of the Skin name. The third line is the registration of the site.
Here we want to focus on copyright. Some information about the Skin indicates that this Skin was made by you (how to do this will be discussed in a later chapter). Users can contact you through this information to respond to some problems. Of course, it is also a good way to promote you. It is also a benefit to encourage everyone to do Skin. We must absolutely protect the copyright information of Pjblog. We have also discussed this issue, saying that there are so many pirated versions of Windows, but these also retain the copyright of MS. We all know that Windows is a Microsoft product. Piracy may be because some people are poor, which I can understand. But for such an excellent open source program like Pjblog, does it cost you a penny? Do you need to remove his copyright? In this way, basic morality will be lost. So whether we are doing Skin or using Pjblog, we should respect the author. It seems like it's a little far apart.
Back to business, let’s take a brief look at the bottom style. It's very simple, look at the code:
HTML code[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
Clearly, a DIV with a Foot tag and two
. Through the previous study, I think everyone should understand how to do it. In fact, generally we do not need to set this, the basic font size and other things are already defined by default. But we can add some pictures at the bottom, use padding, margin and other attributes to control the position of the text, left alignment, right alignment of the text, etc. One thing to understand here is the control of
. The program uses two
fields. There may be line branching problems when setting borders or padding.
5. Detailed performance
5.1 PjblogDefault module
We know# Many functions of ##Pjblog are composed of modules, and when we make Skin, we must also pay attention to defining the default modules of the program for the sake of versatility.
5.1.1 Calendar styleWe also need to understand its structure.
Calendar It is a sidebar module. We mentioned earlier that modules are included in the sidepanel panel of the sidebar, and then each module is given a unique ID. The ID of the calendar here is Side_Calenbar. Then we can define the DIV with class sidepanel and ID Side_Calendar. As for how class and ID are defined, we have already mentioned it before and will review it here. The former is a class selector, expressed in the form:
.Class attribute. The latter is the ID selector, expressed in the form: #ID name. It won’t be repeated again. Generally, the sidepanel is defined uniformly for the unified coordination of Skin. Only in special styles, the DIV with the ID of Side_Calendar is defined. Of course, this DIV, like other sidebar panels, also has an H4 tag with Class Ptitle, a content DIV with Class Pcontent, and a bottom DIV with Class Pfoot. The main content of the calendar is a DIV with the ID Calendar_Body in Pcontent. A total of 7 rows are protected here. A DIV with the ID Calendar_Top displays the XXXX year and month and two direction buttons. A DIV with the ID Calendar_week displays the week. There are 5 DIVs with the ID Calendar_Day. Here are the specific dates. 
Let’s take a look at the further structure. Only by fully understanding the structure can we do a good job in Skin.
Calendar_Top: In addition to the content, there are two DIVs with IDs LeftB and RightB, which control two direction buttons respectively. We can customize the picture of the button
Calendar_week: Inside is a
liststyle:none;Calendar_Day: The structure here is the same as Calendar_week, but different The li contains the hyperlink , and different classes are assigned to dates in different situations.
Date selection (.click), today (.today), non-monthly date (.otherday), today’s existing log (.haveD), today’s existing log (.DayD) Let’s take a look The code and calendar stylesheet are in the typography.css of the template. Because
CSS has inherited features, we'd betterwrite the code in the order of the default style.
- /*Calendar style---define the entire framework. The content defined here will be inherited below. That is to say, if the following is not otherwise declared, it will express the content defined here*/
- #Calendar_Body{margin:5px 10px 5px 0px;font-family:arial;line-height:120%}
- /*Top---Defines the style for the top, here defines the text centering*/
- #Calendar_Body #Calendar_Top{padding :0px 2px 0px 2px ;height:18px;text-align:center;font-weight:bold;}
- /*Button left - button image (I used a color background instead)*/
- #Calendar_Body #Calendar_Top #LeftB {background:#333;width: 9px;height:16px;float: left;cursor:pointer;overflow:hidden;}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn