藝術設計
»
獅子眼下的世界
會員登入 免費註冊 Jacso Entertainment

« 上一頁 | 下一頁 »

Plurk美化版面教學

為了配合我的Jacso blog最近更新了的版面,所以今天在plurk那邊也作了一點小研究,
現在已經成功更新了我的plurk版面了!跟blog是互相配合的,yeah!!

 

   

話不多說,現在我將分享我的小小心得!就當是一個很簡單的教學吧~


ps:作出任何修改前,請先備份原本的設定,如果改錯了也能救回來。  

    

--更改Plurk背景圖--

首先按左上角的「編輯」>在小視窗按「自定外觀」(english version: "edit" >> Customize profile)
找尋以下語法

   

body, html {background:顏色碼 url(圖片網址) left top no-repeat; }

   

顏色碼的部份可以輸入HTML用的16進制色碼RGB色碼,或red,white,black等等顏色字

而"left top"部份是指圖片的位置,
以下這些可以作參考︰
left top >>> 左上角
right top >>> 右上角
center top >>> 上方置中
left bottom >>> 左下角
right bottom >>> 右下角
center bottom >>> 底部置中

   

"repeat"的部份是圖片填滿的設定,
repeat-x >>> 圖片橫向填充
repeat-y >>> 圖片縱向填充

no-repeat >>> 不重複圖片

  
以下是例子︰
body, html {background:white url(http://abc.png) left top repeat-x; }

那麼如果圖片"abc"是透明背景的話,便會看見白底背景,而"abc"圖橫向重複。
如果"abc"圖不是透明,便會看不見background的顏色

     

    

     

--更改plurk標題顏色--

#page_title{color: 顏色碼; }

例子︰
#page_title{color: #fff; }  這樣
標題便會是白色的。

    

    

   

--更改主控台文字樣式--

這個部分會把自我介紹、統計、朋友、粉絲內的所有文字樣式也一拼更改。
其實自我介紹,統計等等的項目也能進行單一修改,不過因為我自己沒有每項修改,也就懶的打了~~~(被巴
  

#plurk-dashboard{color:主控台所有文字的顏色; background: 主控台的顏色; border: 框邊; padding: 2px; }
#plurk-dashboard a {color:連結文字顏色;}
#plurk-dashboard a:hover {color:滑鼠指向連結文字的顏色;}

 
主控台的顏色
輸入顏色碼,輸入transparent為透明。

框邊︰框邊的修改尚在研究中,如果不要框邊便打none

 

例子︰
#plurk-dashboard{color:#777; background: transparent; border: none; padding: 2px; }
#plurk-dashboard a {color:black;}
#plurk-dashboard a:hover {color:#ccc;}

    

    

    

     

--更改Plurk的輸入區--

這個部份應該是別人看不到的,單純是為了方便自己看。 

    

textarea#input_big.content {
background:背景顏色; font-size: 字體大小px; color:文字顏色!important; height: 輸入區的高度px; wrap: soft; padding: 2px; border: 框邊粗幼px solid 框邊顏色; } 

   

背景顏色輸入顏色碼,輸入none為沒有背景色。

文字顏色的部份是我自己加上去的,
如何不設定的話,輸入文字的顏色大概會是黑色,如果使用黑背景便很不方便了!
如果不是使用黑背景的話,不打也沒差~
直接在文字顏色打顏色碼便ok!

框邊粗幼︰輸入none或0都沒有框邊,(個人覺得很不方便)
輸入數值改變框邊粗幼,最少數值是1,最大的不知道哦,不過輸入40也能顯示就是了(要這樣粗幹嘛!

   

(我的)例子︰
textarea#input_big.content {
background:none; font-size: 16px; color:#aea096!important; height: 60px; wrap: soft; padding: 2px; border: 1px solid #aea096; }

   

    

    

好了,教學來到這裡也差不多了。
其實我本人只學過很皮毛的html碼,沒學過css,不過感覺上,css似乎比html容易上手一點點,研究起來也好像容易一點。
因為以上皆為今天的研究成果,所如果有其他美化問題的話,我還沒研究,所以不一定懂得回答你哦~(不付責任)

    

以上的教學歡迎轉載但請記得放上本家連結哦!

 

   

 

標籤 ( 教學 )

如果你的網誌不支援引用網址自動搜尋功能,那麼你可以使用下列的直接引用網址來引用本文章:

http://jacso.hk/trackback.php?id=231434