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

Xmas MessageUserInfo v1

No permission to download
A xmas touch to your messageUserInfo area

Shelley

Well-known member
#1
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...
 

Shelley

Well-known member
#6
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...
 

Shelley

Well-known member
#8
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.
 

Shelley

Well-known member
#9
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.
 

Shelley

Well-known member
#11
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.
 

Shelley

Well-known member
#15

Shelley

Well-known member
#16
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

RoldanLT

Well-known member
#19
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 :)