Đóng khung avatar bằng css

[Eagle8x]

First topic message reminder :

Dạo web 1 vòng kiếm được đoạn code hay thế là chia sẻ anh em ngay kẻo nguội mất.
Cơ bản chỉ dùng cho version nào thay đổi được template.

Bước 1: Vào ACP Template view topic body tìm chỗ AVATAR thêm :

Code:

<span class="avatarcp">{postrow.displayed.POSTER_AVATAR}</span>

Bước 2: Vào ACP Display Colors CSS thêm đoạn code sau:

Code:

span.avatarcp img {
                max-width:110px;
      background-color:beige;
      border:1px solid #FFCC33;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border-radius:5px;
      padding:8px;
      -webkit-transform: rotate(-4deg);
      -moz-transform: rotate(-4deg);
      transform: rotate(-4deg);
      -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
      -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
      box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   }

Code gốc không có max-width, mình thêm vô. Còn bên dưới là các thuộc tính mà các bạn có thể thay đổi được để ra cái khung hoành tráng hơn .

Bạn nào chế ra được khung đẹp thì post lên để mọi người cùng xài nhé

Nhờ phutu và code đã được cải tiến : Khi rê chuột vào thì nó ngay ngắn lại

Code:

span.avatarcp img:hover {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
}

Và để nó hiện trong forum dạng blog thì thêm .blog_comment-avatar img
Cụ thể như sau:

Code:


.blog_comment-avatar img, span.avatar1 img {
   max-width:110px;
   background-color:beige;
   border:1px solid #FFCC33;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   padding:8px;
   -webkit-transform: rotate(-4deg);
   -moz-transform: rotate(-4deg);
   transform: rotate(-4deg);
   -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   box-shadow:2px 2px 10px rgba(0,0,0,0.2)
}
.blog_comment-avatar img:hover, span.avatar1 img:hover{
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   transform: rotate(0deg)}

[gaisvip]

anh admin hướng dẫn cách làm khung avatar giống hệt chinh phục đi

[Eagle8x]

anh admin hướng dẫn cách làm khung avatar giống hệt chinh phục đi

Xem bài 1 đi em.

[gaisvip]

hic em làm có được đâu nó chả ra cái khung nào cả có mỗi avatar không

[Eagle8x]

Nếu làm theo y chác trên mà không được thì mình cũng không biết chỉ giì hơn nữa, vì mình cũng làm theo cách đó thôi mà

[gaisvip]

để em thử lại:) dù sao cũng vote cho anh

[quang8502535]

"view topic body" ở đâu

[_Mark_]

=.= ACP -> display -> Quản lý tổng thể

[Yuri_Yuki23]

Làm k dc bạn ơi

[batonchinsu]

Làm k dc bạn ơi

Không được là không hiển thị hay không biết làm?

[Yuri_Yuki23]

không hiển thị bạn à
giờ thì dc rồi nhưng tại sao nó ra tận 2 cái avar vậy bạn ?

[handsomevip007]

99% bạn đã chèn thêm code này chứ không sửa lại

Code:

<span class="avatarcp">{postrow.displayed.POSTER_AVATAR}</span>

Kiếm cái dưới đây xem có bị dư ra không thì xóa bớt

Code:

{postrow.displayed.POSTER_AVATAR}

[phamvancuong.dctv]

Mình xin lỗi, mình làm như Ea, cái CSS của mình giờ lỗi luôn rồi.
Làm sao để khắc phục bây giờ mọi người?/

Code:

http://www.diachatthuyvan.com/forum

[handsomevip007]

Mình xin lỗi, mình làm như Ea, cái CSS của mình giờ lỗi luôn rồi.
Làm sao để khắc phục bây giờ mọi người?/

Code:

http://www.diachatthuyvan.com/forum

Lạm ngược lại với hướng dẫn ở trên hoặc backup lại forum

[ligerv]

Mình xin lỗi, mình làm như Ea, cái CSS của mình giờ lỗi luôn rồi.
Làm sao để khắc phục bây giờ mọi người?/

Code:

http://www.diachatthuyvan.com/forum

vô CSS tìm đoạn ni

Code:

 textarea#text_editor_textarea {
    width: 98% !important;
font-family:Times New Roman;
font-size:16px;
color: #0000D0;

padding:8px;

border-top : 3px solid #FFD7C4;
border-right : 1px solid #FFD7C4;
border-bottom : 1px solid #FFD7C4;
border-left : 3px solid #FFD7C4;

sửa thành

Code:

 textarea#text_editor_textarea {
    width: 98% !important;
font-family:Times New Roman;
font-size:16px;
color: #0000D0;

padding:8px;

border-top : 3px solid #FFD7C4;
border-right : 1px solid #FFD7C4;
border-bottom : 1px solid #FFD7C4;
border-left : 3px solid #FFD7C4; }

[phamvancuong.dctv]

