樣版版面配置
樣版CSS-說明這個樣版說明是設置用來加入自己的說明。用來記下你個人的資訊。這些說明是隱藏的，只有在CSS檔案裡才看的到，也是非必要的。你不一定要在CSS檔案裡加入這些資訊，但這麼做也不錯，可以讓你很快的識別這個CSS檔案。拷貝下面的檔案貼到
template_css.css這個檔案裡。
/**
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
然後我們增加以下重要的CSS屬性，看以下的
灰色部分，設定整體的字體、字型大小和顏色。這個屬性直接放在我們的個人說明底下，如以下所示。複製到
template_css.css檔案內。
/**
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
body {}tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}
<body> 和 </html>標籤
接下來我們增加
<body> </body> 和
</html> 標籤複製到
index.php這個檔案裡。
<?php
/**
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
echo "<link rel=\"stylesheet\"
href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\"
type=\"text/css\"/>" ; ?>
</head>
<body></body>
</html>
主要的容器(Main Container)
這個以
div標籤設定的主要容器(
Main Container)，會把所有的版面配置包含進去，讓我們可以控制整個間隔及邊界，以達到整個樣版完美的平衡比例。複製到
index.php這個檔案裡。
<?php
/**
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
echo "<link rel=\"stylesheet\"
href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\"
type=\"text/css\"/>" ; ?>
</head>
<body>
<div id="main_container"></div>
</body>
</html>
主要容器的CSS
現在增加主要容器的(
Main Container)屬性複製到
template_css.css檔案內
/**
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/ body {}tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}
/********** Main Container **********/
#main_container {
width : 100%;
display : table; /* must put this in for FireFox. */
text-align : left;
margin : auto;
border : 1px solid #cccccc;
}
