How to achieve the skin switching in web development

In the Web site development, often have the skin or theme switching functions, such as Discuz, WordPress, and so on, as long as the choice of which theme, and then you can switch to the corresponding style, what is the rationale behind the implementation and logic, the specific use of code when how to achieve? (in google and Baidu searched a lap did not find the relevant technical articles, to find small partners here to help solve the doubts. Thanks.)

Reply content:

In the Web site development, often have the skin or theme switching functions, such as Discuz, WordPress, and so on, as long as the choice of which theme, and then you can switch to the corresponding style, what is the rationale behind the implementation and logic, the specific use of code when how to achieve? (in google and Baidu searched a lap did not find the relevant technical articles, to find small partners here to help solve the doubts. Thanks.)

There are two kinds

• One is said above, the switch css,html structure is unchanged.

• The second is to switch directories, is generally defined as a directory as the theme of the root directory, sub-directory is a variety of different topics, and then by defining constants or configuring an array or to the database, and then switch to different directory names can be achieved to switch the theme

Specific implementation code

The implementation of skin-changing is usually extracted from the color and background-related styles, and placed in a separate style sheet. When changing the skin, switch the style sheet. Style sheet switching is actually very simple, the trouble is how to plan your style sheet, when you pull the skin style, the entire CSS style is still very clear, logical, which requires a relatively deep CSS refactoring skills.

The simplest skin as long as a change of CSS is enough, the HTML page frame has not changed, show changes

The complex point is a common replacement for HTML templates and CSS.

Both of these approaches are mainstream.

Implementation is not difficult, nothing more than you save a system corresponding to the CSS or HTML template path, the request output can be

The skin is switched on the premise that you have several sets of skin to choose from first.

Skin words, usually refers to the same (or multiple) HTML page, but CSS style is not the same. So so-called multiple sets of skin, is generally more than a set of CSS style. For example: Skin1.css/skin2.css/skin3.css, respectively, three sets of different skin.

When the user switches, because to maintain the user's choice of the skin, then there must be a place to record the selected skin (because the next visit to remember). For the use of cookies to record, or a database or other storage media, then you can choose.

Generally like this user personalization class information (of course, if this information is not important), if you think the skin selection is not very important, then you can choose to log into the cookie. Even if the user cleans up the cookie, it's good to re-select it next time. Of course, if you feel that you want to record the skin selection for the time being, choose to save it like a database.

In fact, prepare several sets of CSS files in advance, using JavaScript to switch the Herf property of the link tag, introduce different CSS files on the line, with a cookie or database to keep the user's skin using the CSS ID

Switching CSS is definitely a must, that's all. But since the Lord has proposed a solution, I think it is necessary to say fine.

1. Like Discuz, WordPress, or even more ancient ecshop, the skin is a lot of folders, a folder of a skin, to add new skin, directly in the themes (usually called this name) this folder and add another is. To the Setup interface, when the skin is configured, it will load all the folders under Themes, then choose one, deposit the database, very traditional pointers.

2. Now some webapp, the skin is a CSS style, after the election, the style information written to a cookie or localstorge, but now this is still very little. Also not recommended.

