Saturday, August 26, 2006

網誌模組修改分享 - toto版 II

這二天將Toto 模版做了二次調整,第一次調整是版面的部份,將首頁圖改成一張而非二張,並放大。這次主要是調整版面的顏色。

我將所有調整過的模版內容,完整貼上來,需要的人可以直接貼過去用。

版面完成後效果,請到KC家看。


1. 主要改的檔為style.css

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background-color: #330000;
}
.head {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(bgpicture.jpg);
background-repeat : no-repeat;
background-position : center;
border: #565 1px solid;
color: #330000;
font-family: monospace;
font-weight: bold;
margin: 1px;
padding: 200px 20px;
width:960px
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #330000;
padding: 15px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.panel {
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: dotted;
border-top-color: #44A2F2;
border-right-color: #44A2F2;
border-bottom-color: #44A2F2;
border-left-color: #44A2F2;
}
.catList {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color:#330000;
border: 1px solid #ffffa4;

color: #0033cc;
}
.info {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #26ff72;
}
.title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0033cc;
}
.article {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #ffffa4;
}
.catName {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #33000;
text-align: center;
font-weight: bold;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #26ff72;
text-decoration: underline;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ff6dff;
text-decoration: underline;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #26ff72;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000;
}
a.post:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #26ff72;
}
a.post:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ff6dff;
}
a.post:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
}
a.post:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CC3300;
}
a.headLink:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 30px;
color: #26ff72;
font-weight: bolder;
text-decoration: none;
}

a.headLink:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 30px;
color: #ff6dff;
font-weight: bolder;
text-decoration: none;
}
a.headLink:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 30px;
color: #ffffff;
font-weight: bolder;
text-decoration: none;
}
a.headLink:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 30px;
color: #ffffa4;
font-weight: bolder;
text-decoration: none;
}
.desc{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #0033cc;
font-weight: bolder;
}

.comments-body {
font-family:verdana, arial, sans-serif;
color:#dcffff;
font-size:12px;
font-weight:normal;
line-height:140%;
padding:10px;
}

.comments-post {
font-family:verdana, arial, sans-serif;
color:#26ff72;
font-size:10px;
font-weight:normal;
background:#330000;
}

.trackback-body {
font-family:verdana, arial, sans-serif;
color:#26ff72;
font-size:12px;
font-weight:normal;
line-height:140%;
padding:10px;
}

.trackback-url {
font-family:verdana, arial, sans-serif;
color:#0033cc;
font-size:12px;
font-weight:normal;
line-height:140%;
padding:10px;
border:1px dashed #CCC;
}

.trackback-post {
font-family:verdana, arial, sans-serif;
color:#0033cc;
font-size:10px;
font-weight:normal;
}

.comments-head{
font-family: georgia, verdana, arial, sans-serif;
font-size: 12px;
color: #ff6dff;
border:0px solid #999;
padding:5px;
font-weight:normal;
margin-top:10px;
}
.code {
font-family: "Courier New", Courier, mono;
font-size: 12px;
color: #26ff72;
background-color: #CCCCCC;
margin: 30px;
padding: 4px;
border: 1px solid #666666;
}

2. 為了改首頁的圖片,我還改了header.template 檔,程式碼如下:

<!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>
<title>{$blog->getBlog()}</title>
<meta http-equiv="Content-Type" content="text/html;charset={$locale->getCharset()}" />
<meta name="generator" content="{$version}" />
<meta http-equiv="Content-Language" content="{$locale->getLanguageId()}" />
<link rel="stylesheet" title="Default" href="{$url->getTemplateFile("styles.css")}" type="text/css" />
<link rel="alternate" type="text/xml" title="RSS 2.0" href="{$url->rssLink("rss20")}" />
<link rel="alternate" type="text/xml" title="RSS 1.0" href="{$url->rssLink("rss10")}" />
<link rel="alternate" type="text/xml" title="RSS 0.90" href="{$url->rssLink("rss090")}" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="{$url->rssLink("atom")}" />
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="5" class="head">&nbsp;&nbsp;<a href="{$url->blogLink()}" class="headLink">{$blog->getBlog()}</a>
</tr>

3. 最後再改最下方的模版版權欄位 footer.template (e-mail 可以改成你自己的mail,或不寫也成。主要是將為本分成二欄的底格,改成一欄,以對應首頁的大圖。

<tr>
<td colspan="2" class="footer">&copy;2004 TOTO.net &nbsp;&nbsp;&nbsp;Powered by <a href="http://www.plogworld.net" target="_blank">pLog</a> Original designed by Toto. </td></tr>

[回覆]

效果很棒耶。

我喜歡最下面的註記 "designed by Toto. Revised by KC",COOL!

Comment by Coffee Cat (08/26/2006 17:26)

哭哭哭哭哭.......我有問題拉 [回覆]

irene和阿姨都說看不到我的照片
我自己學校的辦公室
也是一堆叉燒包

可是他們看J叔叔都ok
到底怎麼了???

哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭
哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭哭

Comment by 八妹 (09/01/2006 08:13)

To: 八妹 [回覆]

關於叉燒包一事,背包公園曾有相關討論,在這裡http://www.backpackers.com.tw/blog/post/613/5227
可以去試一下看問題是否解決。

Comment by KC (09/01/2006 08:46)

[回覆]

效果很棒耶。

Comment by paysitespy (10/22/2008 13:48)

發表迴響

標題

內容

暱稱

電子郵件

個人網頁

輸入驗證碼 authimage