1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Xmas MessageUserInfo v1

A xmas touch to your messageUserInfo area

  1. Shelley
    xmasmessageuserinfo1.png xmasmessageuserinfo2.png

    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;} }
    
    THLove, worrorfight, ir4mt and 14 others like this.

Recent Updates

  1. Responsive compliant Fix

Recent Reviews

  1. Xarwin
    Xarwin
    5/5,
    Version: v1
    Wow, easy to edit and amazing outcome!
  2. Lemminator
    Lemminator
    5/5,
    Version: v1
    top
  3. SchmitzIT
    SchmitzIT
    5/5,
    Version: v1
    Thanks for sharing this, Shelley. Merry Christmas!
  4. Janmaat
    Janmaat
    5/5,
    Version: v1
    I like it like that :)
  5. wickedstangs
    wickedstangs
    5/5,
    Version: v1
    Very cool and awesome template edit...
  6. Pierre Boulanger
    Pierre Boulanger
    5/5,
    Version: v1
    Great.
    Marry Christmas to all.
  7. Tyty
    Tyty
    5/5,
    Version: v1
    Thanks for this great touch on our forum ;-)
  8. Sheratan
    Sheratan
    5/5,
    Version: v1
    Another great resource from Shelley!
  9. SelfSufficientMe
    SelfSufficientMe
    5/5,
    Version: v1
    This is just what I was looking for - a really nice Xmas touch to my forum. Thanks and Merry Xmas!
  10. AndreaMarucci
    AndreaMarucci
    5/5,
    Version: v1
    Beautiful as usual Shelley!