Resource icon

Xmas MessageUserInfo v1

No permission to download

Shelley

Well-known member
Shelley submitted a new resource:

Xmas MessageUserInfo - A xmas touch to your messageUserInfo area

View attachment 61524 View attachment 61525

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...

Read more about this resource...
 
Anything ending in .css is a style template.
All other style templates are HTML but have no file extension.
 
Shelley updated Xmas MessageUserInfo with a new update entry:

Responsive compliant Fix

Anyone using this enhancement should also add in the following to their EXTRA.CSS . This will hide the images on the narrow responsive width.

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

I'll also include the update for responsive in the overview, initial resource post.

Read the rest of this update entry...
 
Images arnt showing on my style and i have uploaded the images. And the box is showing half green and half blue.
 
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.
 
Images arnt showing on my style and i have uploaded the images. And the box is showing half green and half blue.

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.
 
Great idea and modif but i don't see the images, where should i place the "/icons" folder? Regards, thanks.
 
Great idea and modif but i don't see the images, where should i place the "/icons" folder? Regards, thanks.

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.
 
  • Like
Reactions: rdn

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 */
 

Attachments

  • messageuserinfo-xmas2013.webp
    messageuserinfo-xmas2013.webp
    4.3 KB · Views: 28
  • messageuserinfo-xmasballs2013.webp
    messageuserinfo-xmasballs2013.webp
    6.1 KB · Views: 23
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.
Thanks a Lot!
It works now :)
 
Back
Top Bottom