Xmas MessageUserInfo v1

Shelley · Nov 26, 2013

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

View attachment 61880
Here is my default theme color..
View attachment 61879

Thanks

Just add the following to EXTRA.CSS

Code:

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

Pierre Boulanger · Nov 26, 2013

Shelley said:

Just add the following to EXTRA.CSS

Code:

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

Perfect Thanks!!!!!!!!

Pierre Boulanger · Nov 26, 2013

Just for your consideration (a small responsive issue)

iPhone 5s

Shelley · Nov 26, 2013

Pierre Boulanger said:
Just for your consideration (a small responsive issue)

iPhone 5s

View attachment 61882 View attachment 61883

If you go to the release thread you'll notice a snippet of css to not show the xmas stuff in narrow responsive, I submitted a while back, which will disable that.

Pierre Boulanger · Nov 26, 2013

Shelley said:
If you go to the release thread you'll notice a snippet of css to not show the xmas stuff in narrow responsive, I submitted a while back, which will disable that.

Well that helped partially

With the snipper of css:

Please note that without Xmas MessageUserInfo resource (and the snipper of course) it looks normal:

Maybe there is a conflict with another css code that i have inserted in the past

Shelley · Nov 26, 2013

Pierre Boulanger said:
Well that helped partially
With the snipper of css:

View attachment 61887

Please note that without Xmas MessageUserInfo resource (and the snipper of course) it looks normal:

View attachment 61888

Maybe there is a conflict with another css code that i have inserted in the past

Yeah, that is intended. It is removed on narrowwidth since the narrowwidth is dynamic and the images are fixed as it'll display differently on many of the width settings on narrow and never sit correctly, so it's easiest to disable it from that setting.

Pierre Boulanger · Nov 29, 2013

I just notice that the decoration is also viewable in xenporta pictures

2013-11-29 13_15_41-my2cv.gr - The story of a legend.webp

Shelley · Nov 29, 2013

Pierre Boulanger said:
I just notice that the decoration is also viewable in xenporta pictures

View attachment 62093

I just visited your site and couldn't see the issues. I assume you fixed it?

Pierre Boulanger · Nov 29, 2013

Shelley said:
I just visited your site and couldn't see the issues. I assume you fixed it?

Actually i removed the code

Shelley · Nov 29, 2013

Pierre Boulanger said:
Actually i removed the code

Could you possibly put the code back in so I can debug it in firefox and post the solution so it doesn't display in that area?

Shelley · Nov 29, 2013

I think this might do it.

Code:

.recentNews .messageUserBlock:before, .recentNews .messageUserBlock:after {display: none;}

If you have the helper span in too then you'll have to add all 3 classes in

Code:

.recentNews .messageUserBlock:before, .recentNews .messageUserBlock:after, .recentNews  .messageUserBlock .helper {display: none;}

Pierre Boulanger · Nov 29, 2013

Shelley said:
I think this might do it.

Code:

.recentNews .messageUserBlock:before, .recentNews .messageUserBlock:after {display: none;}

If you have the helper span in too then you'll have to add all 3 classes in

Code:

.recentNews .messageUserBlock:before, .recentNews .messageUserBlock:after, .recentNews .messageUserBlock .helper {display: none;}

Christmas magic!!!!!

That helped a lot!! Back on

lostincable · Dec 1, 2013

Looks fantastic!

Does anyone know how I can change the colour of the usernames so I can make them a different colour.

They are orange site wide so a bit hard to read against the green messageuserinfo.

Cheers!

Dakis · Dec 1, 2013

Is this easy to change the dimensions of this as I use a slightly wider messageuserinfo part? (144px instead of the standard 124px) Or would the images themselves need re-doing ?

Shelley · Dec 1, 2013

Dakis said:
Is this easy to change the dimensions of this as I use a slightly wider messageuserinfo part? (144px instead of the standard 124px) Or would the images themselves need re-doing ?

The images themselves would need redone.

Shelley · Dec 1, 2013

Dakis said:
Is this easy to change the dimensions of this as I use a slightly wider messageuserinfo part? (144px instead of the standard 124px) Or would the images themselves need re-doing ?

Sorry for the short response I was on my mobile at the time of posting the previous post @Dakis

I might have something for your wider width today with regards to the images.

Shelley · Dec 1, 2013

lostincable said:
Looks fantastic!

Does anyone know how I can change the colour of the usernames so I can make them a different colour.

They are orange site wide so a bit hard to read against the green messageuserinfo.

Cheers!

You could add something like the following in your EXTRA.CSS template to change all the usergroup markups temporarily while you have the xmas stuff applied. Depending on your usergroup ID you would change "style3" "style4" etc for your usergroup and set the colour you want to use.

Code:

.messageUserBlock .style3,  .messageUserBlock .style4, .messageUserBlock .style5 { color: lime;}

Shelley · Dec 1, 2013

Dakis said:
Is this easy to change the dimensions of this as I use a slightly wider messageuserinfo part? (144px instead of the standard 124px) Or would the images themselves need re-doing ?

You'll have to adjust the css accordingly for these to work. Because I have added the xmas balls to the moss this will use the two images instead of 3 so you should remove the helper span and just use the Before and after selectors

Dakis · Dec 2, 2013

Thanks Shelley, I've tried making this work but I can't get the numbers right, thankyou for your help though.

Shelley · Dec 2, 2013

Dakis said:
Thanks Shelley, I've tried making this work but I can't get the numbers right, thankyou for your help though.

Could you re-apply it and link me to your site (style) and I can perhaps debug it and get a solution posted for you?

Xmas MessageUserInfo v1

Well-known member

Active member

Active member

Well-known member

Active member

Well-known member

Active member

Well-known member

Active member

Well-known member

Well-known member

Active member

Active member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Attachments

Well-known member

Well-known member

Similar threads

We value your privacy