css dock導航列 for phpbb3 (v.1)

在这里讨论和发布PHPBB3.0.X风格和主题
Post Reply
User avatar
jwxie
炉火纯青
炉火纯青
Posts: 510
Joined: 2007-07-09 10:31

css dock導航列 for phpbb3 (v.1)

Post by jwxie » 2008-02-21 12:54

本次釋出為v1版本, 會不定時更新.

圖片和css dock首創源代碼作者:
http://www.ndesign-studio.com/blog/mac/css-dock-menu

js原代碼作者
jQuery JavaScript library: http://jquery.com/
interface: http://interface.eyecon.ro/
以下為全版權之註明
If you are a big Mac fan, you will love thisCSS dock menu that I designed. It is using jQuery JavaScript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom. This CSS dock menu is perfect to add on to my Wordpress iTheme. Here I will show you how to implement it to your web page.

因為想幫自己的e107支援站能有一個簡單的導航列, 所以選用了它, 自己插入phpBB模版, 方便使用
應老土兄的要求, 在此釋出.
本次使用的js檔案不是老土公佈的那個, 我用的是jquery站內最新的版本.

瀏覽器測試:
IE 7, FireFox, Opera, Safari


Demo 測試站:

http://e107.jwxinst.q168.net/phpBB3/

感謝ETiV兄的指導!
http://phpbbchina.com/forum/viewtopic.p ... 959#p12959

我提供以下兩個版本
1) 直接覆蓋使用版--- 如果你是新裝的或者你認為你沒有改過那些檔案的話....
dock_header_v1.zip
直接覆蓋使用版
(229.8 KiB) Downloaded 26 times


2) 插件上傳版 ---
只包括這個小插件的檔案, 其他phpBB3檔案之修改必需要按下面的步驟跟著做!!!!
dock_mod_upload_v1.zip
插件上傳版
(225.53 KiB) Downloaded 6 times

不管你使用哪一個版本, 請做好所有上傳 / 修改後, 務必做我最底下, 用紅字寫的那個「請務必做以下更新步驟」!!!!!


============================插件上傳版==========================

1. 請解壓縮後, 上傳dock_mod_upload_v1\prosilver\裡面的檔案.

2. 打開 \prosilver\theme\stylesheet.css
尋找:

Code: Select all

@import url("colours.css");
下一行, 加入

Code: Select all

@import url("style.css");

3. 打開 \prosilver\template\overall_header.html
尋找:

Code: Select all

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>
下一行, 加入

Code: Select all

<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/interfaceo.js"></script>

尋找:

Code: Select all

<link href="{T_THEME_PATH}/lrge.css" rel="alternate stylesheet" type="text/css" title="A++" />
下一行, 加入

Code: Select all

<link href="{T_THEME_PATH}/theme/style.css" rel="stylesheet" type="text/css" />

尋找:

Code: Select all

	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

下一行, 加入

Code: Select all

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

尋找:

Code: Select all

<body> 
下一行, 加入

Code: Select all

<!-- INCLUDE css-dock-top.html -->

4. 打開 \prosilver\template\overall_footer.html
尋找:

Code: Select all

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

在</div>, 下一行, 加入

Code: Select all

<p>
<p>
<!-- INCLUDE css-dock-bottom.html -->
</p>
</p>
修改所有檔案, 請務必做以下更新步驟:


1. 登錄後台後, 進入風格(template)
1.JPG
1.JPG (2.42 KiB) Viewed 2331 times
2. 點擊旁邊選單中的「主題」
3. 對著prosilver按「重新整理」, 和「確定」
Image


