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

    Shelley Well-Known Member

    Shelley submitted a new resource:

    Xmas MessageUserInfo - A xmas touch to your messageUserInfo area

    Read more about this resource...
     
  2. Where is the EXTRA.CSS located ?
     
  3. Brogan

    Brogan XenForo Moderator Staff Member

    ACP Search: extra.css
     
  4. Here I am looking for a file to edit. oops.

    Thank you!
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Anything ending in .css is a style template.
    All other style templates are HTML but have no file extension.
     
    Shelley likes this.
  6. Shelley

    Shelley Well-Known Member

    Shelley updated Xmas MessageUserInfo with a new update entry:

    Responsive compliant Fix

    Read the rest of this update entry...
     
  7. Inkman

    Inkman Active Member

    Images arnt showing on my style and i have uploaded the images. And the box is showing half green and half blue.
     
  8. Shelley

    Shelley Well-Known Member

    Could be a path issue you have incorrectly set. As for the blue showing, without a link to check what is going on I am not sure what to advise in the way of a fix.
     
  9. Shelley

    Shelley Well-Known Member

    Did you figure out the Issue?

    I'm guessing since you never got back to me but I'm assuming your using a custom style so the obvious issues that might be causing this would be...

    1. Path issue (incorrectly set) if it's a custom style with a custom folder structure then the path will need adjusting for the images to show.
    2. Blue background showing indicates you may have css overriding certain classes stopping the green from showing so you would be best checking your EXTRA.CSS template or check to see if any css is overriding the xmas messageuserinfo css.
    I'm merely guessing at this point but those two might be the reasons.
     
  10. Tyty

    Tyty Member

    Great idea and modif but i don't see the images, where should i place the "/icons" folder? Regards, thanks.
     
  11. Shelley

    Shelley Well-Known Member

    Yes, upload them to the /icons folder. Obviously if it's a custom style with a different folder structure adjust the path in the css to the custom styles location if it warrants such adjustments.
     
  12. Tyty

    Tyty Member

    Oh yes, work now, i didn't put it at the right place!! thank you very much Shelley :)
     
    Shelley likes this.
  13. RoldanLT

    RoldanLT Well-Known Member

    Bells only appear on thread starter?
    Live demo
     
    Shelley likes this.
  14. RoldanLT

    RoldanLT Well-Known Member

  15. Shelley

    Shelley Well-Known Member

    Sorry RoldanLT I didn't notice the posts you made. Yeah that will be the reason. If your already using the messageuserinfo helper span (anyone for that matter) then the xmas balls won't display in the correct position.

    I may have a workaround where I can place the balls (god that sounds odd) on the image using the :before selector.
     
    RoldanLT likes this.
  16. Shelley

    Shelley Well-Known Member

    Here's that fix. The messageuserinfo helper span isn't being used in this version so your able to put back your staff ribbon. The updated images are in this posts attachment and helper css removed.

    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:before {
      background: url("@imagePath/xenforo/icons/messageuserinfo-xmasballs2013.png") no-repeat scroll 0 0 transparent;
      content: " ";
      display: block;
      height: 60px;
      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 */
    
     

    Attached Files:

    Mirovinger and RoldanLT like this.
  17. RoldanLT

    RoldanLT Well-Known Member

  18. Shelley

    Shelley Well-Known Member

    That's because your not using the correct image in the previous post. ;)

    edit: hang on. seems like you are using the correct image, let me investigate further. :p

    edit: Set the height on .messageUserBlock:before to 60px that will resolve the issue.
     
  19. RoldanLT

    RoldanLT Well-Known Member

    Thanks a Lot!
    It works now :)
     
  20. Pierre Boulanger

    Pierre Boulanger Active Member

    Very nice resource but I need help :)
    How can i prevent my messageuserinfo area from being green?

    test.png
    Here is my default theme color..
    test1.png

    Thanks ;)
     

Share This Page