Demo station More works Topic Update Log (24/03/06)
√ Responsive √ Unlimited domain name √ Permanent use √ Free upgrade √ Free experience √ After sales guarantee √ Original works √ Value for money √ SEO title, keywords and description
I wanted to make this template of imitating microblog for a long time, but time has not allowed, so I can't find time to make it out. The theme is simple and clear, the background setting is simple, and no complicated operation is required. Compared with the previous CMS theme, it is much simpler, and it is too suitable for personal blog websites. However, it is not suitable for technology and technology broadcasters. After all, this entertainment element is mostly, You can set independent background images, list cards (you should know that these functions can only be set by microblog members), pick out your favorite cards and backgrounds on your microblog, and copy the address to the relevant interface. Let's have a look!
Introduction to theme setting:
Follow my usual setting steps. I may set the side bar information on the home page first. The module of navigation call on the left is the navigation bar (module management, navigation bar). After setting the side bar information on the right side of navigation, mark the side bar module corresponding to each template:
Homepage template (corresponding) module management - right, default sidebar;
Category list page (corresponding) module management - right, sidebar 2;
Article page template (corresponding) module management - right, sidebar 3;
Specifically show which modules are included in the system module and the theme, and drag them to the corresponding sidebar.
This topic comes with two modules: "Hot Review Articles" and "Tab Combination (Custom Recommendations and Popular Articles)", as shown in the figure:
Front effect:
Sidebar setup is complete.
Set website image:
Website logo, Back Information such as scene map and card map, as shown in the figure:
Logo and ico images can be uploaded directly or filled in the image address, and saved without any difficulty.
Card background picture (corresponding) Picture on the right side of the classification list, see the picture:
You can directly copy the address of Sina Weibo, paste it into the background image interface, and save it.
Setting method of background image:
Find your favorite background image (you can directly pick up the Sina suit background and copy the image address), upload or paste the image into the image address interface, but sometimes the color of the background is different, some are black and some are blue, so the background color can be set by yourself. In short, open the background image (the image address just filled in) You will find that there is a color at the bottom of the picture. See the picture:
The red area in the figure is the background color we want. After the setting is completed, the overall color system of the website will be consistent. How to get the color code? Open the picture, press F12,
In the figure“ #000000 ”It is the code with black background. We click the "black square" in front of the code (not the black area of the screen) to display a color palette. Move the mouse to the light blue area, and click to get the color code, as shown in the figure:
The black area of the picture has become light blue, which makes it more comfortable“ #a5cee2 ”It is the background color code we need. Copy it and paste it into the background color interface.
Finally, I want to talk about the "distance from the top". Some background pictures may have some patterns, such as the National Day, the Spring Festival, etc. If we set the background directly, it may cover the above pictures. At this time, we need to set the distance from the top (the distance unit is pixels, that is, px) so that the patterns can be displayed, for example, the landscape painting just set, There is a mountain and a villa in the picture. We need to display this pattern to look good. The specific pixels need to be tried by ourselves. The simplest way is to set it to "200" first, then open the website front desk to see the effect. If the pattern is not completely displayed, then write larger, such as "300", and vice versa. Next, go to your own trouble, good luck!
Next, let's see how to set the top navigation tab: Theme Settings - Home Page Settings - Customize Top Navigation
Foreground display effect:
The codes are as follows:
<li><a href="/" target="_blank"><i class="fa fa home"></i>Home</a></li>
According to this form, multiple navigation links can be set. It is recommended not to exceed three, or there may be dislocation.
Announcement setting method:
Setting method of rolling announcement: theme setting - homepage setting - homepage rolling announcement. The code format is as follows:
<li><a href="/" target="_blank"><i class="fa fa bullhorn"></i>Customize announcements on the home page and go to the background to set them</a></li>
The format is fixed, just modify the text and links.
Set article data call:
Relevant article call settings, as shown in the figure, the number of popular tags in the sidebar will be displayed at the front desk. The number of days of popular articles in the sidebar is 30 days a month, which is self set. The sidebar article recommendation is filled in the article ID (file management - view article ID),
Oh, yes, here we say that some data in the sidebar uses the static cache mechanism. For example, you set the sidebar article recommendation, but the articles recommended in the foreground sidebar may still be the previous data. This is because the static cache file is used. If you want to update data, you need to edit an article at will and submit it directly to the right, This is used to generate new cache data.
Set the background of blogger card:
Background --- Theme Settings --- Sidebar Author ID: Fill in the user ID, and the background image still uses the image of Sina blog.
Foreground display:
The blue sky and white clouds are very beautiful. It's better to use Sina Weibo's package pictures. Copy and paste them directly. Other settings are basic, so there is no difficulty. In addition, the category list has a like function that adapts to the application center "New article like development version" Plug in, search for keywords, click Plug in, get the plug-in, and then enable the plug-in without additional settings, as shown in the figure:
Other settings:
For the slide show carousel function, click the "carousel picture" to set the title, upload the picture, set the target link, and save it. Remember that the height and width of each picture should be the same.
For advertisement settings, if necessary, open the corresponding advertisement position and add the advertisement position. In addition, there are two interfaces on the top. One is the interface for the head to place public JS for advertisements such as Baidu Alliance, and the script code interface. You can put some of your own js code, such as music players.
The function setting is simpler. It is clearly written. It can be turned on when needed and turned off when not needed.
The overall setting is basically completed, and several demonstration pictures are displayed (you can directly click the demonstration station to view the overall effect)
Front page renderings (default background):
Homepage renderings (open custom background):
The tutorial is basically over. If I have time, I will make you a background picture of Sina Weibo and a video to get the background. It should not be too long in the near future!