[Blog] 樣式一 Brown-paper
|
[Blog] 樣式一 Brown-paper
分類標籤: 網頁設計與語法（HTML/CSS）
|
June 24, 2011 10:16PM 發表文章數: 1,228 |
樣式一 Brown-paper
下載網址
http://www.serendipity-templates.org/template/15-brown-paper/
==========================================================
Serendipity templates
Brown-paper
為較簡單的Blog樣式，為入門了解html架構與css設計樣式的範例
首先了解基本的檔案內容：
1.主要以index.tpl 作為部落格基本架構設定，為基本的Layout編排架構設定
2.entries.tpl：以文章為單位，不同形式的設定，內容較為複雜
3.style.css：設計樣式
4.info.txt：版權聲明
5.preview.png 預覽圖片
==========================================================
[color=#CC0000]index.tpl[/color]
從<body>開始讀
<body>
[color=#999999]{else}
{serendipity_hookPlugin hook="frontend_header"}
{/if}
{if $is_raw_mode != true}[/color]
<div class="lc"> /*left center 從左中開始，依序右中 上中 下中 拉布展開的方式拉開，接著再順序拉角落*/
<div class="rc"> /*right center*/
<div class="tc"> /*top center*/
<div class="bc"> /*bottom center*/
<div class="bl"> /*bottom left*/
<div class="br"> /*bottom right*/
<div class="tl"> /*top left*/
<div class="tr"> /*top right*/
<div id="serendipity_banner"> /*標題列*/
<h1><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
/*主標題*/
<h2><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></h2>
/*副標題*/
</div>
<table id="mainpane"> /*css樣式為mainpane的表格開始，為主要的內容部分*/
<tr>
{if $leftSidebarElements > 0}
<td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
/*css樣式為serendipityLeftSideBar的表格開始，為主要的內容部分*/
{/if}
<td id="content" valign="top">{$CONTENT}</td>
{if $rightSidebarElements > 0}
<td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
{/if}
</tr>
</table> /*表格結束*/
</div></div></div></div></div></div></div></div> /*DIV結尾*/
<div class="creditfooter"> /*footer開始*/
Parts of this serendipity template are by <a href="http://abdussamad.5gigs.com" >Abdussamad Abdurrazzaq</a>
</div> /*footer結束*/
{/if}
{$raw_data}
{serendipity_hookPlugin hook="frontend_footer"}
{if $is_embedded != true}
</body>
==========================================================
[color=#CC0000]style.css[/color]
.bl {background: url("{TEMPLATE_PATH}img/bl.jpg") 0 100% no-repeat; }
.br {background: url("{TEMPLATE_PATH}img/br.jpg") 100% 100% no-repeat;}
.tl {background: url("{TEMPLATE_PATH}img/tl.jpg") 0 0 no-repeat;}
.tr {background: url("{TEMPLATE_PATH}img/tr.jpg") 100% 0 no-repeat; padding:55px;color:#000000;}
.tc{background: url("{TEMPLATE_PATH}img/tc.jpg") 0% 0px repeat-x;}
.bc{ background: url("{TEMPLATE_PATH}img/bc.jpg") 0% 100% repeat-x; }
.lc{ background: url("{TEMPLATE_PATH}img/lc.jpg") 0% 0% repeat-y #FFEAB1;margin:auto;
width: auto;}
.rc{ background: url("{TEMPLATE_PATH}img/rc.jpg") 100% 0% repeat-y; }
body {
padding:15px;
font-size: 10pt;
margin: 0;
background-color: #493000;
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
margin-bottom: 30px;
}
h4,h3 {
margin: 0;
}
.serendipitySideBarContent input {
/*width: 150px;*/
}
#mainpane {
width: 100%;
/*border-bottom: 1px solid #000000;
margin: auto;
border-top: 0px;
background-color: #FFFFFF;
border-top: 1px solid #000000;*/
}
#content {
padding: 10px;
margin: 10px;
width: auto;
}
#serendipityRightSideBar {
width: 170px;
border-left: 1px dashed #000000;
padding: 10px;
vertical-align: top;
}
#serendipityLeftSideBar {
width: 170px;
/* border-right: 1px dashed #000000;*/
padding: 10px;
vertical-align: top;
}
input, textarea {
font-size: 10pt;
font-family: verdana, arial, helvetica, sans-serif;
}
th, td {
font-size: 10pt;
}
p, td, th, div, span {
font-family: verdana, arial, helvetica, sans-serif;
}
#serendipity_banner {
margin: auto;
width: 100%;
height: 72px;
}
a.homelink1,
a.homelink1:hover,
a.homelink1:link,
a.homelink1:visited,
#serendipity_banner h1 {
color: #000000;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size : 20px;
padding-left:15px;
padding-top: 10px;
margin: 0px;
text-decoration: none;
}
a.homelink2,
a.homelink2:hover,
a.homelink2:link,
a.homelink2:visited,
#serendipity_banner h2 {
color: #000000;
padding-left: 15px;
font-size: 14px;
margin: 0px;
text-decoration: none;
}
.serendipity_title {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
margin-top: 10px;
color: #000000;
padding-left: 40px;
border-bottom:2px solid #663300;
background-image:url("{TEMPLATE_PATH}img/title.gif");
background-repeat:no-repeat ;
background-color:transparent;
background-position:top left;
}
.serendipity_title a:link,
.serendipity_title a:visited {
text-decoration: none;
border: 0;
color: #000000;
}
.serendipity_title a:hover {
color: #FF0000;
}
.serendipity_entry {
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
color: #000000;
font-weight: normal;
padding-right: 10px;
width: 95%;
margin: auto;
margin-top: 10px;
}
.serendipity_entry_body_folded,
.serendipity_entry_body_unfolded,
.serendipity_entry_extended {
overflow:auto;
/* Inner blocks of .serendipity_entry, can be used for further customization */
}
.serendipity_entry_body{
overflow:auto;
}
.serendipity_entry_date {
margin: auto;
}
.serendipity_date {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 1em;
color: #333333;
margin: 0;
margin-top: 20px;
text-align: left;
padding:5px;
}
.serendipity_commentsTitle {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
margin-top: 10px;
color: #333333;
padding-left: 5px;
border-bottom: 2px solid #663300;
}
div.serendipity_entryFooter {
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: x-small;
padding-top: 10px;
padding-bottom: 4px;
margin-bottom:5em;
clear: both;
}
img.serendipity_entryIcon {
float: right;
border: 0px;
}
img.serendipity_entryIcon {
float: right;
border: 0px;
}
td.serendipity_commentsLabel {
font-size: 12px;
font-weight: bold;
vertical-align: top;
}
td.serendipity_commentsValue input,
td.serendipity_commentsValue select,
td.serendipity_commentsValue textarea {
font-size: 12px;
padding: 2px;
width: auto;
}
.serendipity_commentForm {
font-size: 13px;
color: #404040;
margin-bottom: 13px;
margin-right: 10px;
margin-left: 10px;
background-color: #FFFFFF;
}
.serendipity_comment {
font-size: 13px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
color: #404040;
padding: 3px;
overflow: auto;
}
.serendipity_comment_source {
margin-top: 5px;
padding-left: 5px;
margin-bottom: 5px;
padding-bottom: 3px;
border-bottom: 2px solid #663300;
}
a:link,
a:active {
background-color:transparent;
color: #993300;
text-decoration: underline ;
font-weight: bold;
}
a:visited,a:hover {
color: #000000;/*#003366;*/
}
a:hover{
text-decoration: none ;
}
table.serendipity_calendar td {
font-size:11px;
padding: 3px;
}
table.serendipity_calendar a {
color: #FF0000;
font-weight: bold;
text-decoration:none;
}
table.serendipity_calendar a:hover {
text-decoration: none;
}
td.serendipity_weekDayName {
font-size:11px;
font-weight:bold;
}
td.serendipity_calendarHeader a:link,
td.serendipity_calendarHeader a:visited,
td.serendipity_calendarHeader a:hover {
border: 0;
text-decoration: none;
}
div.serendipityPlug {
padding-left: 10px;
}
div.serendipityPlug a {
text-decoration: none;
border: 0px;
}
/* Container for each item on the side bar */
div.serendipitySideBarItem {
padding-bottom: 12px;
margin-bottom: 12px;
font-size: 12px;
font-weight:normal;
border-bottom: solid 2px #663300;
}
/* title of an individual item */
.serendipitySideBarTitle {
margin: 0;
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
font-weight:bold;
padding-left:2px;
padding-bottom:2px;
}
.serendipityImageButton {
cursor: pointer;
}
.serendipity_entry p {
margin: 0px;
padding-bottom: 0px;
}
/** Embedded images with the s9y image manager **/
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
border: 1px solid #666666;
background-color: #D0BF8B;
margin: 3px;
padding: 3px;
text-align: center;
}
.serendipity_imageComment_center {
margin: auto;
}
.serendipity_imageComment_left {
float: left;
}
.serendipity_imageComment_right {
float: right;
}
.serendipity_imageComment_img,
.serendipity_imageComment_img img {
margin: 0px;
padding: 0px;
text-align: center;
}
.serendipity_imageComment_txt {
margin: 0px;
padding: 3px;
clear: both;
font-size: 8pt;
text-align: center;
}
.serendipity_comments {
}
.serendipity_center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.serendipity_msg_important {
color: red;
}
.serendipity_msg_notice {
color: green;
}
.serendipity_entry_author_self {
}
.serendipity_comment_author_self .serendipity_comment_source {
background-color: #EEEEFF;
}
#serendipity_comment_page {background-color:#FFEAB1;}
.creditfooter{text-align:center;color:#666666;}
.creditfooter a{color:#666666; text-decoration:underline;}
.creditfooter a:visited{color:#666666;text-decoration:none;}
.creditfooter a:hover{color:#cccc99;text-decoration:underline;}
.rawmode
{
padding:25px;
background-color:#FFEAB1;
}
.serendipityAdminMsgSuccess{
background-color:#FFEAB1;
}
==========================================================
[color=#6600CC]第一次練習[/color]
以此語法的基礎
1.把圖改變
2.將部分文字或連結或標題等設定改變
變成不同的視覺效果
並註明改變的部分與設定
請以
[color=#CC0000]FileZilla[/color] http://filezilla-project.org/
上傳
並將自己的帳號套用
並於本文章後回覆套用的網址與樣式名稱
==========================================================
[color=#CC0000]關於表格table的語法說明[/color]
<table></table> : 表格(有二個屬性)
width：表格的寬度。
border：表格的框線。
<tr></tr>：列(橫)。
<td></td>：欄(直）。
==========================================================
預覽樣式
[img]http://www.serendipity-templates.org/screenshots/brown-paper.jpg[/img]
下載網址
http://www.serendipity-templates.org/template/15-brown-paper/
==========================================================
Serendipity templates
Brown-paper
為較簡單的Blog樣式，為入門了解html架構與css設計樣式的範例
首先了解基本的檔案內容：
1.主要以index.tpl 作為部落格基本架構設定，為基本的Layout編排架構設定
2.entries.tpl：以文章為單位，不同形式的設定，內容較為複雜
3.style.css：設計樣式
4.info.txt：版權聲明
5.preview.png 預覽圖片
==========================================================
[color=#CC0000]index.tpl[/color]
==========================================================
[color=#CC0000]style.css[/color]
==========================================================
[color=#6600CC]第一次練習[/color]
以此語法的基礎
1.把圖改變
2.將部分文字或連結或標題等設定改變
變成不同的視覺效果
並註明改變的部分與設定
請以
[color=#CC0000]FileZilla[/color] http://filezilla-project.org/
上傳
並將自己的帳號套用
並於本文章後回覆套用的網址與樣式名稱
==========================================================
[color=#CC0000]關於表格table的語法說明[/color]
預覽樣式
[img]http://www.serendipity-templates.org/screenshots/brown-paper.jpg[/img]
Edited 5 time(s). Last edit at 07/09/2011 04:15PM by JinJin.
(編輯記錄)
|
Re: [Blog] 樣式一 Brown-paper
分類標籤: 網頁設計與語法（HTML/CSS）
|
July 10, 2011 02:42AM 發表文章數: 1,228 |
以Brown-paper咖啡色系樣式為基礎
修改的藍紫色系小花版本
語法修改說明如下：
[img]http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/paper-001.jpg[/img]
[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-10_022353.jpg]原Brown Paper (預覽圖)[/url]
[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-10_021728.jpg]Brown Paper (小花版預覽圖)[/url]
[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-10_022512.jpg]Brown Paper (Angela第一版預覽圖)[/url]
修改的藍紫色系小花版本
語法修改說明如下：
[img]http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/paper-001.jpg[/img]
[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-10_022353.jpg]原Brown Paper (預覽圖)[/url]
[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-10_021728.jpg]Brown Paper (小花版預覽圖)[/url]
[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-10_022512.jpg]Brown Paper (Angela第一版預覽圖)[/url]
MEPO forum
is powered by Phorum.