Textcube Taiwan Group

新增了 tiltviewer 樣式，而且 tiltviewer 可以透過 Picasa 軟體產生 xml 檔案，非常方便！

沒圖沒真像：

檔案在這裡，請自行取用(更新，樣版檔案忘記包到圖片了 :P)：

HC_TiltViewerPhotoStudio.zip

TiltviewerPicasa.zip

檔案結構如下：
HC_TiltViewerPhotoStudio

tiltviewer
- images，照片資料夾。
- gallery.xml，照片設定檔案。
- swfobject.js
- TiltViewer.swf
index.xml
skin.html
style.css
style.ie6.css
style.ie7.css
wysiwyg.css

TiltViewerPicasa.zip 這個檔案是給 Picasa 用的網頁輸出樣版，解壓縮之後，會產生 TiltViewerPicasa 資料夾，請將這個資料夾複製到 Picasa 的 templage 資料夾底下。以 Picasa 3 為例子，資料夾應該在：C:\Program Files\Google\Picasa3\web\templates，請將 TiltViewerPicasa 資料夾複製到這裡，並重新啟動 Picasa。

開啟 Picasa 之後，先挑好你要輸出的照片，把那些照片設定到新的相簿裡。然後，在新的相簿按下滑鼠右鍵，選擇＂匯出為 HTML 頁面(X)＂。

接著請選擇尺寸，你要選擇小張的也可以，樣版最寬是 800px 所以這邊以 800 像素為一個基準。相簿標題隨便你打，反正這不是重點。最後請記得他輸出的資料夾，不然輸出完成後會找不到檔案喔。

網頁範本，請選擇＂Tiltviewer＂，如果你沒有這個項目可以選，請回到最上面，確定你的樣板資料夾是否已經拷貝過去，而且也重新啟動 Picasa 了。

按下＂完成＂之後就開始等待漫長的輸出，如果你的照片數量越多、照片尺寸越大，輸出的時間就會比較久。

最後，找到輸出的資料夾，把 image 資料夾與 gallery.xml 拷貝起來，回到樣板資料夾，貼到 titlviewer 資料夾裡面，全部蓋掉。這樣，就可以隨意更換你的照片了，而，也不用花時間去處理 XML 檔案。

以上，完畢。

附帶一提，tiltviewer 可支援 Flickr 的串接，詳情請到官方網站看說明。至於怎麼改，請自行參照說明，修改 skin.html 檔案中的 script 囉（無責）。

Writer profile

Posted by hina

全文轉載：[TextCube] 自訂樣板超完整教學

首先，這個教學是完全參考官方設置的方式，所以如果有需要的話，可以去官方的部落格看看會比較完整，只是都是韓文就是了。網址在此：http://www.textcube.org/manual/category/스킨

以官方樣板 coolant 為範例來說明，他總共有兩個資料夾，五個檔案：

skin.html (必要)
style.css (必要)
index.xml (必要)
preview.gif (樣板預覽縮圖，非必要)
wysiwyg.css (樣板專用編輯器樣式，非必要)
/images (樣板用資料夾，可自行建立與更名)
/styles (樣板用資料夾，可自行建立與更名)

首先先來看 skin.html 這支樣板核心檔案，它的基本結構如下：

詳細結構如下：

more..

標題設定..

<div id="content">
<div class="searchList">搜尋本文結果清單</div>

more..

<div class="searchRplist">搜尋回應/引用結果清單</div>

more..

more..

more..

<div class="guestbook">訪客留言
<div class="guestWrite">訪客留言表單編輯區域</div>
<div class="guestList">訪客留言清單</div>

more..

</div>
<div class="entryNotice">公告文章</div>

more..

<div class="entryProtected">被保護的文章</div>

more..

<div class="entry">文章
<div class="titleWrap">文章標題、分類、作者、文章詳細資訊、文章操作</div>
<div class="article">本文</div>
<div class="tagTrail">標籤清單</div>
<div class="actionTrail">引用操作、刪除</div>
<div class="trackback">引用清單</div>
<div class="comment">回應
<div class="commentList">回應清單</div>
<div class="commentWrite">回應表單編輯區域</div>
</div>

