[教學] 竹貓上方 HeadBar 的製作方式

與 phpBB 3.0.x 相關主題。

版主: 版主管理群

回覆文章
頭像
hentaibbc
版面管理員
版面管理員
文章: 342
註冊時間: 2005-09-01 18:01

[教學] 竹貓上方 HeadBar 的製作方式

文章 hentaibbc »

今天要來說明一下,竹貓上方的 HeadBar 的製作方法。

注意!本方式僅供 prosilver 的風格修改,其他風格請參考後修改。

首先,開啟 overall_header.html
找到

代碼: 選擇全部

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
取代為

代碼: 選擇全部

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<!--<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>-->
		<!-- ENDIF -->
找到

代碼: 選擇全部

			<span class="corners-bottom"><span></span></span></div>
		</div>
取代為

代碼: 選擇全部

			<span class="corners-bottom no-image"><span></span></span></div>
		</div>
        
        <div class="header-buttons">
            <div class="buttons">
                <div class="button-community default"><a href="{ROOT_PATH}" title="Community"><span></span>Community</a></div>
            </div>
            <div class="buttons">
                <div class="button-tarot"><a href="{ROOT_PATH}thoth/" title="Tarot"><span></span>Tarot</a></div>
            </div>
            <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
                <div id="search-box" style="margin-top:5px;">
                    <form action="{U_SEARCH}" method="post" id="search">
                    <fieldset>
                        <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
                        <input class="button2" value="{L_SEARCH}" type="submit" /><br />
                        <!--a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a--> {S_SEARCH_HIDDEN_FIELDS}
                    </fieldset>
                    </form>
                </div>
            <!-- ENDIF -->
        </div>
接著,打開 common.css
在最後加上

代碼: 選擇全部

/* Heard Ber */
.headerbar {
	margin-bottom: 0px;
}

.no-image, .no-image span {
	background-image: none !important;
}

.header-buttons {
	clear: both;
	height: 30px;
	background-color: #6f8599;
	margin-top: 0;
	margin-bottom: 4px;
}

.header-buttons div {
	margin-left: 2px;	
}

.header-buttons .buttons div a:hover span	{ background-position: 0 -30px; }
.buttons div {
	width: 100px; height: 30px;
}
.buttons span {
	background: transparent none 0 0 no-repeat;
}

.button-community span	{ background-image: url('{T_THEME_PATH}/images/header_buttons/button_community.gif'); }
.button-tarot span	{ background-image: url('{T_THEME_PATH}/images/header_buttons/button_tarot.gif'); }

.header-buttons .default span { background-position: 0 100%; }
最後,將以下兩張圖放在 styles/prosilver/theme/images/header_buttons/ 內
檔名:button_community.gif
community02.gif
討論區按鈕
(1.84 KiB) 已下載 1064 次
檔名:button_tarot.gif
tarot02.gif
塔羅館按鈕
(2.04 KiB) 已下載 913 次
這樣就可以了!

-------------------------------------------------------------------------------------------------------------------------------------
如果您想要自行製作 Buttons
以這個教學的內容,您必需製作 100 x 30(px) 的按鈕,並如附件圖一樣,製作三個按鈕圖做為切換用。

上:原始按鈕
中:滑鼠移過
下:目前頁面

之後合併成 100 x 90(px) 的圖。

接著到 overall_header.html 中,找到

代碼: 選擇全部

<div class="buttons">
                <div class="button-community default"><a href="{ROOT_PATH}" title="Community"><span></span>Community</a></div>
            </div>
參考這個按鈕的語法,您可以語法插入如下:

代碼: 選擇全部

<div class="buttons">
                <div class="button-about"><a href="about.html" title="About us"><span></span>About us</a></div>
            </div>
修改語法時,我們的 class 屬性中少了一個 " default",這個 default 的樣式,就是指目前頁面時的效果。

接著要修改 CSS 部份。
假設我們剛剛製作的按鈕名稱為 button_aboutus.gif 並放置在 styles/prosilver/theme/images/header_buttons/ 中
打開 common.css
找到

代碼: 選擇全部

.button-tarot span	{ background-image: url('{T_THEME_PATH}/images/header_buttons/button_tarot.gif'); }
在之後加上

代碼: 選擇全部

.button-about span	{ background-image: url('{T_THEME_PATH}/images/header_buttons/button_aboutus.gif'); }
這樣就是一個按鈕了。

那麼,要怎麼讓這個 HeadBar 判斷目前是在哪個頁面呢?
這個就留待下一篇再來說明。

PS. 目前竹貓討論區的 overall_header.html 與塔羅館的 overall_header.html 其實是不同的檔案,所以不必使用程式判別。
chuan
星球普通子民
星球普通子民
文章: 8
註冊時間: 2009-04-23 23:16

Re: [教學] 竹貓上方 HeadBar 的製作方式

文章 chuan »

請教 hentaibbc 兄
我照您教的方法 改了 overall_header.html 和 common.css 兩個檔 也訂了 \header_buttons 並 建了三個 button 的 gif 檔

但是好像無作用 更甚的是 我把 overall_header.html 檔刪了 依然還能執行

不知是何故 能指點一下嗎 謝謝


●架設主機作業系統:Linux
●免費空間連結: http://www.hostse.com
●上網方式:ADSL、SPARQ.net。
●phpBB3 版本:phpBB 3.0.4
●phpBB3 使用風格:prosilver
●domain(網域名稱) :http://chuan.hostse.com/index.php
●phpBB3 連結網址: http://chuan.hostse.com/phpbb3/index.php
頭像
hentaibbc
版面管理員
版面管理員
文章: 342
註冊時間: 2005-09-01 18:01

Re: [教學] 竹貓上方 HeadBar 的製作方式

文章 hentaibbc »

請注意!

風格有快取的功能,所以在修改後,請一定要執行「重新整理」的動作。

或是在修改風格前,
先至後台「一般」->「負荷設定」中,將「重新編輯舊的風格組件」更改為「是」。
chuan
星球普通子民
星球普通子民
文章: 8
註冊時間: 2009-04-23 23:16

Re: [教學] 竹貓上方 HeadBar 的製作方式

文章 chuan »

感恩 hentaibbc 兄:
原來我以下這個沒設定

或是在修改風格前,
先至後台「一般」->「負荷設定」中,將「重新編輯舊的風格組件」更改為「是」。


現在可以了,其他的慢慢修練去了 ,謝謝您
頭像
心靈捕手
默默耕耘的老師
默默耕耘的老師
文章: 8510
註冊時間: 2004-04-30 01:54
來自: Taiwan

Re: [教學] 竹貓上方 HeadBar 的製作方式

文章 心靈捕手 »

將主題移動至 "教學文件庫".
施比受有福,祝福您好運! ^_^
歡迎光臨★★心靈捕手★★ :: 討論區
https://wang5555.dnsfor.me/phpBB3/
回覆文章

回到「3.0」