XOOPS China - 如何制作 xoops 主题风格 Creating a theme [技术论坛

XOOPS China 讨论区 > XOOPS Theme (主题) > 主题综合 > 如何制作 xoops 主题风格 Creating a theme

正在浏览： 1 名游客

到底部

前一个主题

下一个主题 [无发表权] 请登录或者注册

(1) 2 3 »

D.J.

如何制作 xoops 主题风格 Creating a theme

网站管理员

注册日期:
2004/6/25 19:16

所属群组：
网站管理员
注册会员
Dev+Hack

帖子: 5950 | 精华: 10

等级： 54; EXP： 77
HP： 806 / 1344
MP： 1983 / 24424

摘自xoops wiki
有时间再汉化

Creating a theme
NOTE: This sub-section in the Xoops Manual is currently being updated by SkaagArgonius ([email protected]).
I would like to urge you to actively participate in this Wiki, instead of mailing me changes/updates/corrections.
In the rare case where you don't want to touch the wiki, but would like to have something changed anyway, please feel free to contact me by email (given above).

If you are a beginner with Xoops Themes, Please start here: Overview

6. XOOPS theme developer's guide
6.1. Overview
6.2. Themes vs. templates
6.3. Creating a theme

6.3.1. XOOPS CSS style files

6.3.1.1. CSS Overview
*This section is missing.*
6.3.1.2. Common CSS classes
6.3.1.3. Default Theme's CSS With Comments

6.4. Creating a template set

I think something needs to be inserted before the current 6.3.1 (and renumber the existing sections) that tells theme developers that they should include a proper DTD in their theme. I've found some themes that don't have one cause Interenet Explorer to render incorrectly. Suggested text:

6.3.1. XOOPS DTD
The Document Type Definition is an XML element at the head of your web page that tells the browser what type of code follows. The core XOOPS modules produce Transitional XHTML code. The DTD included in the default theme is:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

You should include at least this DOCTYPE in your theme. Not including a proper DTD can cause browsers, especially Internet Explorer, to render pages improperly.

2004/9/3 3:11

_________________
XOOPS Project -- |自由|开源|共享|

工具箱

短消息

PDF

书签

打印

D.J.

Re: 如何制作 xoops 主题风格 Creating a theme

网站管理员

注册日期:
2004/6/25 19:16

所属群组：
网站管理员
注册会员
Dev+Hack

帖子: 5950 | 精华: 10

等级： 54; EXP： 77
HP： 806 / 1344
MP： 1983 / 24424

Themes vs. Templates

We will attempt to provide a general description of the way XOOPS uses theme files and template files to render a site.

Why are we all confused?

In my opinion, the main source of confusion for people stems from the gap between these two things:

How people think it SHOULD work
How it actually works

Number 2 is a given and will probably not change anytime soon (those of you following on the development of Xoops 2.x know that the approach to templates & themes has changed several times and is now rather stable).

Number 1 however, varies greatly! This is mostly due to the fact that we all come from different backgrounds; Some come from phpNuke, PostNuke, and the likes. Some others, from systems like Typo3? and other 'full suites'. And then, some of you come from plain php development, where everything is done by hand, from scratch.

The second problem is the terms used in Xoops 2.x. Templates should be called "Module/Block Templates", so that they will not be confused with Theme templates, which are a different thing altogether (As indeed is shown below).

The big picture

When you first try to play with templates and themes, you notice an obvious thing:

Every Template set consists of many files! (Last time I checked, somewhere around 36 templates for a basic system, without any modules installed)
A theme has a relatively much lower number of files (The default theme has less than 10 files!)

Some of you are probably already saying 'ah!' at this stage.
To those who aren't yet, I will give a short example.

A theme block that displays a list of the last 10 people who registered will always display 3 things: A title at the top of the block, nickname of the person who registered, and the date they registered. Now let's not forget that we want to separate 'design' from 'content', right?

For this, we would create two files for this single block:

A template that defines the structure of this block, which basically is a table of nicknames + dates, line after line, until 10 rows are generated.
A file that takes the information generated in the previous step, and sticks it into some 'design'. This probably means putting the title of the block at the top, and beneath that, putting the list generated.

So in this example, number 1 is the block template, and number 2 is the theme. The block template is inserted *into* the theme's block code.

At this point the conclusion should be quite clear:
Templates (Block/Module templates) control the way data is displayed, while theme templates control how the data will look (most probably by assigning the various elements a class name, which would then be defined in the CSS).

And more details

Using the terms used in Xoops 2.x:
A "Template" is a piece of html code that uses pre-set variables (provided by a specific module) to expose data to the site.
A "Theme" is a special template (or set of templates) that controls the style and graphics of a Xoops site, by taking the result of the first template (Data template), and sticking it where it's supposed to be according to the Theme. This means, again, that we have two templates: A Data Template, and a Theme Template.

The Data Template is never used directly, but rather always displayed with the help of a Theme Template.

This means that unless you are going to make changes in the way modules display their data in blocks, You will only want to play with the theme templates, and not with the data templates. I personally feel that Xoops 2.x could have used slightly friendlier names, to eliminate the confusion for potential theme developers.

Additional explanations from the xoops.org forums:

from Ackbarr: Templates control the layout of a module's content, whereas themes control the overall appearance of the site.

from Herko: To be more exact then ackbarr, the theme is uploaded manually to the theme folder in your xoops root dir. To change the styles and look of your whole site, download the standard theme, and edit it offline to fit your taste. Then upload the theme files to the themes folder (naming the folderlike: themes/humbrietheme/theme.html etc.).

Templates can be edited through the template manager in your system admin menu. Clone the default template set, and edit the cloned set to fit the look and feel of your site's taste. The tempates can be edited per module.

If you are trying to edit the theme.html in your themes folder and nothing seems to be changed, be sure that you set "Update module template .html files from themes/your theme/templates directory?" to "YES" in General Settings!!

2004/9/3 3:13

_________________
XOOPS Project -- |自由|开源|共享|

工具箱

短消息

PDF

书签

打印

D.J.

Re: 如何制作 xoops 主题风格 Creating a theme

网站管理员

注册日期:
2004/6/25 19:16

所属群组：
网站管理员
注册会员
Dev+Hack

帖子: 5950 | 精华: 10

等级： 54; EXP： 77
HP： 806 / 1344
MP： 1983 / 24424

XOOPS theme developer's guide overview

As with most modern sites, the Xoops default theme (which is now powered by Smarty) has a 3 tier model:

Module/Block Template Snippets (Powered by the Smarty Engine with content tags into which content is generated)
Design Templates - controls design & general structure (called a 'grid' by designers and such)
CSS File - This is where the actual design is....

Notice how I call them "Template Snippets" because you almost never create a single template for a complete page, but rather small pieces of html code, which are "connected" to each other like Lego blocks, which means it is now possible to create complex and interesting site structures (Although it is generally recommended to keep a simple layout, for easy maintenance).

A good example is the way blocks have their own template. The various blocks on the site are generated with their specific title and content, using the block template, and the result is in turn generated into another template which is higher in the hierarchy. Of course this method means you can not have a different design per block - all the block templates in your site will use the same theme block template, but perhaps this will be made possible in a future version of Xoops.

To sum things up a bit for this overview, if we were to look at the order in which templates are processed, this is what we would see:

Get a list of blocks that need to be displayed on this page
Generate the html for every block, and keep the buffers
Stick this html inside the theme block template
Concatenate all the buffers for the left side blocks into one single buffer
Concatenate all the buffers for the center blocks into one single buffer
Concatenate all the buffers for the right side blocks into one single buffer
Render the main theme template of the site, passing the buffers previously prepared, into the template

When you understand how this system works, it is easy to see how Xoops caches blocks by simply saving the result of the template rendering in a file (the buffer containing the html result from rendering a smarty template with variables from xoops), instead of pulling the data from your db for every page access. This mechanism dramatically improves the system performance, and lowers the cpu usage, resulting in fast page loads.

What is Smarty?
Smarty is a template engine for PHP. More specifically, it facilitates a manageable way to separate application logic and content from its presentation. This is best described in a situation where the application programmer and the template designer play different roles, or in most cases are not the same person.

For example, let's say you are creating a web page that is displaying a newspaper article. The article headline, tagline, author and body are content elements, they contain no information about how they will be presented. They are passed into Smarty by the application, then the template designer edits the templates and uses a combination of HTML tags and template tags to format the presentation of these elements (HTML tables, background colors, font sizes, style sheets, etc.) One day the programmer needs to change the way the article content is retrieved (a change in application logic.) This change does not affect the template designer, the content will still arrive in the template exactly the same. Likewise, if the template designer wants to completely redesign the templates, this requires no changes to the application logic. Therefore, the programmer can make changes to the application logic without the need to restructure templates, and the template designer can make changes to templates without breaking application logic.

Now for a short word on what Smarty does NOT do. Smarty does not attempt to completely separate logic from the templates. There is no problem with logic in your templates under the condition that this logic is strictly for presentation. A word of advice: keep application logic out of the templates, and presentation logic out of the application. This will most definately keep things manageable and scalable for the foreseeable future.

One of the unique aspects about Smarty is the template compiling. This means Smarty reads the template files and creates PHP scripts from them. Once they are created, they are executed from then on. Therefore there is no costly template file parsing for each request, and each template can take full advantage of PHP compiler cache solutions such as Zend Accelerator (http:www.zend.com) or PHP Accelerator (http:www.php-accelerator.co.uk).

Some of Smarty's features:

* It is extremely fast.
* It is efficient since the PHP parser does the dirty work.
* No template parsing overhead, only compiles once.
* It is smart about recompiling only the template files that have changed.
* You can make custom functions and custom variable modifiers, so the template language is extremely extensible.
* Configurable template delimiter tag syntax, so you can use {}, {{}}, , etc.
* The if/elseif/else/endif constructs are passed to the PHP parser, so the {if ...} expression syntax can be as simple or as complex as you like.
* Unlimited nesting of sections, ifs, etc. allowed.
* It is possible to embed PHP code right in your template files, although this may not be needed (nor recommended) since the engine is so customizable.
* Built-in caching support
* Arbitrary template sources
* Custom cache handling functions
* Plugin architecture

2004/9/3 3:22

_________________
XOOPS Project -- |自由|开源|共享|

工具箱

短消息

PDF

书签

打印

D.J.

Re: 如何制作 xoops 主题风格 Creating a theme

网站管理员

注册日期:
2004/6/25 19:16

所属群组：
网站管理员
注册会员
Dev+Hack

帖子: 5950 | 精华: 10

等级： 54; EXP： 77
HP： 806 / 1344
MP： 1983 / 24424

Default Theme's CSS With Comments

/* This controls the default settings on a page */
body {color: black; background: white; margin: 0px; padding: 0px;}

/* The default settings for ALL tables on a site, unless explicity defined for a particular table */
table {width: 100%; margin: 5px; padding: 5px; font-size: small}
table td {padding: 0px; border-width: 0px; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;}

/* This controls the default link settings & link mouseover/hover settings */
a {color: #666666; text-decoration: none; font-weight: bold; background-color: transparent;}
a:hover {color: #ff6600;}

/* Controls HTML tags for headings #1-5, unordered list and items in the list */
h1 {4}
h2 {3}
h3 {9}
h4 {2}
h5 {1}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #2F5376}

/* Selector for a form button */

input.formButton {}

/* The following appear to primarily apply to the NEWS stories, */
/* though they may be found in other areas as well */
/*
BEGIN NEWS SECTION DEALING PRIMARILY WITH NEWS
*/

/* The border around news stories */
.item {border: 1px solid #cccccc;}

/* The BG color for the cell for news story titles */
.itemHead {padding: 3px; background-color: #2F5376; color: #FFFFFF;}

/* The BG color for the area right under a news title (post by so-and-so) */
.itemInfo {text-align: right; padding: 3px; background-color: #efefef;}

/* The text in the story title EXCEPT the colon between the topic and the title */
.itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;}

/* The text "exta6sy" just preceding the posters name */
.itemPoster {font-size: 90%; font-style:italic;}

/* The text On $date $time immediately after the posters name */
.itemPostDate {font-size: 90%; font-style:italic;}

/* The xx # reads for a story, but NOT the parenthesis surrounding the total */
.itemStats {font-size: 90%; font-style:italic;}

/* The text of the story itself */
.itemBody {padding-left: 5px;}

/* XOOPS DEVELOPER HELP NEEDED - This seems to be the same as .itemBody above. What is the difference??? */
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}

/* Makes the first letter in a story bold */
.itemText:first-letter {font-size: 133%; font-weight: bold;}

/* The foooter of a new story (read more, etc.) */
.itemFoot {text-align: right; padding: 3px; background-color: #efefef;}

/* The [edit | delete] section of a news footer */
.itemAdminLink {font-size: 90%;}

/* The | xx# bytes more | section of the news footer */
.itemPermaLink {font-size: 90%;}

/*
END SECTION DEALING PRIMARILY WITH NEWS
*/

/* Controls the settings for a table header */

th {background-color: #2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}

/* The area at the top of the page where the logo and advertising banner are */

td#headerbanner {width: 100%; background-color: #2F5376; vertical-align: middle; text-align:center;}

/* The whitish-grey bar on the default install right underneath the top section/header */

td#headerbar {border-bottom: 1px solid #dddddd; background-image: url(hbar.gif);}

/*
BEGIN SECTION DEALING WITH THE THREE COLUMNS
*/

/* controls the settings for blocks on the LEFT side of the page */
td#leftcolumn {width: 170px; border-right: 1px solid #cccccc; font-size:12px;}

/* controls the settings for the table headers on the left column */
td#leftcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}

/* controls the settings for the block titles on the left column */
td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}

/* controls the settings for the blocks' content on the left column */
td#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;}

/* controls the settings for block in the CENTER section of the page */
td#centercolumn {font-size: 12px;}

/* controls the settings for the table headers on the center column */
td#centercolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}

/* Controls the settings for "center-aligned CENTER blocks" on the page */
td#centerCcolumn {padding: 0px 3px 1px 3px;}
/* The title for center center blocks */
td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;}
/* The content for center center blocks */
td#centerCcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;}

/* Controls the settings for "left-aligned CENTER blocks" on the page */
td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}

/* The title for left-aligned center blocks*/
td#centerLcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}

/* The content for left-aligned center blocks */
td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px; line-height: 120%;}

/* Controls the settings for "right-aligned CENTER blocks on the page */
td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}

/* The title for right-aligned center blocks */
td#centerRcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
/* The content area for left-aligned center blocks */
td#centerRcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;}

/* Controls everything defined as content. for example in news it controls: */
/* The article text, posted by, date, time & number of reads Including the parenthesis */
/* the [ | ] brackets around the admin edit section and also the disclaimer: "the comments are */
/* owned by the poster. We aren't responsible for their content" on the bottom of a news comments page */
/* also a ton of text on the forum page...probably a ton of stuff everywhere...be careful with this one */

div#content {text-align: left; padding: 8px;}

/* settings for blocks in the RIGHT column on a page*/
td#rightcolumn {width: 170px; border-left: 1px solid #cccccc; font-size:12px;}

/* Controls the table headers for the right columns.*/
td#rightcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}

/* Controls the right column blocks' titles */
td#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}

/* Controls the right column blocks' content area */
td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;}

