Summary: This will change your messageuserinfo area and add a festive touch. Easy to add and easy to remove when the festive season is over.
Ribbons in the screenshot are not part of the enhancement and you will most certainly need to tweat some text and username text colours or any other 3rd party add-on you have displaying in the messageuserinfo area.
Install: Upload the images from the .zip file to your /icons folder and then paste the following into your EXTRA.CSS template.
Code:
/* 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 */You should also include the following to hide the xmas decor in the narrowest setting in responsive. Add to EXTRA.CSS template
Code:
@media (max-width:@maxResponsiveNarrowWidth)
{ .messageUserBlock:before, .messageUserBlock:after, .messageUserInfo .helper {display: none !important;} }
