Phpwind: style creation tutorial

Source: Internet
Author: User
Tags border color

Phpwind style Production

1. Create a New Style File

  • Copy the wind folder under./BBS/image/and paste it to./BBS/image/to obtain the "Duplicate Wind" folder and rename the folder to XXX.
  • Copy the wind folder under./BBS/template/and paste it to./BBS/template to get the "Duplicate Wind" folder and rename the folder to XXX.
  • Copy. /BBS/data/style wind. PHP, paste. /BBS/data/style to get the "Duplicate wind. PHP file, and rename this file to XXX. PHP. (This file is a style Core File)

Ii. style production core

You have obtained the files required for your new style. Now you can create your own style.

  • Modify style core files

    Open the./BBS/data/style/xxx. php file in notepad and modify the file as follows:

    Note that "//" indicates a comment. You only need to modify the comment in the file.
    Change the color code to the color code you need.
    The table width is set to the width required for your style, which can be a fixed value or percentage.
    $ Stylepath = 'xxx'; // folder name in the image directory
    $ Tplpath = 'xxx'; // name of the style folder in the template directory
    $ Yeyeyestyle = 'no'; // whether the table is white ("yes" the internal table border is transparent, and "no" the table border color is the color defined below)
    $ Tablecolor = '# e5e3e3'; // table border color (outer border)
    $ Tablewidth = '000000'; // table width
    $ Mtablewidth = '000000'; // width of the header and tail table
    // The Color of the Forum section list (the background color of the two columns and the background color of the "my info" Link "" online user "long table background) color)
    $ Forumcolorone = '# f7f7f7 ';
    // The Color of the Forum section list is two ("whether or not there is a new certification Forum, "topic" "article" "moderator" Table background color in several columns and the color of the "" "" button)
    $ Forumcolortwo = '# f7f7f7 ';
    // Color of the article list in the Forum ("Forum" author "last published" several colors)
    $ Threadcolorone = '# f1f3f5 ';
    // Article list color 2 in the Forum ("title" "reply" "popularity": colors of several columns and "online user" long table background color in the Forum)
    $ Threadcolortwo = '# f7f7f7'; // color 2 of the Article list in the Forum
    // When reading the topic, the background color is one (the background color of the left and right columns)
    $ Readcolorone = '# f7f7f7'; // the background color of the topic.
    $ Readcolortwo = '# f1f3f5'; // background color 2 when reading the topic
    $ Maincolor = '# f3f3f3'; // The alternate color of the Development Program (do not change it normally)

  • Change the style CSS effect and color to the header.htm of templete)

. Head {color: # ffffff; Background: # 6699cc; padding: 5px ;}
The color of the plate header defined in this definition is the line that shows the category plate name category moderator. Here the font color is white and the background color is # 6699cc
Padding is the distance between the words inside the cell and the surrounding border.
. F_one {Background: $ forumcolorone ;}
. F_two {Background: $ forumcolortwo ;}
. T_one {Background: $ threadcolorone ;}
. T_two {Background: $ threadcolortwo ;}
The color of the Forum section is defined here. Generally, there are two colors under control in the PHP file corresponding to data/style.
. Cbg {color: #000000; Background: # d1dceb;} This is the final reply from the forum below the Control Panel to the popular author.
. Smalltxt {font-family: tahoma, verdana; font-size: 8pt; color: #000000;} small font settings, such as the words in the reply Column
. Table {color: #000000 ;}
. Cfont {color: # ffffff;} some connections are placed in the head and black. You can use this CSS to make it white.
. Fnamecolor {color: #003366;} section name color
. Bold {font-weight: bold ;}
Defines a bold CSS class that can be called at any time.
. Headurl {color: # ffffff;} This function seems to be the same as cfont (just my feeling)
. Index_font {color: # 3a4f6c; Background-color: # d1dceb; font-weight: bold; padding: 5px ;}
Define my information and links to the column of online members
. Tpc_title {font-size: 12px; font-weight: The title text in bold1_read.htm is in bold and 12px size.
. Tpc_content {font-size: the text size in 12px1_read.htm is 12px.
. I _table {border: $ tablecolor 1px solid;} defines the border line color of the table in the corresponding data/style/***. php file to control the width of one pixel

3. images required for style Modification

Replace the image in./BBS/image/xxx with the image needed by style.

. /BBS/image/xxx directory slices are Forum-related, there is also a new type of lock.gif-certification Forum image logo.gif ---- Forum Logo new.gif ---- New post old.gif ---- No new post post.gif ---- post topic reply.gif ---- reply topic sigline.gif ---- signature separator vote.gif ---- post new voting File folder: small icons, attc.gif ---- accessories ---- essence 1 ---- essence 2 headtopic_1.gif ---- top 1 headtopic_2.gif ---- Top 2 ---- top 3 img.gif ---- image type multipage.gif ---- multi-page image music.gif ---- music image new.gif ---- New Image txt.gif -- -- Text image zip.gif ---- compression file image forumlogo folder: If you want to add a logo image in front of the forum, put it here, but set it in the background, the Group folder is not discussed here: small icon of the user group (visitors, administrator, Member, etc ..) 2.gif ---- tourist image 3.gif ---- administrator image 4.gif ---- total moderator image 5.gif ---- moderator image 6.gif ---- ordinary member image 16.gif ---- honorary member image index Folder: [[homepage] detailed pictures: birth.gif foruminfo.gif home.gif ---- homepage Forum image msg.gif ---- my information image online.gif ---- online user image pai.gif ---- friendship link image level folder: forum user-level picture 3.gif --- administrator 4.gif --- total moderator 5.gif --- moderator 8.gif --- visitor, default, verification Member, prohibited speaker, Newbie road 9.gif --- knight 10.gif --- knight 11.gif --- St. knight 12.gif --- ghost King 13.gif --- Fengyun messenger 13.gif --- Guangming messenger 15.gif --- Angel read folder: Small pictures (information, references, edits, etc.) during post reading ..) Profile.gif information message.gif text message email.gif email emailto.gif recommendation quote.gif reference edit.gif edit online.gif online icon offline icon rate.gif moderator rating icon postban.gif ban icon top.gif jump to the top icon thread Folder: small pictures of post status in Forum (that is, the status of top posts, hot posts, and locked topics) anc.gif ---- announcement image topicclose.gif ---- topic close image topichot.gif ---- popular topic image topiclock.gif ---- lock topic image topicnew.gif ---- New Topic image vote.gif ---- voting image votelock.gif ---- lock voting Image

In addition, if you need another image in the template, you can directly put it in the xxx directory, or create a folder name under the xxx directory, when used in the template, you can point the image path to the folder.

--------Additional instructions:

We recommend that you do not delete the official Wind Style after the Forum is installed. -- Based on PW program design, when you design your own style, such as read in your own style. htm template and read in the official wind style. there is no difference in the HTM template and the preparation is consistent, so you do not need to add read to your own style. htm template, and you can delete your read. htm template. In this way, when the program finds that your style does not contain read. when the HTM template is used, the wind-style read is automatically called. the HTM template is added to the official read. the HTM template is consistent. Other templates such as thread. htm are the same. The pw program did this specially. Benefits of doing so: if PW releases a new version, the official wind-style read. the HTM template has a small change, and because of your own style of read. the HTM template is the same as the official wind template and the preparation is consistent. Therefore, no read is set. when upgrading an HTM template, you do not need to worry about changes to the official template. The program will naturally call the wind-style read. htm template. At this time, your style is seamlessly upgraded to the new version.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.