Trang trí Xmas cho MessageUserInfo v1

[PVS]

Trang trí Xmas cho MessageUserInfo v1

Tóm tắt: Điều này sẽ thay đổi khu vực messageuserinfo và thêm một festive touch. Dễ dàng thêm và dễ dàng để loại bỏ khi mùa lễ hội kết thúc.

Ribbons trong hình không phải là một phần của việc tăng cường và bạn chắc chắn sẽ cần phải tweat một số văn bản và tên người dùng màu sắc văn bản hoặc bất kỳ add-on bên thứ 3 khác bạn đã hiển thị trong khu vực messageuserinfo.

Cài đặt: Tải các hình ảnh từ tập tin .zip vào folder /icons trên host của bạn và sau đó dán đoạn mã sau vào template EXTRA.CSS của bạn.

/* Start Xmas messageUserInfo Enhancement Start Xmas messageUserInfo Enhancement Start */

.message .messageInfo { background-color: transparent; }
.message .messageUserBlock {  border: 1px solid #233e03;
box-shadow: 0 9px 0 0 transparent inset, 0 -9px 0 0 transparent inset, 12px 0 15px -4px rgba(0, 0, 0, 0.3) inset, -12px 0 15px -4px rgba(0, 0, 0, 0.3) inset;
background: #dae8b0; /* Old browsers */
background: -moz-linear-gradient(top, #dae8b0 0%, #73a31d 3%, #638e0b 38%, #3b6d00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dae8b0), color-stop(3%,#73a31d), color-stop(38%,#638e0b), color-stop(100%,#3b6d00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dae8b0 0%,#73a31d 3%,#638e0b 38%,#3b6d00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dae8b0 0%,#73a31d 3%,#638e0b 38%,#3b6d00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dae8b0 0%,#73a31d 3%,#638e0b 38%,#3b6d00 100%); /* IE10+ */
background: linear-gradient(to bottom, #dae8b0 0%,#73a31d 3%,#638e0b 38%,#3b6d00 100%); /* W3C */ }

.message .messageUserBlock div.avatarHolder { background-color: transparent; }
.message .messageUserBlock .arrow span, .message .messageUserBlock .arrow {display: none;}
.message .messageUserBlock .extraUserInfo { background-color: transparent; padding-bottom: 10px; }
.message .avatar img, .message .avatar .img, .message .avatarCropper { background-color: #73a31d ; border: 1px solid #3b6d00 ;}
.messageUserBlock .helper {
  background: url("@imagePath/xenforo/icons/xmas-messageuserinfo-balls2013.png") no-repeat scroll 0 0 transparent;
  display: block;
  height: 47px;
  left: -7px;
  position: absolute;
  top: 0;
  width: 135px; }

.messageUserBlock:before {
  background: url("@imagePath/xenforo/icons/messageuserinfo-xmas2013.png") no-repeat scroll 0 0 transparent;
  content: " ";
  display: block;
  height: 30px;
  margin-top: 4px;
  position: absolute;
  right: -6px;
  top: -10px;
  width: 135px;
  z-index: 1; }
.messageUserBlock:after {
  background: url("@imagePath/xenforo/icons/messageuserinfo-xmas2013.png") no-repeat scroll 0 0 transparent;
  content: " ";
  display: block;
  height: 30px;
  margin-top: 4px;
  position: absolute;
  right: -6px;
  bottom: -25px;
  width: 135px; }
.message .messageUserBlock h3.userText  {text-align: center;}

/* Start Xmas messageUserInfo Enhancement Start Xmas messageUserInfo Enhancement Start */

Bạn cũng nên bao gồm những điều sau đây để ẩn các trang trí Xmas trong bối cảnh hẹp để responsive. Thêm vào template EXTRA.CSS

@media (max-width:@maxResponsiveNarrowWidth)
{ .messageUserBlock:before, .messageUserBlock:after, .messageUserInfo .helper {display: none !important;} }

Chúc các bạn thành công.

Nguồn: xenforo.com​