Mình đã xóa đoạn CSS đó, cả trong viewtopic body nhưng CSS vẫn báo lỗi

Detected error
We have counted a different number of "{" and of "}".
It means your CSS risks to be not valid and will not be posted correctly
on your forum.

We advise you to reread your code.

Bạn có thể giúp mình được ko?

Việc backup mình chưa làm bao giờ, mình backup như nào được, nếu phải sử dụng tài khoản và mật khẩu admin đầu tiên thì không được, mình ko nhớ được.

[phamvancuong.dctv]

@:ligerv Mình đã sửa như bạn CSS ko báo lỗi, nhưng diễn đàn mình ko như trước nữa, nó vẫn lỗi. Mình cần làm gì tiếp theo bạn?

[ligerv]

vậy bạn xoá đoạn đó đi thử xem , chắc do css dài quá , nếu xoá đi vẫn k dc thì post css thử xem

[phamvancuong.dctv]

Mình đã xóa đoạn đó nhưng vẫn không được.
CSS của mình:

Code:

body
{
    background: #ebebeb;
    color: #333333;
    font: 13px Geneva, Arial, Helvetica, sans-serif;
    margin: 0px 3px;
    padding: 0px;
    /*background-attachment: fixed;*/
}
a:link, body_alink
{
    color: #375d7a;
    text-decoration: none;
}
a:visited, body_avisited
{
    color: #375d7a;
    text-decoration: none;
}
a:hover, a:active, body_ahover
{
    color: #2f5069;
    text-decoration: underline;
}
.page
{
    background: #ffffff;
    color: #333333;
}
td, th, p, li
{
    font: 13px Geneva, Arial, Helvetica, sans-serif;
}
.tborder
{
    background: #d4d4d4;
    color: #333333;
    border-bottom:1px solid #d4d4d4;
    border-left:1px solid #d4d4d4;
    border-right:1px solid #d4d4d4;
}
.tcat,td.cat,td.catBottom,td.catHead,td.catLeft,td.catRight,td.catSides,td.rowpic
{
    background: #cfcfcf url(http://i26.servimg.com/u/f26/14/66/87/86/tcat210.gif) repeat-x top left;
    color: #444444;
    font: bold 12px Geneva, Arial, Helvetica, sans-serif;
    padding:6px;
}
.tcat a:link, .tcat_alink
{
    color: #3f3f3f;
    text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
    color: #3f3f3f;
    text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
    color: #2a2a2a;
    text-decoration: underline;
}
.thead
{
    background: #cfcfcf url(http://i26.servimg.com/u/f26/14/66/87/86/thead210.gif) repeat-x top left;
    color: #363636;
    font: bold 11px Geneva, Arial, Helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
    color: #2f5069;
}
.thead a:visited, .thead_avisited
{
    color: #2f5069;
}
.thead a:hover, .thead a:active, .thead_ahover
{
    color: #264257;
}
.tfoot
{
    background: #eeeeee;
    color: #5a5a5a;
    padding:3px 6px;
}
.tfoot a:link, .tfoot_alink
{
    color: #707070;
}
.tfoot a:visited, .tfoot_avisited
{
    color: #707070;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
    color: #4f4f4f;
}

