Login Free Sign Up
January 18, 2009

[教學]Cbox自訂背景

解決了Cbox的錯誤顯示後，心裡真是放下一塊大石頭，接下來可以來美化Cbox了

在美化Cbox的背景之前，要先確定你的Cbox確實可以運作，美化背景需要一張背景圖，
而背景圖的大小視你的Cbox寬高去製作，可以超出，但不要超過太多喔！

先來查看一下Cbox的外觀，依你所設定的寬高，在製作背景圖時，先想好你要顯示的效果，
例如網友留言顯示在圖框內或是輸入區塊的高度，可以先想好再去做圖

而目前貼上Cbox語法，還會顯示連結框及廣告的朋友，可以依上圖去清除這些礙眼的區塊

 

 

 

 

背景圖的製作，我就不提了，你可以找一張你喜歡的圖片或照片去裁切或自製，作好圖片後，
接下來就利用DIV及CSS語法，來把背景圖崁入Cbox中

這是語法的分解圖，藍字的部份是要自己額外加進去的，包含設定DIV的背景圖及寬高，
＜DIV＞到 ＜/DIV＞中間包著你的Cbox語法

以下語法你可以複製再去修改，前後的＜＞要自己改成<>，二個區塊（DIV與JS）中間不要斷行！

＜div style="background:url(你的背景圖網址) no-repeat; width:寬度px;height:高度px;"＞
這裡是JS語法
＜/div＞

如果在套上圖片後，想要在調整CBOX的顯示位置可以在 style=" "之內，
再加上Padding-top（靠上）、Padding-left（靠左）、Padding-right （靠右）、Padding-bottom（靠下）等
CSS定位標簽去移動，也可以去修改JS語法中的heightmain（留言顯示區）及heightform（輸入區）來配會底圖
設定CSS時，要注意字數，因為如果超過無名資料夾的最大字數，可能會使你的語法被切掉一部份，就會無法正常顯示

改完語法後，把整個語法（CSS+JS）全部複製到「資料夾管理」－「連結管理」再儲存，
視情況可能需要再去修改資料夾的高度或寬度喔！

 

 

 



這是我在本機網頁套用背景圖的結果，因為背景是單色，所以捲軸的部份會以Cbox的設定為主，
如果你的網誌背景是單色，在製作圖片時，除了寬高的數值外，不妨將單張底圖作個層次，
上半段（顯示留言的部份）可以用純色用來配合捲軸，下半段也就是輸入框的部份可以套圖

圖片的寬度看你自己的設定，最大圖片高度可以超出Cbox總高度約15-20PX之間，如果圖片高度太大，
那麼寫在「連結管理」時，可能會因為要顯示全圖反而蓋不到廣告喔！

 

 

 



