February 21,2007

[翻譯]Joomla! 1.0.12版及較舊版本 樣板教學 8of9

原文: Hazman  
出處 : xtremeOpenSource


目前的進度
到目前我們有個資料夾叫simple,同時也是樣版的名稱,在這個資料夾裏我們應該有一個叫index.php的檔案,我們應該還有兩個資料夾,一個叫css,另一個叫images。記得這個images這個資料夾是空的,因為我們在這個教程裡不會使用到任何圖片。而在css資料夾裡我們有template_css.css這個檔案。

其他Joomla!的CSS屬性
為了要適當、完整的呈現Joomla!樣版的外觀,我們必須增加以下的css屬性的。
在下面找到灰底粗字的部份,複製貼上到template_css.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;
}

/********** Header **********/
#header {
width : 100%;
height : 80px;
text-align : center;
margin-bottom : 15px;
border : 1px solid #cccccc;
}

/********** Footer **********/
#footer {
width : 100%;
height : 20px;
text-align : center;
}

/********** Pathway **********/
.pathway {
font-family : Verdana, Helvetica, Arial, sans-serif;
font-size : 9px;
padding : 0px;
}

a.pathway:link, a.pathway:visited {
color : #000000;
font-weight : normal;
}

a.pathway:hover {
color : #3366cc;
font-weight : normal;
text-decoration : none;
}

/############### ADDITIONAL JOOMLA! CSS CLASSES ###############/

/********** MainLevel Links **********/
a.mainlevel:link, a.mainlevel:visited {
color : #000000;
font-size : 10px;
font-weight : normal;
text-decoration : none; }

a.mainlevel:hover {
color : #0000cc;
font-weight : normal;
text-decoration : underline;
}

/********** SubLevel Links **********/
a.sublevel:link, a.sublevel:visited {
padding-left : 1px;
vertical-align : middle;
font-size : 11px;
color : #000000;
text-align : left;
}

a.sublevel:hover {
color : #666666;
text-decoration : none;
}

/********** MainMenu Links **********/
a.mainmenu:link, a.mainmenu:visited {
color : #000080;
font-family : Verdana, Helvetica, Arial, sans-serif;
font-weight : none;
}

a.mainmenu:hover {
color : #000080;
text-decoration : underline;
}

/********** Other Links **********/
a:link, a:visited {
color : #cc0000;
text-decoration : none;
}

a:hover {
color : #0099ff;
font-weight : none;
text-decoration : underline;
}

/********** Modules **********/
table.moduletable {
width : 150px;
margin-bottom : 15px;
border : 1px solid #cccccc;
}

table.moduletable th {
width : 100%;
font-size : 12px;
font-weight : bold;
color : #0000cc;
text-align : left;
text-indent : 5px;
letter-spacing : 1px;
margin : 5px 5px 20px 5px;
}

table.moduletable li {
}

table.moduletable ul {
padding : 0px;
}

table.moduletable td {
padding : 2px;
}

/********** Poll **********/
.poll {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #666666;
line-height : 14px;
}

.pollstableborder {
border : 1px solid;
padding : 1px;
}

/*############### CONTENT ###############*/

/***** Header for contentpaneopen *****/
.contentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
color : #000000;
text-align : left;
padding-top : 10px;
}

/***** Home, Mambo License, Blog, Lower Content for Advanced Search *****/
.contentpaneopen {
width : 100%;
}

/***** Title for Blog, News Feeds, Wrapper, Links, Advanced Search, Contact Us *****/
.componentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
color : #000000;
text-align : left;
padding-top : 10px;
}

/***** Top Content for Getting Started, FAQs, News Feeds, Links *****/
.contentdescription {
padding: 0px;
}

/***** Lower Content for Getting Started, FAQs, News Feeds, Wrapper, Links, Contact Us *****/
.contentpane {
padding-top : 10px;
}

/********** Inner Content **********/
.sectiontableheader {
background-color : #CCCCCC;
color : #7B8DA1;
font-weight : bold;
}

.sectiontableentry1 {
background-color : #F0F0F0;
}

.sectiontableentry2 {
background-color : #E0E0E0;
}

/********** Rating **********/
.content_rating {
padding : 5px;
}

.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #3366C0;
text-decoration : none;
font-weight : bold;
}

.smalldark {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
text-decoration : none;
font-weight : normal;
}

.createdate {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #999999;
text-align : left;
}

.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 10px;
font-weight : bold;
background-color : #F0F0F0;
color : #990000;
border : 1px solid #CCCCCC;
}

.inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-color : #F0F0F0;
border : 1px solid #CCCCCC;
}

/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #000000;
text-align : left;
text-decoration : none;
}

a.contentpagetitle:hover {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
text-align : left;
color : #7B8DA1;
text-decoration : underline;
font-weight : bold;
}

a.category:link, a.category:visited {
color : #333333;
font-weight : bold;
font-size : 11px;
}

a.category:hover {
color : #7B8DA1;
}

/* Styles for dhtml tabbed-pages */
.ontab {
background-color : #ffae00;
border-left : outset 2px #ff9900;
border-right : outset 2px #808080;
border-top : outset 2px #ff9900;
border-bottom : solid 1px #d5d5d5;
text-align : center;
/* Cannot use hand as its not a W3C CSS validator */
/* cursor: hand;*/
font-weight : bold;
color : #FFFFFF;
}

.offtab {
background-color : #e5e5e5;
border-left : outset 2px #E0E0E0;
border-right : outset 2px #E0E0E0;
border-top : outset 2px #E0E0E0;
border-bottom : solid 1px #d5d5d5;
text-align : center;
/* Cannot use hand as its not a W3C CSS validator */
/* cursor: hand;*/
font-weight : normal;
}

.tabpadding {
}

.tabheading {
background-color : #ffae00;
text-align : left;
}

.pagetext {
visibility : hidden;
display : none;
position : relative;
top : 0;
}

/* for modifying {moscode} output. Don't set the colour! */
.moscode {
background-color : #f0f0f0;
}

.code {
background-color : #f0f0f0;
border : 1px solid #FFF;
}

/* Text passed with mosmsg url parameter */
.message {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight : bold;
font-size : 10pt;
color : #ff6600;
text-align : center;
}

/* Javascript Back button */
.back_button {
text-align : center;
margin-top : 40px;
}

table.contenttoc {
color : #333300;
background-color : #ffffff;
border : 1px solid #333;
}

table.contenttoc td {
font-size : 8pt;
font-weight : normal;
text-align : left;
}

ul {
margin : 0;
padding : 5px;
list-style : none;
}

li {
line-height : 15px;
padding-left : 15px;
padding-top : 1px;
background-image : url(../images/arrow.png);
background-repeat : no-repeat;
background-position : 0px 5px;
}

table.searchinto {
width : 100%;
}

table.searchintro td {
background-color : #293C43;
color : #ffffff;
font-weight : bold;
}


Posted by waking_life at 樂多Roodo! │22:33 │回應(0)引用(0)樣式表心法
樂多分類:網路/3C 共同主題:Joomla! 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/2952891