/* END SECTION DEALING WITH THREE COLUMNS */

/* settings for the footerbar where the xoops copyright notice is */
tr#footerbar {text-align:center; background-image: url(hbar.gif);}

/* settings for the Main Menu */
td#mainmenu a {background-color: #e6e6e6; display: block; margin: 0px padding: 4px;}

/* What happens on a mouse hover on the main menu */
td#mainmenu a:hover {background-color: #ffffff;}

/* The top cell on the main menu (typically HOME). This way you can give the top cell a different border or */
/* other appearance. Useful for drawing a box around the entire menu, for instance. */
td#mainmenu a.menuTop {padding-left: 3px; border-top: 1px solid silver; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

/* The remaining entries in the main menu other than the top most defined one line above */
td#mainmenu a.menuMain {padding-left: 3px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

/* The settings for submenu items that open when u are in a particular module. For example */
/* "Submit news" and "Archives" when you are on the news module */
td#mainmenu a.menuSub {padding-left: 9px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

/* settings for the User Menu */
td#usermenu a {background-color: #e6e6e6; display: block; margin: 0px padding: 4px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

/* What happens on a mouse hover on the user menu */
td#usermenu a:hover {background-color: #ffffff;}

/* The top most entry on the user menu */
td#usermenu a.menuTop {border-top: 1px solid silver;}