more..

</div> 
<div class="paging">分頁</div>

more..

</div>
<div id="sidebar">

more..

<div class="blogImage">部落格識別圖示</div>

more..

more..

<div class="adminMenu">管理者操作</div>

more..

more..

more..

more..

more..

more..

more..

more..

more..

more..

<div class="counter">部落格瀏覽計數</div>

more..

more..

</div>
<div id="footer">
<div class="menu">選單</div>
<div class="copyright">Copyright</div>

more..

</div>
</div>

額外的兩種 skin.html 設定：

聚合頁面 cover
more..
包含的 XML 結構：<s_cover>, </s_cover>
包含 XML 子結構：<s_cover_rep>, </s_cover_rep>
可以使用的替換標籤有：
- [##_cover_content_##]，顯示聚合頁面所有內容
關鍵字 Keyword UI
more..
包含的 XML 結構：<s_keyword>, </s_keyword>
包含 XML 子結構：<s_keyword_rep>, </s_keyword_rep>
可以使用的替換標籤有：
- [##_onclick_keyword_##]，關鍵字按鈕程序
- [##_keyword_label_##]，關鍵字標簽名稱
包含的 XML 結構：<s_keyword_rep>, </s_keyword_rep>
可以使用的替換標籤有：
- [##_keyword_rep_title_##]，關鍵字名稱
- [##_keyword_rep_desc_##]，關鍵字描述
附註：獨立使用<s_keyword_rep>, </s_keyword_rep>會應用在 Keyword UI 這個插件啟用後的頁面。

看玩了 skin.html 之後，有頭暈腦脹的感覺吧。接著，不急著看 style.css，先來看看 index.xml 再做什麼。這個檔案是用來讓 TextCube 識別用的，也包含了樣板的作者資訊，樣板設定資訊等等。

詳細內容說明如下：

more..

最後是 style.css，依照你的 skin.html 的設定來做，這是廢話。這裡提一下沒辦法在 skin.html 裡面控制的部分，特別是自動升成的日曆、分類清單以及鏈結清單等等。

內容就不多提了，直接看看官方說明吧。

分頁樣式
more..
/* 已選擇的分頁樣式 */
.selected
{
text-align:center;
border-right:1px solid #ccc;
padding-right:10px;
margin-right:10px;
font-weight:bold;
color:#f30;
}

/* 沒有上一頁、下一頁樣式 */
.no-more-prev,
.no-more-next
{
color:#ccc;
}
文字標籤 (td 標籤)
more..
.ib
{
cursor:pointer;
}

.branch3
{
cursor:pointer;
}
顯示數目
more..
.c_cnt
{
font:0.75em Tahoma; color:#f30;
}
日曆設定
more..
/* 月份 */
.cal_month
{
font-size:0.85em;
height:18px;
font-weight:bold;
}

/* 星期 */
.cal_week1
{
font:0.95em dotum;
height:18px;
font-weight:normal;
}
.cal_week2
{
font:0.95em dotum;
color:#f30;
}
a.cal_week
{
background-color:#fff;
}
.cal_current_week
{
background-color:#eee;
}

/* 日期 */
.cal_day
{
font-size:0.85em;
color:#999;
text-align:center;
}
.cal_day_sunday
{
color:#f30 !important;
}
.cal_day_sunday a
{
color:#f30 !important;
}
.cal_day1
{
color:#ccc;
}
.cal_day2
{
color:#ccc;
}
.cal_day3
{
color:#666;
}
.cal_day4
{
color:#000;
text-decoration:underline;
}

/* 鏈結樣式 */
a.cal_click:link { color:#333; font-weight:bold;}
a.cal_click:visited { color:#333; font-weight:bold;}
a.cal_click:hover { color:#f30; font-weight:bold;}
識別樣式 [##_rp_rep_class_##]
more..
.rp_general {}
.rp_admin
{
background:url(images/iconAdmin.gif) no-repeat;
padding-left:20px;
}
.rp_secret
{
color:#f30;
font-weight:bold;
}
.hiddenComment
{
background:url(images/iconSecret.gif) no-repeat;
padding-left:20px;
font-weight:normal;
}
識別樣式 [##_guest_rep_class_##]
more..
.guest_general {}
.guest_admin
{
background:url(images/iconAdmin.gif) no-repeat;
padding-left:20px;
}
.guest_secret
{
color:#f30;
font-weight:bold;
}
More/Less 樣式設定
more..
.moreless_fold
{
background:url(images/iconMore.gif) top left no-repeat;
padding-left:20px;
color:#000;
}

.moreless_top
{
background:url(images/iconLess.gif) top left no-repeat;
padding-left:20px;
color:#000;
}

.moreless_Body {}

.moreless_bottom
{
background:url(images/iconLess.gif) top right no-repeat;
padding-right:20px;
color:#999;
text-align:right;
}
其它樣式
more..
.cap1
{
color:#999;
text-align:center;
}

.imageblock {}
{
border:1px solid #ddd;
padding:5px;
margin:5px 0;
}

.left {}
.center {}
.right {}

.dual
{
background-color:#eee;
margin-bottom:5px;
}

.triple
{
background-color:#eee;
margin-bottom:5px;
}
聚合頁面官方提供樣式
more..
/*-------------------------------*/
/* cover */
/*-------------------------------*/

.coverpost
{
   clear: both;
   border-bottom: 1px solid #ddd;
   margin: 10px 0;
}

.coverpost h2
{
   font-size: 120%;
   padding-right: 5px;
}

.coverpost h2 a
{
   letter-spacing: -1px;
   line-height: 125%;
}

.coverpost .img_preview
{
   background-color: #fff;
   float: left;
   padding: 0 7px 7px 0;
}

.coverpost .img_preview img
{
   border: 2px solid #ccc;
   cursor: pointer;
   height: 80px;
   width: 80px;
}

.coverpost .post_info
{
   background-color: #faf9f8;
   border-bottom: 1px solid #e8e8e8;
   font: 0.9em Dotum, Arial, sans-serif;
   padding: .3em .6em .3em 0;
}

.coverpost .post_info span
{
   line-height: 1.2em;
   padding: .3em 0 .3em 22px;
}

.coverpost .post_info .category
{
   background: url('./images/bullet_folder.gif') no-repeat 6px 50%;
}

.coverpost .post_info .category a
{
   color: #888;
   margin-right: 6px;
}

.coverpost .post_info .date
{
   background: url('./images/bullet_clock.gif') no-repeat 0 50%;
   color: #888;
   font-family: Verdana, Helvetica, Arial, Gulim, sans-serif;
   padding-left: 16px;
}

.coverpost .post_info .author .preposition
{
   display: none;
}

.coverpost .post_info .author
{
   background: url('./images/bullet_author.gif') no-repeat 6px 50%;
}

.coverpost .post_content
{
   margin: 5px 0;
   line-height: 125%;
   overflow: hidden;
}

.coverpost .post_tags
{
   background: url('./images/bullet_tag.gif') no-repeat 0 0.35em;
   clear: both;
   line-height: 1.2em;
   padding: 5px 5px 5px 20px;
}

.coverpost .post_tags a
{
   font-size: 0.9em;
}

.coverpost .post_tags span
{
   display: none;
}
關鍵字官方提供樣式
more..
/*-------------------------------*/
/* keyword log */
/*-------------------------------*/

#keywords ul
{
   list-type-style: none;
   text-align: left;
}

#keywords ul li
{
   display: inline;
   line-height: 2.2em
   list-type-style: none;
   padding-right: 10px;
}

完畢，收工。

Writer profile

Hello...
I am Chieh™
http://chieh.me

Posted by Chieh™

日	一	二	三	四	五	六
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Textcube Taiwan Group

Search Results for '樣板'

23 POSTS

[TextCube] Photo Studio Skin with tiltviewer

Comments List

TextCube 樣板自訂教學

Comments List

[TextCube] 中文化插件最終更新

Tag Cloud

Notices

Archives

Categories

Recent Posts

Recent Comments

Recent Trackbacks

Calendar

Bookmarks

Site Stats