這是我把全版背景設成圖片，再加上捲軸透明FILTER: Chroma(Color=#要透明的色碼);的結果，
Cbox捲軸在這時候會因為底色是背景圖的關係而變成透明

透明捲軸只適用於你的網誌有背景圖或是連結列有背景圖時（IE only），透明色碼是你Cbox所設的捲軸色碼
例如我的捲軸是設#003366，那我的透明捲軸就定FILTER: Chroma(Color=#003366);，
這裡要注意你的透明色碼是不是在網誌的其他區塊(文字、框線、背景)也有，
因為透明色碼也會將你版面相同的顏色都變成透明，最好是在Cbox中把捲軸設成奇怪或不相關的顏色，
再用透明參數來透明捲軸的部份

 

 

 



當你套用了背景之後，可能會需要回到Cbox去修改樣式，依自己的需求把某些區塊變成透明，
只要把區塊的色碼清除就會變成透明了，但是捲軸的部份「Scroll BG、Track BG、Arrow、Border」除外，
如果不設定色碼，就會變成預設的灰白捲軸

 

 

 



這個是貼上無名後的結果，因為我的版面是單色加一些小圖示，所以在「背景版」的捲軸無法透明，
但如果你的Cbox圖片底色與捲軸是設定相同顏色，看起來也會像是透明喔！

我的說明到這裡，美感的部份就要靠大家的製圖及編排能力囉！

4推薦此文章 推 收
Add a Bookmark:
Today's Visitors: 1 Total Visitors: 853
Personal Category: 玩意大搜集 Topic: technology / network / blog
afan710 at 無名小站 at 06:35 PM post | Reply(31) | Trackback(0) | Collection(0) | prosecute
[Trackback URL]

Reply
1 2 Next

  • 1樓

    1樓搶頭香

    原來還有這中方式ㄚ
    之前無名限制了google空間本來無法擺下套用面板後的cbox
    後來我試著利用TABLE框架作出來
    不過字ˇ數太長了..非會員可能會被截斷
    這方法好像不錯謝謝米瓦娜版主的熱心提供
    我改天試試看嚕~(box官網現在進不去)

  • blue73623 at January 19, 2009 08:34 PM comment | prosecute

  • 我上面提供的div css語法已經有縮短過了
    因為加上圖片網址及js語法,真的有可能會超過資料夾的字數
    所以啊...

    cbox目前可以登入了,可是有點卡卡喔!

  • Blog Owner at January 20, 2009 08:47 PM Reply

  • 2樓

    2樓頸推

    有沒有辦法讓圖片移動阿?
    我想移動圖片調到適合位置!?

  • blue73623 at January 19, 2009 09:45 PM comment | prosecute

  • 圖片移動會比較麻煩,但可以移動cbox的區塊
    同樣在div css的style=" "
    加入padding-top(bottom,left,right)的css標簽
    就可以把cbox移動到你要的地方去配合底圖喔!

    不過要注意文字過多,可能會超過資料夾的限制而被截斷喔!

  • Blog Owner at January 20, 2009 08:50 PM Reply

  • 3樓

    3樓坐沙發

    Sealed

  • Sealed at January 20, 2009 09:18 PM comment

  • Sealed

  • Blog Owner at January 20, 2009 10:58 PM Reply

  • 4樓

    福樓

    Sealed

  • Sealed at January 21, 2009 09:44 AM comment

  • Sealed

  • Blog Owner at January 21, 2009 02:32 PM Reply

  • 5樓

    專業的5樓

    Sealed

  • Sealed at January 21, 2009 09:56 AM comment

  • Sealed

  • Blog Owner at January 21, 2009 02:36 PM Reply

  • 6樓

    6樓

    <div
    style="background:url(http://wabis.com.tw/up/up01/20090122023955631886260.gif)
    no-repeat;width:210px;height:380px;"><script
    src="http://cbox.co.za/box/js.php?boxid=3083864&boxtag=7831&srv=3&width=200&heightmain=305&heightform=75&frameborder=1&bordercolor=%23DBE2ED"
    ></script></div>

    請問大大爲什麼套入背景之後背景會跑到留言版下面呢??
    http://www.wretch.cc/blog/a611211

  • sea1105 at January 21, 2009 01:57 PM comment | email | prosecute

  • 我不是很懂你的意思?
    背景圖本來就是在cbox的下面一層,看你的顯示也很正常
    只是底圖是花花的,讓文字顯示不清楚,可能需要回去改cbox的樣式

    你的cbox寬度是200.圖的寬度是210,div寬度是210
    這表示你的底圖比cbox大,在cbox的左右外圍會有底圖超出

    你的cbox高度是305+75=380,圖高度400,div高度380
    一樣比cbox高,同樣會在下方會有底圖超出

    還是詳述你的問題點吧!

  • Blog Owner at January 21, 2009 02:44 PM Reply

  • 7樓

    7樓

    感謝~~大大!!!
    超棒的^^

    受我一拜QTZ

  • Ayo75 at January 21, 2009 03:15 PM comment | prosecute

  • 丫...我承受不起,
    別拜..(我閃)

  • Blog Owner at January 22, 2009 11:53 PM Reply

  • 8樓

    8樓

    Sealed

  • Sealed at January 21, 2009 03:15 PM comment

  • Sealed

  • Blog Owner at January 23, 2009 12:03 AM Reply

  • 9樓

    9樓

    Sealed

  • Sealed at January 21, 2009 06:05 PM comment

  • Sealed

  • Blog Owner at January 23, 2009 02:52 PM Reply

  • 10樓

    10樓

    原來語法可以這樣放 呵 謝謝大大教學 語法已修正^^

  • sea1105 at January 23, 2009 01:17 AM comment | prosecute

  • 是的,使用不同標簽的崁入語法
    去除連結框可以有不同寫法,不過這個連結框是無名造成的
    並不是cbox本身就有的...無名是有點多此一舉了

  • Blog Owner at January 23, 2009 02:53 PM Reply

  • 11樓

    11樓

    沒錯當初使用Table的確是ifrmae包覆整個cbox框
    所以java無法使用此功能嚕!?
    那能不能變成透明呢?我是試著加入CSS語法中的透明FILTER: Alpha(opacity=10)
    可是好像不行耶..哈哈(抱頭)

  • blue73623 at January 23, 2009 01:35 PM comment | prosecute

  • 可以寫入FILTER: Alpha(opacity=10)
    你可以看看我的右邊那個測試,我是設50
    不過只能設定div整個透明,不能單一透明

    用table分隔java的方法,我想是不可行的
    因為無名只認得cbox的網址,我們又不能自己寫一個js檔放在cbox
    難了....嗚!

  • Blog Owner at January 23, 2009 02:52 PM Reply

  • 12樓

    12樓

    Sealed

  • Sealed at January 23, 2009 02:58 PM comment

  • Sealed

  • Blog Owner at January 23, 2009 03:03 PM Reply

  • 13樓

    13樓

    Sealed

  • Sealed at January 23, 2009 03:53 PM comment

  • Sealed

  • Blog Owner at January 23, 2009 04:37 PM Reply

  • 14樓

    14樓

    Sealed

  • Sealed at February 5, 2009 03:27 PM comment

  • Sealed

  • Blog Owner at February 6, 2009 03:20 PM Reply

  • 15樓

    15樓

    Sealed

  • Sealed at February 6, 2009 07:55 PM comment

  • Sealed

  • Blog Owner at February 6, 2009 08:58 PM Reply

  • 16樓

    16樓

    Sealed

  • Sealed at February 10, 2009 01:45 AM comment

  • Sealed

  • Blog Owner at February 11, 2009 12:47 PM Reply

  • 17樓

    17樓

    Sealed

  • Sealed at February 13, 2009 04:31 AM comment

  • Sealed

  • Blog Owner at March 26, 2009 04:48 AM Reply

  • 18樓

    18樓

    可以麻煩你幫我看一下嘛??弄出來不是只有背景框就是只有留言版的部分
    CBOX語法
    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div><iframe frameborder="0" width="200" height="355"
    src="http://www2.cbox.ws/box/?boxid=1995425&boxtag=g033b4&sec=main"
    marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes"
    name="cboxmain" style="border:#F4B3C2 1px solid;"
    id="cboxmain"></iframe></div>
    <div><iframe frameborder="0" width="200" height="75"
    src="http://www2.cbox.ws/box/?boxid=1995425&boxtag=g033b4&sec=form"
    marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes"
    name="cboxform" style="border:#F4B3C2 1px solid;border-top:0px"
    id="cboxform"></iframe></div>
    </div>
    <!-- END CBOX -->

  • lee19982000 at March 3, 2009 02:46 PM comment

  • 你的語法iframe語法,不是js語法,不能貼在無名喔!

  • Blog Owner at March 26, 2009 04:54 AM Reply

  • 19樓

    19樓

    面板語法184.410

    <div class="box-text"><table id="table1" height="368" cellspacing="0"
    cellpadding="0" width="184"
    background="http://f4.wretch.yimg.com/cathleen0720/21/1368167722.jpg"
    border="0"><tbody><tr><td><div
    id="cboxdiv" align="left">

    <iframe id="cboxmain" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; PADDING-
    LEFT: 10px; BORDER-LEFT: 0px; PADDING-TOP: 120px; BORDER
    -BOTTOM: 0px" name="cboxmain" marginwidth="2" marginheight="2"
    src="http://www2.cbox.ws/box/?boxid=1995425&boxtag=g033b4&sec=main"
    frameborder="0" width="165" height="145"
    allowtransparency="allowtransparency"></iframe><br />

  • lee19982000 at March 3, 2009 02:48 PM comment

  • 注意寬度及高度width="165" height="145"
    還有面板設定中的padding-top,都會影響留言板的內容及位置

  • Blog Owner at March 26, 2009 05:02 AM Reply

  • 20樓

    20樓

    接上面的面板語法
    <iframe id="cboxform" style="BORDER-RIGHT: 100px; PADDING-BOTTOM:
    6px;BORDER-TOP: 0px; PADDING-LEFT: 10px; BORDER-BOTTOM: 0px"
    name="cboxform" marginwidth="2" marginheight="2"
    src="http://www2.cbox.ws/box/?boxid=1995425&boxtag=g033b4&sec=form"
    frameborder="0"
    width="165" scrolling="no" height="85"
    allowtransparency="allowtransparency"></iframe></div></td></tr></tbody></tab
    le></div></div><!-- #box201106 //--
    ><div class="box" id="latest-comment"><h4 class="box-
    title"> </h4></div>

  • lee19982000 at March 3, 2009 02:49 PM comment

  • 21樓

    21樓

    Sealed

  • Sealed at March 29, 2009 01:20 AM comment

  • 22樓

    22樓

    Sealed

  • Sealed at March 29, 2009 01:35 AM comment

  • 23樓

    23樓

    Sealed

  • Sealed at March 29, 2009 02:42 AM comment

  • Sealed

  • Blog Owner at April 1, 2009 08:32 PM Reply

  • 24樓

    24樓

    謝謝版主的教學分享～
    真是太棒了～
    留言版可以更換背景咧\(0^◇^0)/

  • lwhml11 at April 23, 2009 08:57 PM comment | prosecute

  • 25樓

    25樓

    Sealed

  • Sealed at April 26, 2009 09:04 PM comment

  • 26樓

    26樓

    Sealed

  • Sealed at July 20, 2009 08:54 PM comment

  • Sealed

  • Blog Owner at July 22, 2009 08:25 PM Reply

  • 27樓

    27樓

    Sealed

  • Sealed at July 22, 2009 08:47 PM comment

  • Sealed

  • Blog Owner at July 22, 2009 09:14 PM Reply

  • 28樓

    28樓

    Sealed

  • Sealed at July 22, 2009 09:43 PM comment

  • Sealed

  • Blog Owner at July 22, 2009 09:53 PM Reply

  • 29樓

    29樓

    Sealed

  • Sealed at July 22, 2009 10:05 PM comment

  • 30樓

    30樓

    Sealed

  • Sealed at July 30, 2009 12:23 AM comment
1 2 Next
Post A Comment









Yes No



Please input the magic number:

( Prevent the annoy garbage messages )
( What if you cannot see the numbers? )
Please input the magic number

誰來收藏
Loading ...