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

Add-on Avatar image overlay of the French Flag colours

Stuart Wright

Well-known member
#1
Could some kind person please create a free addon which adds a user preference option 'Show support for France after the terrorist attack' (editable phrase) which if selected displays the attached coloured image with an opacity of maybe .5 over avatars?
So users of Xenforo forums can show our solidarity with the French people?
 

Attachments

Robust

Well-known member
#5
How about a div with three columns and an opacity of .5?
Made sense to me. I just suck at CSS. Oh, and that'd require replacing everywhere the avatar is done. The preferred implementation would be to add CSS without having to add more template code to make it work, because avatars are used in too many templates to make this a global change. A non global change is simply weird. Saving a new avatar is a waste of space since it needs to be revertable at any time and image manipulation slows page load.

Preferred method is CSS, and it's definitely possible with CSS once I figure out how. I know how to do it if I could container the avatar or something of the sort, but honestly, this'd be easy if I could add more template code, but I'm trying to do it CSS only. I'll get in touch with a CSS expert and see if we can do it. The rest of it works, and the method using image manipulation through Gd or Imagick works, but slows page load.
 

Russ

Well-known member
#6
This isn't what you're looking for directly but I figured I could post it anyways.

Using the helper in the message user block you can just put this into extra.css:

Code:
.messageUserInfo .helper
{
   background: rgba(0, 0, 0, 0) url("@imagePath/xenforo/flagbg.png") no-repeat scroll 0 0 / cover ;
   height: 96px;
   left: 13px;
   opacity: 0.3;
   position: absolute;
   top: 13px;
   width: 96px;
}
Gives you:

Screenshot_4.png

(you can't click on the avatar anymore if you do this)
 

Robust

Well-known member
#7
This isn't what you're looking for directly but I figured I could post it anyways.

Using the helper in the message user block you can just put this into extra.css:

Code:
.messageUserInfo .helper
{
   background: rgba(0, 0, 0, 0) url("@imagePath/xenforo/flagbg.png") no-repeat scroll 0 0 / cover ;
   height: 96px;
   left: 13px;
   opacity: 0.3;
   position: absolute;
   top: 13px;
   width: 96px;
}
Gives you:

View attachment 121820

(you can't click on the avatar anymore if you do this)
Yeah... It does break hyperlinks but it works. Is this really my only CSS option?

I could always enclose it within a div id container, and use :before to specify an avatar I think, but that involves template edits. I want this to be global for all avatars if reasonably possible.
 
Last edited:

EQnoble

Well-known member
#8
I actually have this working as described in the first post (though it was made a while back and had nothing to do with France) and both methods (template edits and otherwise) work just fine for such a trivial edit.

Also with some creative thinking on top of what Russ provided for CSS you can actually still trigger the overlays no problem.

If I find it in the 48 TB array before you figure it out I will send it to you in a convo and you can do what you want with it from there.

good luck
 

Russ

Well-known member
#11
I took another look, approached it slightly differently, you can now click on the avatar still.

Works in the message user info bit and the member card.


Screenshot_6.png
Haven't done much testing...

Code:
.messageUserInfo .avatar:before
{
   background-image: url('france.png');
   height: 96px;
   left: 13px;
   opacity: 0.3;
   position: absolute;
   top: 13px;
   width: 96px;
   background-size: 96px 96px;
   content:"";
}
.memberCard .avatar:before
{
   background-image: url('france.png');
   height: 192px;
   left: 0px;
   opacity: 0.3;
   position: absolute;
   top: 0px;
   width: 192px;
   background-size: 192px 192px;
   content:"";
   z-index: 100;
}
 

Attachments

Robust

Well-known member
#12
I took another look, approached it slightly differently, you can now click on the avatar still.

Works in the message user info bit and the member card.


View attachment 121827
Haven't done much testing...

Code:
.messageUserInfo .avatar:before
{
   background-image: url('france.png');
   height: 96px;
   left: 13px;
   opacity: 0.3;
   position: absolute;
   top: 13px;
   width: 96px;
   background-size: 96px 96px;
   content:"";
}
.memberCard .avatar:before
{
   background-image: url('france.png');
   height: 192px;
   left: 0px;
   opacity: 0.3;
   position: absolute;
   top: 0px;
   width: 192px;
   background-size: 192px 192px;
   content:"";
   z-index: 100;
}
Thanks! How good is this on responsive? Also, how can I get this working in visitorPanel (homepage sidebar) and user profiles?
 
Last edited:

Stuart Wright

Well-known member
#13
How about displaying an image, positioned over the avatar with the same size (and padding etc. if needed)?
If the image is displayed with opacity .5, won't that do the trick?
I'm obviously making it sound much simpler than it is!