15/10/2008

Plurk 自訂 CSS - 進階版面

紀錄一下現在的 Plurk 版面+CSS 格式。


畫面截圖,背景是瑞士的馬特洪峰。

CSS 格式如下:

/*
Plurk Layout by www.plurklayouts.com - if asked where you got your layout from, credit www.plurklayouts.com

You may edit the CSS but must credit www.plurklayouts.com for the template.

Enjoy your layout!
- Plurk Layouts
www.plurklayouts.com
*/

/* Main Body and Background of Body */
body, html {
color: #000000;
background-image: url(http://sites.google.com/site/traven99/Home/DSCN2649.JPG);
/*background-image: url(http://plurklayouts.com/images/layouts/Cornwall.JPG);*/
/*background-repeat: repeat;*/
/* font-family: Verdana ; */
background-color: #000000;
}


/* Plurk Textarea */
textarea#input_big, textarea#input_permalink {
background: #ffffff;
border: 1px solid #000000;
/* font-family: Georgia; */
opacity:.7; filter: alpha(opacity=70);
}


/* Time above Plurk Timeline */
#time_show span {
color: #000000;
margin: -5px;
}

/* Search Form in Plurk Timeline */
#mini_search .i_text {
background-image: url(http://plurklayouts.com/images/layouts/transparentwhite.png);
border:1px solid #ffffff;
width:160px;
color: #000000;
-moz-border-radius:8px 8px 8px 8px;
}

#mini_search .i_button {
background-image: url(http://plurklayouts.com/images/layouts/transparentwhite.png);
border:1px solid #000000;
-moz-border-radius:8px 8px 8px 8px;
opacity:.6; filter: alpha(opacity=60);
}


/* CSS code ... in between Plurk and number of Plurk responses - all in timeline */
.dots .inner {
margin-left: 2px;
}



/* Youtube, Images etc hover in Plurks */
.youtube img,.pictureservices img { border: none; opacity:.6; filter: alpha(opacity=60); }
.youtube:hover img,.pictureservices:hover img { border:none; opacity:1; filter: alpha(opacity=100); }

/* Plurk Responses (in a Plurk) background */
.plurk_box .list {
border-right: 1px solid #ffffff;
border-bottom:1px solid #ffffff;
background: #ffffff;
}

/* Delete Save Edit Mute Unmute Close */
.manager .action { color:#5F8B64; margin-left:5px; }
.manager a:hover { text-decoration: none!important; }
.manager .cancel { color:#5F8B64; margin-right:5px; }
.manager .delete { color:#5F8B64; margin-right:5px; }
.unmute { color:#5F8B64!important; }


/* Page Title */
#page_title {
color: #5F8B64;
}


/* Border around Plurk Picture in Timeline */
/*
.p_img {
border: 1px solid #000000;
}
*/
/*Dashboard Background and Info*/
.segment-content {
/* background-image: url(http://www.plurklayouts.com/images/layouts/transparentwhite.png);*/
color: #415121;
padding: 5px;
margin: 5px;
}


/* All Plurks My Plurks*/
#filter_tab {
border:0;
}
#filter_tab a.off_tab {
background-color: #1e5863;
color: #ffffff;
border:0;
filter:alpha(opacity=80); -moz-opacity: .80; opacity: .80;
}

#filter_tab a.off_tab:hover {
color: #ffffff;
filter:alpha(opacity=80); -moz-opacity: .80; opacity: .80;
}

#filter_tab a.filter_selected {
color:#ffffff;
letter-spacing: 1px;
/*text-decoration: underline; */
background-color:#1e5863;
border:0;
filter:alpha(opacity=55); -moz-opacity: .55; opacity: .55;
}

#filter_tab a.filter_selected:hover {}

/*Edit Area*/

#top_login a:hover{color:#ffffff; text-transform: normal;}
#top_bar .content a:hover{color:#ffffff; text-transform: normal;}
#top_bar .content a#edit_link{padding-bottom:1px; color:#ffffff; text-transform: normal;}
#top_bar .content a:hover#edit_link{color:#ffffff; text-transform: normal;}



/* Plurking Textarea*/
#input_small {
/*height: 40px;*/
/* font-family: century gothic;*/
color: #5F8B64;
}

/* Today and Time of Plurks */
#bottom_line {
background:transparent;
color: #ffffff;
/*font-size: 11px;
font-family: Verdana ;*/
border-top:1px solid #ffffff;
border-bottom:1px solid #ffffff;
opacity:.6; filter: alpha(opacity=60);
}

