竹貓星球 • [問題]請問PROSILVER風格版面配置及圖片過大被切割的問題

第 1 頁 (共 1 頁)

[問題]請問PROSILVER風格版面配置及圖片過大被切割的問題

發表於 : 2008-02-01 11:34

由 jay18

●架設主機作業系統：Windows XP SP2
●快速架站程式：存放網路空間
●您的上網方式：ADSL
●您的 phpBB3 版本：phpBB 3.0.0
●您的 phpBB3 使用風格：prosilver
●您的 phpBB3 連結網址：http://www.xindiancyclist.tw/

請各位版上的先進指導~感激不盡
這幾天研究prosilver風格主題的語法有一點小小收穫,不枉2天只睡4小時
稍稍把版面調整,主要目的為放大字體與簡化版面
還有一些實在不知該如何是好,眼睛已經快張不開了

問題1
http://www.xindiancyclist.tw/viewforum.php?f=5
版面主題列表的"主題"文字可以從哪邊更改主題的文字大小與顏色?並且垂直置中?

問題2
http://www.xindiancyclist.tw/viewforum.php?f=5
如何可以縮短版面右側"最後發表"欄位的欄寬?

問題3
http://www.xindiancyclist.tw/viewtopic.php?f=5&t=526
文章本文內有上傳1024 px寬的照片,但受限版面寬度限制照片被切掉了
如何可以讓照片完整顯示?

心得：這幾天從完全看不懂語法,到現在略懂一丁點的参數,還有反覆的測試找到一些参數位置,若有人對這有興趣,JAY18可以把資料整理一下分享上來

再次謝謝版上先進予以指導

Re: [問題]請問PROSILVER風格版面配置及圖片過大被切割的問題

發表於 : 2008-02-02 11:10

由 心靈捕手

若要指定其他風格樣式,
則有些可以直接在樣板檔案 (template) 修改,
有些可以直接在風格主題 (theme) 裡頭修改,
或者, 有些必須同時在兩個地方修改.

解決您前面兩個問題, 可以先檢視底下樣板檔案的 CSS 設定, 再做處理:
styles/prosilver/template/viewforum_body.html

1. 單單修改 '主題' 字型的顏色, 大小與位置:
#
#-----[ FIND ]-----
#

代碼: 選擇全部

					<dt><!-- IF S_DISPLAY_ACTIVE -->{L_ACTIVE_TOPICS}<!-- ELSEIF topicrow.S_TOPIC_TYPE_SWITCH and topicrow.S_TOPIC_TYPE gt 1 -->{L_ANNOUNCEMENTS}<!-- ELSE -->{L_TOPICS}<!-- ENDIF --></dt>

#
#-----[ REPLACE WITH ]-----
#

代碼: 選擇全部

					<dt style="text-align: center; font-size: 1.3em; color: #ffff00"><!-- IF S_DISPLAY_ACTIVE -->{L_ACTIVE_TOPICS}<!-- ELSEIF topicrow.S_TOPIC_TYPE_SWITCH and topicrow.S_TOPIC_TYPE gt 1 -->{L_ANNOUNCEMENTS}<!-- ELSE -->{L_TOPICS}<!-- ENDIF --></dt>

修改存檔後, 清除快取檔案.
說明:
text-align: center; 指定字型位置 '置中對齊'
font-size: 1.3em; 指定字型大小 '1.3em'
color: #ffff00; 指定字型顏色 '黃色'

2. 將 '最後發表' 欄位縮小:
#
#-----[ OPEN ]-----
#
styles/prosilver/theme/content.css

#
#-----[ FIND ]-----
#

代碼: 選擇全部

ul.topiclist dt {
	display: block;
	float: left;
	width: 50%;
	font-size: 1.1em;
	padding-left: 5px;
	padding-right: 5px;
}

#
#-----[ REPLACE WITH ]-----
#

代碼: 選擇全部

ul.topiclist dt {
	display: block;
	float: left;
	width: 70%;
	font-size: 1.1em;
	padding-left: 5px;
	padding-right: 5px;
}

