CboxBG.gif 

Cbox加入美美背景和透明捲軸

 

 

 

Cbox在部落格中為最廣泛使用的迷小留言版,若你還沒有Cbox可以來看看:

教學│CBOX安裝及設定面板

接下來,我們來實現CBOX插入背景圖且使捲軸透明,無名也適用喔!

 


line30-19.gif   


set270.gif教學Start 箭頭.gif

 

1.jpg 製作背景圖:圖片大小視Cbox的寬高去製作,輸入區跟訊息區的呈現也先設定好

做圖時,圖片高度最多超出Cbox高度20px,剛好到廣告上方,廣告可以設資料夾高度來掩蓋。

圖片高若超過Cbox高度20px,Cbox廣告會擋到圖片,若要顯示全圖就會蓋不到廣告!

但在步驟2可以利用Padding和Cbox的heightmain、heightform,來依你的圖片調整位置!

 

4.jpg 崁入Cbox:利用DIV和CSS語法加入背景圖,若要將捲軸透明就必須要有table

 

<div>和</div>包覆你的Cbox語法,紫字為設定背景圖,灰字為設定表格,粉字為你Cbox的JS語法

 

調整Cbox的位置:

style=" "之內,加入CSS語法↓Padding去移動,如:Padding-top:10px; 為距離上10px

Padding-top(上)、Padding-left(左) 、Padding-right(右)、Padding-bottom(下)

 

調整Cbox的大小:

修改橘字JS語法width(寬度)、heightmain(訊息區高)及heightform(輸入區高)來配會底圖

 

加入透明捲軸:

綠字的style=" "之內,加入濾鏡語法↓FILTER去設定

FILTER: Chroma(Color=#0C0300); #0C0300為要透明的色碼,也就是你的Cbox的捲軸色碼

 

若網誌的文字、框線等有相同色碼#0C0300,也會跟著變透明,所以最好設成不相關的色碼!

 

其他區塊透明:

只要更改Cbox即可(如上圖),依自己的需求把區塊的色碼清除就能變成透明了。

 

其他應用,圖片有濾鏡特效:

藍字的style=" "之內,加入濾鏡語法↓FILTER去設定,以半透明濾鏡為例

FILTER:Alpha(opacity=n);n值為0~100,透明度說明↓


 ├───────────────
───────┤
 
100%                                50%                               0%
 不透明                             半透明                         完全透明

無名資料夾有字數限制,若CSS語法字數超過,就會被切掉一部份,而無法正常顯示。

 

3.jpg 複製語法照上述增加和修改,語法之間不要斷行!

 

 

4jpg 貼回部落格側欄:視情況再去修改資料夾的高度或寬度喔!

寬度依各自需求設定,但別超過連結列寬度,否則連結列會往下跑喔!

設定的高度為背景圖高度,不然會看到廣告喔!

若Cbox貼到部落格後,還會顯示藍邊,在橘字的前加<a>,後加</a>
<a>
Cbox的JS語法</a>

 

 

line30-19.gif 

 

使用規範

 

arrow
arrow
    全站熱搜

    來玩我C.M.P 發表在 痞客邦 留言(0) 人氣()