Followers

14 Mac 2011

Mac 14, 2011 - 1 comment

Ubah gaya kotak dialog komen





Tahu tak korang,yang korang boleh ubah penampilan kotak dialog komen.Ok,cuba tengok ni supaya korang lebih paham.

Ini adalah gaya kotak dialog yang asal

Ini pula kotak dialog yang telah aku ubah suai

Ok,bagaimana aku menukarkannya.Ini adalah kod asal bagi kotak dialog komen dalam template yang aku gunakan.

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Ini pula adalah kod asal yang telah aku tambah dengan kod merah.

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #ffffff;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(http://urlgambaryangakuguna.jpg) no-repeat top left;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Ok,korang boleh bereksperimen dengan kod dalam template korang tapi pastikan korang ada upload backup template.Selamat mencipta kotak dialog yang kreatif ;)



1 ulasan:

Example of a modified comment dialog box.

Catat Ulasan