#
#-----[ FIND ]-----
#

代碼: 選擇全部

dd.lastpost {
	width: 25%;
	font-size: 1.1em;
}

#
#-----[ REPLACE WITH ]-----
#

代碼: 選擇全部

dd.lastpost {
	width: 5%;
	font-size: 1.1em;
}

說明:
這個範例是縮小 '最後發表' 欄位; 而將多出來的空間加入 '主題' 欄位.
值得注意的是: 因為這個修改是直接在 content.css 修改, 所以影響所及的, 將是整個論壇的版面配置.

最後這個問題, 則可以先檢視底下樣板檔案的 CSS 設定, 再做處理:
styles/prosilver/template/viewtopic_body.html

3. 讓照片完整顯示
#
#-----[ OPEN ]-----
#
styles/prosilver/theme/content.css

#
#-----[ FIND ]-----
#

代碼: 選擇全部

/* Content container styles
----------------------------------------*/
.content {
	min-height: 3em;
	overflow: hidden;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #333333;
}

#
#-----[ REPLACE WITH ]-----
#

代碼: 選擇全部

/* Content container styles
----------------------------------------*/
.content {
	min-height: 3em;
	overflow: scroll;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #333333;
}

說明:
預設是將溢出版面部分隱藏 (hidden); 此修改則是將溢出部分以捲軸 (scroll) 呈現.
若要指定其他處理方式, 則可以自行試試:
overflow: auto; 交由瀏覽器自動判定
overflow: visable; 溢出版面部分, 通通真實呈現

不過, 若依個人經驗, 則下列處理方法較適宜:
1. 先在後台指定發文圖片的最大高度以及寬度;
2. 再將超過指定尺寸的圖片 '縮小' 後, 再發文.

DEMO:
http://wang5555.dnsfor.me/test/phpBB3/viewf ... ang=tw&f=1
ps.
今天中午前, 陪老婆大人回娘家;
此風格示範調整, 最晚明天復原.

Re: [問題]請問PROSILVER風格版面配置及圖片過大被切割的問題

發表於 : 2008-02-02 18:53

由 jay18

感謝心靈老師的解惑

原來沒有字體大小的部份,可以自己增加
JAY18還執迷在找可以改的數字~思想僵化~哈
另外text-align: center語法JAY18有試過,只能水平置中,無法垂直置中...

今天晚上
照著心靈老師的方式再試試看
感激不盡~新年快樂
視成果~再上來報告後續結果

Re: [問題]請問PROSILVER風格版面配置及圖片過大被切割的問題

發表於 : 2008-02-02 22:21

由 心靈捕手

jay18 寫:...
另外text-align: center語法JAY18有試過,只能水平置中,無法垂直置中...
...

印象中, CSS 沒有 '垂直置中' 的屬性?
我再抽空找找相關資料...

應變的方法, 可以這麼做:
1. 更改語言檔的內容, 如下:
#
#-----[ OPEN ]-----
#
language/YOUR_LANG/common.php

#
#-----[ FIND ]-----
#

代碼: 選擇全部

	'TOPICS'	=> '主題',

#
#-----[ REPLACE WITH ]-----
#

代碼: 選擇全部

	'TOPICS'	=> '主<br />題',

#
#-----[ SAVE & CLOSE ]-----
#
2. 或者更改樣板檔的內容, 如下:
#
#-----[ OPEN ]-----
#
styles/prosilver/template/viewforum_body.html

#
#-----[ FIND ]-----
#

代碼: 選擇全部

{L_TOPICS}

#
#-----[ REPLACE WITH ]-----
#

代碼: 選擇全部

主<br />題

#
#-----[ SAVE & CLOSE ]-----
#
說明:
第一個改法, 快又有效; 但是影響所及, 是整個論壇的版面.
第二個改法, 必須針對不同的風格樣板檔做修改; 而且, 更換使用的語系時, 不會隨著改變, 是它最大的缺點.

