Add-on Avatar image overlay of the French Flag colours

[Stuart Wright]

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?

 

[Robust]

Working on it

 

[Robust]

Working on it

It was completed but it manipulates images using Gd/Imagick so for large boards it would suck. Working on redesigning it.

 

[Stuart Wright]

How about a div with three columns and an opacity of .5?

 

[Robust]

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]

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:

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



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

 

[Robust]

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:

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

 

[EQnoble]

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

 

[Robust]

Haven't figured it out using CSS but have been suggested this alternative:

 

[Robust]

@Lisa might have it.

 

[Russ]

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.



Haven't done much testing...

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

 

[Robust]

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

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

 

[Stuart Wright]

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!

 

[Robust]

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!

That's the plan

 

[truonglv]

Im working on this

Almost was done. Only for small css problem on Sidebar.

 

[truonglv]

Here is add-on for all people want to use to their forums

Note:

• It is will applied to all avatars.
• No extra query. Just using CSS to applied

Please change the css in the template france_flag.css if you have any problem with your theme

 

[gogo]

Does it work on XF 2.1?