.bottom_start , .bottom_end {color:#ffffff;font-weight:bold;font-size:12px ;}

/* All Plurks Tab */
.bottom_line_bg {
background: transparent;
/*font-size: 11px;
font-family: Verdana ;*/
color:#5F8B64;
border: 1px solid #FFFFFF;
}

.time {margin:0 ; padding:0 ;font-size:17px; color: #ffffff;}

/*Border at beginning of Timeline*/
.day_bg .div_inner {
background-color:#5F8B64;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
border-top:medium none;
position:relative;
width:0px;
}

/*Inside Plurks background for text Plurk Responses */
.plurk_box .caption {
background-color: #5F8B64;
border:0;
/*font-size: 11px;
font-family: Verdana ;*/
color: #ffffff;
}

/* Inside Plurks background for bottom of box */
.info_box {
background: #ffffff;
border: 0 solid #ffffff;
/*font-size: 11px;
font-family: Verdana ;*/
}

/*Inside Plurk Text*/
.plurk_box .plurk_cnt {
background: #ffffff;
border-bottom: 0px #FFFFFF;
color: #000000;
}

.plurk_cnt {
background: #ffffff;
opacity:.7; filter: alpha(opacity=70);
}

/*Inside Plurk - Background where name appears and option to respond*/
.plurk_box .mini_form {
background: #ffffff;
border: 0px solid #FFFFFF;
}

/*URL in Plurks. Colour, Visited etc*/
.plurk a.ex_link {
color: #5F8B64;
/*font-family: century gothic;*/
/*border-bottom: 1px solid #395D45;*/
}

.plurk a.ex_link:hover {
color: #959595;
/*font-family: Verdana ;*/
/*border-bottom: 1px solid #5F8B64;*/
}

/*
.plurk a.ex_link:visited {
font-family: verdana;
}
*/

/*Extra*/
.award_bar {
height: 50px;
}

.friend_holder {
margin-bottom: 4px;
}

.friend_holder table { margin-left: 10px; width: 100%; }

/*Your name by Plurk box - not in timeline */
.qual_holder{
color : #ffffff;
/*font-family: century gothic;*/
}

/*Background colour for time and Plurking Textarea*/
#plurk_form {
margin-top: 40px;
/*background: url(http://plurklayouts.com/images/layouts/transparentwhite.png);*/
color: #5F8B64;
}


/*Number of Responses on Plurks in Timeline*/
.response_count {
background-color: #ffffff;
border: 0 solid #dcdcdc;
color: #888888;
padding: 2px;}

/*Dashboard Stats*/
#dash-stats table td {
color: #000000;
}

/*Dashboard Header2*/
/*
#plurk-dashboard h2{
color: #194362;
font-family:Verdana ;
}*/

/*Private Plurks Languages etc etc*/
#more_options .on, #more_options #more_options_holder {
/*background: url(http://plurklayouts.com/images/layouts/transparentwhite.png);*/
color: #000000;
}


#top_bar #edit_link:hover, #reply #reply_box, #reply h2 {
/*background: url(http://plurklayouts.com/images/layouts/transparentwhite.png);*/
color: #000000;
}

/*Number of Characters left to use*/
.char_updater {
color:#000000;
}

/*New responses on Plurks*/
.new .response_count {
background-color: #E6E86C;
color:#ffffff;
}

/* About Me */
#full_name {
font-size:17px;
color:#000000;
}

p#about_me {
color: #4b5b12;
margin:2px;
text-align:left;
}

a:link {
color: #204855;
text-transform: normal;
}

a:visited, a:active {
color: #2D5031;
text-transform: normal;
}

a:hover {
border:0;
color: #2D5031;
text-transform: normal;
}

/* Bold Italic and Underline */

strong {
color: #4b5b12;
cursor: default;}

strong:hover {
color: #4b5b12;
cursor: default;}



i {
color: #5F8B64;
cursor: default;
}


i {
color: #194362;
cursor: default;
}


i:hover {
color: #395D45;
cursor: default;
}

u {
color: #395D45;
cursor: default;
border-bottom: 0px solid #FFFFFF;
}

u:hover {
color: #1b1d14;
cursor: default;
border-bottom: 0px solid #FFFFFF;}

/* Firefox Selection */
::-moz-selection{
background:#ffffff;
color:#395D45;
}

/*Selection on browsers*/
::selection {
background:#ffffff;
color:#395D45;
}

/*Time of Plurk above Plurk Timeline Strip*/
.day_start, .day {
color:#395D45;
font-weight:bold;
background: transparent;
}

/* Updater Responses and new Plurks */
#updater {
opacity:.6; filter: alpha(opacity=60);
background: #ffffff;
/*text-transform: uppercase;*/
/*font-family: century gothic;*/
border: 0px #FFFFFF;
color: #000000;}

#updater a {
color: #395D45;
/*font-family: century gothic;*/
/*text-transform: uppercase;*/
}

