[教學] 竹貓上方 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]

請教 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]

請注意！

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

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

[chuan]

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

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


現在可以了，其他的慢慢修練去了 ，謝謝您

[心靈捕手]

將主題移動至 "教學文件庫".