/* The settings for when a user has a private message */
td#usermenu a.highlight {background-color: #fcc;}

/* Styles used to draw homogeneous tables */
/* Described in a seperate page in the xoops.org wiki */
.outer {border: 1px solid silver;}
.head {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
.even {background-color: #dee3e7; padding: 5px;}
.odd {background-color: #E9E9E9; padding: 5px;}
.foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color: #dee3e7; padding: 5px;}
tr.odd td {background-color: #E9E9E9; padding: 5px;}

/* NOT INCLUDED IN DEFAULT */
/* customization to add special color to forum title head. requires editing newbb_index.html template as well */
.outerhead{}
.outerhead a{font-size: 12px; color : #FFFFFF;}
.outerhead a:hover{}

/* NOT SURE Special system messages MAYBE */
/* I leave the defaults */
div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}

/* Settings for when you insert code in a forum post */
div.xoopsCode { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
/* Settings for when you quote during a forum post */
div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}

/* Styles for the commenting system */
.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0px}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}

2004/9/3 3:24

_________________
XOOPS Project -- |自由|开源|共享|

工具箱

短消息

PDF

书签

打印

D.J.

Re: 如何制作 xoops 主题风格 Creating a theme

网站管理员

注册日期:
2004/6/25 19:16

所属群组：
网站管理员
注册会员
Dev+Hack

帖子: 5950 | 精华: 10

等级： 54; EXP： 77
HP： 806 / 1344
MP： 1983 / 24424

Table classes

The following classes are commonly used in XOOPS core files to generate nice looking HTML tables and forms.
These are now used as replacements for .bg1-5 and .fg1-5 classes in XOOPS 1.x theme files:

.outer - defines the outer rim/border of a table, usually assigned to <table> tags
th - defines the appearance of table caption cells
.head - defines the appearance of table sub-caption cells, assigned to <tr> or <td> tags
.even/.odd - used to render contrast between normal cells, assigned to <tr> or <td> tags
.foot - defines the appearance of table footer cells, assigned to <tr> or <td> tags

Example:

Below is an example of how the classes are defined and used with HTML in XOOPS core files.

CSS

/* define some default settings */
table {width: 100%; margin: 0; padding: 0; font-size: small}
table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;}

th {background-color: #2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}
.outer {border: 1px solid silver;}
.head {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
.even {background-color: #dee3e7; padding: 5px;}
.odd {background-color: #E9E9E9; padding: 5px;}
.foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;}

/* we do this because some browsers will not render as expected if
the above classes are assigned to <tr> tags */
tr.head td {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color: #dee3e7; padding: 5px;}
tr.odd td {background-color: #E9E9E9; padding: 5px;}
tr.foot td {background-color: #c2cdd6; padding: 5px; font-weight: bold;}

HTML1

<table class="outer">
<tr><th>th</th></tr>
<tr><td class="head">.head</td></tr>
<tr><td class="even">.even</td></tr>
<tr><td class="odd">.odd</td></tr>
<tr><td class="even">.even</td></tr>
<tr><td class="odd">.odd</td></tr>
<tr><td class="foot">.foot</td></tr>
</table>

will render

HTML2

<table class="outer">
<tr><th colspan="2">th</th></tr>
<tr><td class="head">.head</td><td class="even">.even</td></tr>
<tr><td class="head">.head</td><td class="odd">.odd</td></tr>
<tr><td class="head">.head</td><td class="even">.even</td></tr>
<tr><td class="head">.head</td><td class="odd">.odd</td></tr>
</table>

will render

2004/9/3 3:26

_________________
XOOPS Project -- |自由|开源|共享|

工具箱

短消息

PDF

书签

打印

D.J.

Re: 如何制作 xoops 主题风格 Creating a theme

网站管理员

注册日期:
2004/6/25 19:16

所属群组：
网站管理员
注册会员
Dev+Hack

帖子: 5950 | 精华: 10

等级： 54; EXP： 77
HP： 806 / 1344
MP： 1983 / 24424

Theme KickStart Guide

This is a HowTo? for creating your own theme.

Edit the default theme

STEP ONE

Copy the default theme folder (themes\default) and rename it to e.g. "cool". Now you should have a new folder called "cool" with the same files as the default theme.

Open the theme.html in your "cool" folder and search for the following string

<{include file="default/theme_blockleft.html"}>

You see, that you have to edit the "default" to "cool" to reflect your new folder. After the changes the above string should look like this.

<{include file="cool/theme_blockleft.html"}>

There were a few other includes, where you have to change the directory in this file!

STEP TWO

Now you have to clone the default templates, because the default templates can't be edited. Go to Administration > System Admin > Templates within your Xoops and clone the default templates. You should give the new template set the same name as you named your theme folder, in this case "cool".

Be careful what you do here. Incorrectly editting or modifying these templates can have disastrous results.

STEP THREE

Go to Administration > System Admin > Preferences > General Settings. Select "cool" as Default theme and as Default template set. Set "Update module template .html files from themes/your theme/templates directory?" to YES. This setting is important because it is the only way that Xoops will reload the 'new' css and html code, so you can 'test' your changes 'on the fly'.

You may modify and retest theme changes (STEP 4 below) as frequently as you find it helpful. Once you are satisfied with your results be certain to reset "Update module template .html files from themes/your theme/templates directory?" to NO.

Now your complete Xoops Installation uses your "cool" theme and no longer the "default" theme. You can edit this theme now to fit your needs. When anything goes wrong, you always have the possibility to switch back to the default theme!

STEP FOUR

This is the editing phase! Short description of the files

theme.html - controls the main layout of your website
theme_blockleft.html - controls the layout of the left blocks
theme_blockright.html - controls the layout of the right blocks
theme_blockcenter_c.html - controls the layout of the centercenter blocks
theme_blockcenter_l.html - controls the layout of the centerleft blocks
theme_blockcenter_r.html - controls the layout of the centerright blocks
style.css - stylesheet for your theme
styleMAC.css - some settings only for MAC's
styleNN.css - some settings only for Netscape

Within these files you can define what your website should look like! The appearance of the modules and every single block can be controlled through the templates (if they use templates!).

Designing a completely new theme

Normally a designer creates his website layout in graphic programme. After this designing process he creates a HTML site out of it! Important for this is to remember the 3-column layout of Xoops!

NOTE: If you are visually impaired, like some of us, and you have access to a tool like FrontPage, you may create layouts there. HOWEVER, be careful! The code generated by wysiwyg editers like FrontPage may not work 'perfectly' and will almost certainly require some clean-up before becoming fully operational.

lc = leftcolumn
cc = centercolumn
rc = rightcolumn

After you have your 3-column HTML template you only have to copy the important parts of the default/theme.html into your template. The first thing is the header stuff.

After this you copy the following code in your leftcolumn:


<{foreach item=block from=$xoops_lblocks}>
<{include file="default/theme_blockleft.html"}>
<{/foreach}>


The <td></td> where you put in this code should get the id="leftcolumn" as in the default theme. This is needed for the css definitions.

This is the code for your centercolumn:


<{if $xoops_showcblock == 1}>

<table cellspacing="0">
<tr>
<td id="centerCcolumn" colspan="2">


<{foreach item=block from=$xoops_ccblocks}>
<{include file="default/theme_blockcenter_c.html"}>
<{/foreach}>


</td>
</tr>
<tr>
<td id="centerLcolumn">


<{foreach item=block from=$xoops_clblocks}>
<{include file="default/theme_blockcenter_l.html"}>
<{/foreach}>


</td><td id="centerRcolumn">


<{foreach item=block from=$xoops_crblocks}>
<{include file="default/theme_blockcenter_r.html"}>
<{/foreach}>


</td>
</tr>
</table>

<{/if}>


<div id="content">
<{$xoops_contents}>
</div>

The <td></td> where you put in this code should get the id="centercolumn". In the right column you have to copy this code:


<{foreach item=block from=$xoops_rblocks}>
<{include file="default/theme_blockright.html"}>
<{/foreach}>


The <td></td> where you put in this code should get the id="rightcolumn". After this you have to correct the path to your images you have included in your theme.html. If every images is located directly in your themes folder, the <img> tag should look like this.

<img src="<{$xoops_imageurl}>logo.gif">

Otherwise the images won't display correctly when the theme is parsed through Xoops.

Remember this is only the basic stuff! You can move around the columns etc. as you like for your theme.

2004/9/3 3:28

_________________
XOOPS Project -- |自由|开源|共享|

工具箱

短消息

PDF

书签

打印

CN-B

Re: 如何制作 xoops 主题风格 Creating a theme

新进会员