#updater a:hover {
color: #395D45;
/*text-transform: uppercase;*/
/*font-family: century gothic;*/
}


/*Funny Yellow Background on Plurks*/
.plurk_cnt {
background: #ffffff;
border:0;
/*font-size: 11px;
font-family: Verdana ;*/
line-height: 13px;
}

/* LOGO */
#dynamic_logo{
position:absolute;
margin:3px 0 0 5px;
width:168px;
height:162px;
background: transparent;
}

#dynamic_logo img{
height:0px;
width:0px;
}


/* Timeline Holder Background */
#timeline_holder {
background-image: url(http://sites.google.com/site/traven99/Home/DSCN2649.JPG);
background-repeat: repeat-x;
background-color: #000000;
}

/* Timeline Holder Plurks */
#timeline_holder table td {
color: #000000;
background:transparent;
}

/* Top Login */
#top_login a {
/*font-family: century gothic;*/
border:0;
text-decoration: normal;
color: #ffffff;
}

#top_login a:hover {
/*font-family: century gothic;*/
border:0;
text-decoration: normal;
color: #5F8B64;
}
/* Footer Links */
#footer a {
/*font-family: century gothic;*/
color: #99f43f;
border-bottom:1px solid #99f43f;
text-decoration: normal;
}

#footer a:hover {
/*font-family: century gothic;*/
color: #ffffff;
border:0;
text-decoration: normal;
}

/* Top Bar */
#top_bar a {
color: #ffffff;
font-wright: regular;
text-transform: normal;
border:0;
}

#top_bar a:hover {
color: #5F8B64;
background: transparent;
font-wright: regular;
text-transform: normal;
border:0;}

#dashboard_holder a {
background:;
}

#dashboard_holder a:hover {
background:;
}

/* Dashboard */
#plurk-dashboard {
background:transparent;
border:0;
}

/*Dashboard link*/
#plurk-dashboard a {
color: #000000;
text-decoration: none;
border:0;

}
/*Dashboard link hover*/
#plurk-dashboard a:hover {
color: #4b5b12;
text-decoration: none;
border:0;
}

/*Dashboard Friends Section*/
#show_all_friends
{
background: transparent;
padding-top: 5px;
padding-bottom: 11px;
/* text-align:center; */
color: #4b5b12;
}

/*Dashboard Stats area*/
#dash-stats
{ background: transparent;
padding-top: 5px;
padding-bottom: 18px;
/*text-align: center;*/
color: #4b5b12;
position: absolute; left: -1000px; top: -1000px;
}

/*Dashboard Friends area*/
#dash-friends
{ background: transparent;
padding-top: 5px;
padding-bottom: 11px;
/*text-align: center;*/
color: #4b5b12;
}

#dash-friends-pics { position: absolute; left: -1000px; top: -1000px }

/*Dashboard Fans*/
#dash-fans
{ background: transparent;
padding-top: 5px;
padding-bottom: 11px;
/*text-align: center; */
color: #4b5b12;
position: absolute; left: -1000px; top: -1000px;
}

#dash-stats h2, #dash-friends h2, #dash-fans h2 {
/*font-family: century gothic;*/
color:#283d28;
font-size:29px;
line-height:125%;
text-align:left;
border:0;
font-weight: none; }

/*Karma Count */
#karma {
color: #5e8d00;
font-size: 27px;
}

.karma_hover {
color: #000000;
}

/* Tool Tip */
.tooltip_cnt{
background-color: #FFFFFF;
color: #000000;
padding:5px;
margin-top:1px;
border:1px solid #5F8B64;
font-size:7p;}

.AmiTT_main b {
color:#5F8B64;
font-weight:bold;
}

.AmiTT_main {
color:#000000;
line-height:1.2;
border-top: 1px solid #5F8B64;
position:absolute;
text-align:left;
width:209px;
z-index:2000;
}



/* Loves Likes Shares Gives Hates Wants etc */
/*
.q_freestyle { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_loves { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_likes { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_shares { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_gives { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_hates { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_wants { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_wishes{ background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_needs { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_will { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_hopes { background:#395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_asks { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_has { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_was { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_wonders { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_feels { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_thinks { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_says { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
.q_is { background: #395D45; font-family: Verdana ; color: #ffffff; border: 0px solid #ffffff;}
*/

.td_qual { border-bottom: 1px solid lightgrey; padding:2px 2px 2px 2px; }
.td_cnt { border-bottom: 1px solid lightgrey; padding:2px 2px 2px 2px; }


太複雜,CSS 又不是很懂,Try Error 老半天才弄出來的版面~

大會報告

22/Apr., 2010. Ford new Mondeo TDCi 交車


Intense Debate Comments