Re: [問題]請問PROSILVER風格版面配置及圖片過大被切割的問題

發表於 : 2008-02-03 08:36

由 jay18

剛剛試了心靈老師的修改styles/prosilver/template/viewforum_body.tpl的方法
又學到一點觀念
跟心靈老師謝謝與說聲不好意思
JAY18是想要把"主題欄"下的各個題目標題放大,JAY18語意不清,造成困擾了
所以JAY18是要回歸修改風格主題中和{L_ACTIVE_TOPICS}有關的語法對嗎?
剛剛找到語法中有

代碼: 選擇全部

vertical-align: middle;

但加在風格主題下的....結果垂直置中失敗(加不對地方?),字體大小已經OK,再繼續嘗試^^

代碼: 選擇全部

/* proSilver Link Styles
---------------------------------------- */

項下的

代碼: 選擇全部

/* Links for forum/topic lists */
a.forumtitle {
	font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
	font-size: 1.35em;
	font-weight: bold;
	color: #898989;
	text-decoration: none;
}

/* a.forumtitle:visited { color: #898989; } */

a.forumtitle:hover {
	color: #bcbcbc;
	text-decoration: underline;
}

a.forumtitle:active {
	color: #898989;
}

a.topictitle {
	font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
	vertical-align: middle;
	font-size: 1.35em;
	font-weight: bold;
	color: #898989;
	text-decoration: none;
}

另外發現幾個問題
1.PHPH3.0.0的viewforum_body檔JAY18的是viewforum_body.html非tpl
2.先前以FTP編輯的viewforum_body.html檔尾前加入的

代碼: 選擇全部

<?php include_once("analyticstracking.php") ?>
<!-- INCLUDE overall_footer.html -->

在風格樣版編輯中竟然沒有,而是空白,回到FTP編輯又有?是否這是GOOGLE analys無法成功的原因
JAY18有勾選安全性設定中的"允許在樣板中使用 PHP:
如果啟用這個選項, PHP 和 INCLUDEPHP 語法將在樣板中被辨認和解析."為YES
是否是這樣的關係?

Re: [問題]請問PROSILVER風格版面配置及圖片過大被切割的問題

發表於 : 2008-02-03 11:55

由 心靈捕手

1. 很抱歉! *.html 誤植為 *.tpl 是我個人的筆誤; 前面回文已修正.

2. 我想, 我也一時誤解了您所謂 '垂直置中' 的意思.
我誤以為您是想把

代碼: 選擇全部

----------

主題

----------

修改為

代碼: 選擇全部

----------

主
題

----------

不過, 很遺憾的是這個 '垂直置中' 語法 (vertical-align: middle;) 只適用在 th, td 元素.
若您在目前的 subsilver2 的風格使用, 則或許可以成功.

您若要調整該區塊主題的 (連結) 顏色, 則才需要修改 links.css (如您前面回文提到的地方);
否則, 還是只要修改 content.css 即可改變字型大小, 位置 (水平置中).

修改 content.css 如下: (請先復原前面回文中 viewforum_body.html, links.css 的修改)
#
#-----[ FIND ]-----
#

代碼: 選擇全部

dl.icon dt {
	padding-left: 45px;					/* Space for folder icon */
	background-repeat: no-repeat;
	background-position: 5px 95%;		/* Position of topic icon */
}

#
#-----[ REPLACE WITH ]-----
#

代碼: 選擇全部

dl.icon dt {
	padding-left: 45px;					/* Space for folder icon */
	background-repeat: no-repeat;
	background-position: 5px 95%;		/* Position of topic icon */
	text-align: center; font-size: 1.3em
}

說明:
1. 若您在此指定字型顏色的話, 則對於主題 (討論串的題目) 是無效的.
2. 應該可以不必特別去設定垂直置中, 因為相關的版面配置已很適當.
DEMO:
http://wang5555.dnsfor.me/test/phpBB3/viewforum.php?f=1

3. 關於 GOOGLE analys 的設定與使用
請恕我沒有相關經驗足以答覆.