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

與 phpBB 3.0.X 相關主題。

版主: 版主管理群

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

文章hentaibbc » 2009-02-25 12:39

今天要來說明一下,竹貓上方的 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 其實是不同的檔案,所以不必使用程式判別。
頭像
hentaibbc
版面管理員
版面管理員
 
文章: 351
註冊時間: 2005-09-01 18:01

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

文章chuan » 2009-04-23 23:31

請教 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
chuan
星球普通子民
星球普通子民
 
文章: 8
註冊時間: 2009-04-23 23:16

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

文章hentaibbc » 2009-04-24 12:40

請注意!

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

或是在修改風格前,
先至後台「一般」->「負荷設定」中,將「重新編輯舊的風格組件」更改為「是」。
頭像
hentaibbc
版面管理員
版面管理員
 
文章: 351
註冊時間: 2005-09-01 18:01

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

文章chuan » 2009-04-24 17:28

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

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


現在可以了,其他的慢慢修練去了 ,謝謝您
chuan
星球普通子民
星球普通子民
 
文章: 8
註冊時間: 2009-04-23 23:16

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

文章心靈捕手 » 2009-04-26 22:54

將主題移動至 "教學文件庫".
施比受有福,歡迎來信賜教,謝謝 & 再見!
祝福您 好運 ^_^
歡迎加入★★心靈捕手★★ :: 討論區!!
p.s.
奉老婆之命:在晚上十一點前,得關機睡覺!!!
頭像
心靈捕手
默默耕耘的老師
默默耕耘的老師
 
文章: 8075
註冊時間: 2004-04-30 01:54
來自: Taiwan


回到 phpBB3

誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 1 位訪客

Partnership: phpBBHacks.com