FriendFeedウィジットのCSSデザイン変更

Posted by joeartsea on 2009-02-12

FriendFeedはいわゆるライフストリーミングサービスというやつで、ブログとかTwitterとかソーシャルブックマークとかいろんなWeb上のサービスを利用した活動ログを自分のブログなどに貼って、各サービスからブログへ誘導し自分の全体像を広く知ってもらいたいという欲求を満たしてくれます。

僕の場合、ウィジットの背景が透過になって文字色を変更できればいいだけだったので、Firebugを使ってウィジット呼び込み後のHTML及びCSSを見てそれを上書きする形でデザイン変更しました。重要なのはウィジットを読み込むコードの後に書くことです。それより前に書いても読み込んだCSSで上書きされてしまいますので意味がありません。

僕がウィジットを読み込むコードの後に上書きするよう付け加えたCSSは以下になります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
.friendfeed.widget,
div.friendfeed.widget div,
div.friendfeed.widget span,
div.friendfeed.widget img,
div.friendfeed.widget table,
div.friendfeed.widget tr,
div.friendfeed.widget td {
background: none;
color: #aaa;
border: none;
}
.friendfeed.widget a {
color: #B8860B;
}
.friendfeed.widget a:visited {
color: #B8860B;
}
.friendfeed.widget .bottom a:visited {
color: #B8860B;
}
.friendfeed.widget .feed .cluster .summary a {
color: #B8860B;
}
.friendfeed.widget .bottom {
background: none;
border-top: none;
}
</style>