4. 再回到後台的主頁, 清除緩存(deleted cache」
Image


5. 回到你的首頁即可.
Last edited by jwxie on 2008-02-22 3:32, edited 3 times in total.

User avatar
jwxie
炉火纯青
炉火纯青
Posts: 510
Joined: 2007-07-09 10:31

Re: css dock導航列 for phpbb3 (v.1)

Post by jwxie » 2008-02-21 13:07

剛剛更新...忘了步驟加入IE7的element

User avatar
土老耄
技术组成员
技术组成员
Posts: 1441
Joined: 2006-11-18 8:17

Re: css dock導航列 for phpbb3 (v.1)

Post by 土老耄 » 2008-02-21 14:38

jwxie wrote:應老土兄的要求, 在此釋出.
本次使用的js檔案不是老土公佈的那個, 我用的是jquery站內最新的版本.
呃...那个也是俺转帖的版本...俺可没那么大本事... :(
不管用谁的版本,还是要谢谢你滴分享。phpbb中文有了你们,将会更精彩。 :P

User avatar
jwxie
炉火纯青
炉火纯青
Posts: 510
Joined: 2007-07-09 10:31

Re: css dock導航列 for phpbb3 (v.1)

Post by jwxie » 2008-02-22 2:11

土老耄 wrote:
jwxie wrote:應老土兄的要求, 在此釋出.
本次使用的js檔案不是老土公佈的那個, 我用的是jquery站內最新的版本.
呃...那个也是俺转帖的版本...俺可没那么大本事... :(
不管用谁的版本,还是要谢谢你滴分享。phpbb中文有了你们,将会更精彩。 :P
唷老土, 俺不會寫這個東西
不是你先分享, 而之後我的e107因為不能show主站的header,我才會想到用這個
我還打算多裝幾個XDDDDDDD
(有其他的, 我改好會再送上來)

ETiV
初来乍到
初来乍到
Posts: 14
Joined: 2008-02-16 15:15

Re: css dock導航列 for phpbb3 (v.1)

Post by ETiV » 2008-02-22 2:30

"重新整理"就是"刷新"就是"refresh"...

음...


圖片和css dock首創源代碼作者:
ahttp://www.ndesign-studio.com/blog/mac/css-dock-menu

协议前多了个a


还有, 这效果是不是上面地址首创我不清楚,
但是, Fisheye是作为jQuery的插件Interface的一部分出现在
http://interface.eyecon.ro/demos
这里的...

User avatar
jwxie
炉火纯青
炉火纯青
Posts: 510
Joined: 2007-07-09 10:31

Re: css dock導航列 for phpbb3 (v.1)

Post by jwxie » 2008-02-22 3:31

ETiV wrote:"重新整理"就是"刷新"就是"refresh"...

음...


圖片和css dock首創源代碼作者:
ahttp://www.ndesign-studio.com/blog/mac/css-dock-menu

协议前多了个a


还有, 这效果是不是上面地址首创我不清楚,
但是, Fisheye是作为jQuery的插件Interface的一部分出现在
http://interface.eyecon.ro/demos
这里的...
其實你我都對了一部份, 但ndesgin應該寫這css dock的人, 只是用的是3個soruces,這也包括了圖片是自己的
不過我加入了js版權那部份啦, 你可以到1樓看看喔
http://jquery.com/blog/2007/05/09/fisheye-dock-menu/

If you are a big Mac fan, you will love thisCSS dock menu that I designed. It is using jQuery JavaScript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom. This CSS dock menu is perfect to add on to my Wordpress iTheme. Here I will show you how to implement it to your web page.
當然, css dock肯定有參考其他的東西, 但作者既然沒有表明, 那我們就寫這3個sources好了

ETiV
初来乍到
初来乍到
Posts: 14
Joined: 2008-02-16 15:15

Re: css dock導航列 for phpbb3 (v.1)

Post by ETiV » 2008-02-22 3:38

fisheye的代码, 自己的图标...

User avatar
jwxie
炉火纯青
炉火纯青
Posts: 510
Joined: 2007-07-09 10:31

Re: css dock導航列 for phpbb3 (v.1)

Post by jwxie » 2008-02-22 3:39

ETiV wrote:fisheye的代码, 自己的图标...
怎麼了???

ETiV
初来乍到
初来乍到
Posts: 14
Joined: 2008-02-16 15:15

Re: css dock導航列 for phpbb3 (v.1)

Post by ETiV » 2008-02-22 3:53

jwxie wrote:
ETiV wrote:fisheye的代码, 自己的图标...
怎麼了???

没咋, 睡觉去了... :P

plato
新手入门
新手入门
Posts: 42
Joined: 2007-08-14 11:04

Re: css dock導航列 for phpbb3 (v.1)

Post by plato » 2008-02-22 11:08

:ugreat:
不錯的javascript & css 的運用, 最近也在看javascript

下面這個網站也很多範例
http://www.hotscripts.com/index.html

User avatar
土老耄
技术组成员
技术组成员
Posts: 1441
Joined: 2006-11-18 8:17

Re: css dock導航列 for phpbb3 (v.1)

Post by 土老耄 » 2008-02-22 15:33

plato wrote:下面這個網站也很多範例
http://www.hotscripts.com/index.html
hotscripts也是一个俺常去淘宝的地方,建议各位站长花点时间去淘淘。

Post Reply