.alt1,.alt1Active,td.row1,td.row1Right,td.row3,td.row3.over:hover,td.row1.over:hover,td.row2,td.row3Right,td.spaceRow{background:#FFF url(http://i26.servimg.com/u/f26/14/66/87/86/alt10.gif) repeat-x bottom;border-bottom:0px solid #d2d2d2;border-left:0px solid #d2d2d2;border-right:0px solid #fff;border-top:0px solid #fff;color:#2a2a2a}

.alt2,.alt2Active{background: #FFFFFF url(http://i26.servimg.com/u/f26/14/66/87/86/f11010.gif) bottom repeat-x;;
    color: #000000;
    border: 0px solid #EDEDED;}
.inlinemod
{
    background: #fff4c1;
    color: #222222;
    font-size: 13px;
}
.wysiwyg
{
    background: #fbfbfb;
    color: #333333;
    font: 13px Geneva, Arial, Helvetica, sans-serif;
}
.wysiwyg a:link, .wysiwyg_alink
{
    color: #052b5a;
}
.wysiwyg a:visited, .wysiwyg_avisited
{
    color: #052b5a;
}
.wysiwyg a:hover, .wysiwyg a:active, .wysiwyg_ahover
{
    color: #02162f;
}





button.button2, input.button2 {
    font-size: 0.7em;
    border: 1px solid #BCBCBC;
    width: auto !important;
    padding: 1px 0px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #000000;
    background-repeat: repeat-x;
    background-color: #FAFAFA;
    background-image: url('http://2img.net/i/fa/prosilver/bg_button.gif');
    background-position: top;
    overflow: visible;
    vertical-align:middle;

border-top : 1px solid #008000;
border-right : 2px solid #FFA953;
border-bottom : 2px solid #FFA953;
border-left : 1px solid #008000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
    }

/* http://2img.net/i/fa/prosilver/bg_button.gif
http://2img.net/i/fa/wysiwyg/bg_button.png */

button.button2:hover, input.button2:hover {
    border: 1px solid #ff00d9;
    color: #ff00d9;
    background-image: url('http://2img.net/i/fa/wysiwyg/bg_button.png');
    background-position: 0 100%;

border-top : 1px solid #008000;
border-right : 2px solid #0000FF;
border-bottom : 2px solid #0000FF;
border-left : 1px solid #008000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
    }

Bạn giúp mình sửa với.

[hunghsmn]

Không biết mình viết thế này có giống chủ topic hay không, cứ coi như là bài hường dẫn của mình vậy nhé:

Trogn Viewtopic_body mặc định thì đây là KHU VỰC PROFILE cần đóng khung:

Code:

<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />

Trong đó {postrow.displayed.POSTER_AVATAR} chính là avatar.

Bây giờ mình đóng cả khu vực profile bằng 8 khung lồngvào nhau, mổi kung mỗi kiểu mỗi màu khác nhau như sau: (Sau chữ border lần lược là: độ dày khung, kiểu khung và mã màu khung. Riêng khung trong cùng mình thêm padding: 8px; là để nội dung bên trong cách ra một chút chứ không sát với viền)

Code:

<div style="background-color: #FFFFE0">
<div style="border:2px Groove #FF0000">
<div style="border:2px Double #00FFFF">
<div style="border:2px Ridge #FFB000">
<div style="border:2px Inset #FFF68F">
<div style="border:2px solid #008080">
<div style="border:2px Dotted #EEDC82">
<div style="border:2px Outset #A0A0A0">
<div style="border:2px solid #FFEC8B">
<div style="border:2px Dashed #0000FF;  padding: 8px;">

KHU VỰC PROFILE

</div></div></div></div></div></div></div></div></div></div>

Chú ý: Bên trên có bao nhiêu thẻ div mở thì bên dưới cũng có bấy nhiêu thẻ div đóng.

Bây giờ giả sử bên trong khung profile này các bạn lại thích đòng khung riêng cái Avatar thì các bạn chĩ việc đóng riêng cho {postrow.displayed.POSTER_AVATAR} một khung nữa thôi, Ví dụ mình đóng riêng cho nó mộtkhung đơn kiểu ridge, dày 7 px. Như vậy Toàn bộ khu vực profile mặc định bây giờ thành :

Code:



<div style="background-color: #FFFFFF">
<div style="border:2px Groove #FF0000">
<div style="border:2px Double #FFFF00">
<div style="border:2px Ridge #FFB000">
<div style="border:2px Inset #FFF68F">
<div style="border:2px solid #008080">
<div style="border:2px Dotted #EEDC82">
<div style="border:2px Outset #A0A0A0">
<div style="border:2px solid #FF00A0">
<div style="border:2px Dashed #0000FF; padding: 8px;">

<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}

<div style="border:7px Ridge #FF8080">
{postrow.displayed.POSTER_AVATAR}
</div>
<br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />
</div></div></div></div></div></div></div></div></div></div>

Mình hay tỉ mỉ vì mình muốn các bạn học chứ không chỉ là chuyện đóng khung avatar. Làm sao để vài tháng hay vài năm sau rồi cái diẽn đàn của các bạn cũng sẽ chết. lúc đó thì các bạn cũng trang bị cho mình một ít kiến thức chứ không phải chép vô rồi quên mất. Đó là ý muốn của mình, có gì các bạn thông cảm.

HỌC LÀ CHÍNH

[huuhien_210]

Sau khi thêm code vào css nó hiện thế này ạ:
Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.
chủ topic coi dùm em ạ!

[whylove]

cái này giống cái avtar của diễn đàn http://diendan.chinhphuc.info hả bạn

[hotboyhauloc]

thank

[miamor]

Kaka

Và để nó hiện trong forum dạng blog thì thêm .blog_comment-avatar img
Cụ thể như sau:

Code:


.blog_comment-avatar img, span.avatar1 img {
   max-width:110px;
   background-color:beige;
   border:1px solid #FFCC33;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   padding:8px;
   -webkit-transform: rotate(-4deg);
   -moz-transform: rotate(-4deg);
   transform: rotate(-4deg);
   -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   box-shadow:2px 2px 10px rgba(0,0,0,0.2)
}
.blog_comment-avatar img:hover, span.avatar1 img:hover{
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   transform: rotate(0deg)}

sao mình không thêm bước trên mà nó vẫn hoạt động rất bình thường , bước này phải chăng là thừa???????????? hay còn tác dụng gì khác

Chắc là trong code view_comments của bạn có thẻ span class avatarcp rồi nên k cần nữa...

[kiengc]

Tuyệt vời. Một phát ăn ngay, đã thanks Eagle8x

[hoanblue]

dep lam thanh

[Sponsored content]