[分享] AJAX Chat

[jcasper]

最近參考了這主題 http://phpbb-tw.net/phpbb/viewtopic.php ... &sk=t&sd=a
在自己的論壇安裝了即時訊息聊天室
安裝是安裝成功了（有中文化）
但發現有兩個點個人覺得不完美
所以自己稍微修改起來（MOD裝多了 有了心得？ ）

第一是　右上角的"論壇聊天室"字眼
如果完全照install.xml的去修改styles/prosilver/template/overall_header.html
In-line Find

代碼: 選擇全部

<a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}" class="icon-faq">{L_FAQ}</a>

In-line Add Before

代碼: 選擇全部

<a href="{U_CHAT}" title="{L_CHAT_EXPLAIN}" class="icon_members">{L_CHAT}</a>&nbsp;

我發現右上角會變成這樣（從左至右排列） --> "問答集的問號圖示" "論壇聊天室" "問答集"
這樣就很奇怪　因為"問答集的問號圖示"應該是在"問答集"的左邊
怎剛好卡在中間
因為之前也安裝過萬年曆　也意外發現萬年曆的修改也在這裡
所以思考了一下　發現我可以這樣修改
原本的
In-line Add Before

代碼: 選擇全部

<a href="{U_CHAT}" title="{L_CHAT_EXPLAIN}" class="icon_members">{L_CHAT}</a>&nbsp;

可以改成
Add Before（沒有In-line喔）

代碼: 選擇全部

				<li class="icon-members"><a href="{U_CHAT}" title="{L_CHAT_EXPLAIN}" class="icon_members">{L_CHAT}</a></li>

↑我是去掉尾巴的 &nbsp;，然後頭尾分別加上<li class="icon-members">和</li>
結果就會變成 --> "會員列表的圖示" "論壇聊天室" "問答集的問號圖示" "問答集"
因為"會員列表的圖示"跟"論壇聊天室"感覺搭配較OK，所以採取<li class="icon-members">說

第二是　覺得聊天室太大了
怎說　我用出來之後
才發現結果原來是上面是一大塊聊天訊息　下面左邊一小塊會員線上名單
感覺就很佔空間
所以也研究了一下chat_body.html這個檔案
你可以往下找到這樣的內容

代碼: 選擇全部

	<style type="text/css">
	<!--
		#act_indicator {
			visibility:hidden;
		}
		.shouts {
			width: 84%; -->原本是85%
			height:400px; -->原本是300
			overflow:auto;
			float:right; -->原本是left
		}
		#chat {
			width: 100%;
			text-align:left;
		}
		.postprofile {
			min-height: 5px !important;
		}
		.chatform {
			width: 95%;
			text-align:center;
		}
		.onlinelist {
			width: 15%;
			overflow:auto;
			height:400px; [b][color=#FF0000]-->原本是300
		}
		.users {
			width: 90%;
			text-align: left;
			text-indent: 5px;
			margin-left:auto;
			margin-right:auto;
		}
		.user {
			width: 95%;
			font-size: 1.1em;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			line-height: 1.4em;
		}
		#act_indicator {
			visibility: hidden;
		}
		.chatinput {width: 80% !important;}
		.online_img {
			vertical-align:middle;
		}
	-->
	</style>

上面箭頭所指示我有修改過的
改過之後　就會變成左邊是會員線上名單、右邊是聊天訊息區域
如此修改就不會上下個一塊，然後占了論壇很大的版面說
有興趣的人，可以修改其他參數試看看囉
以上