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

Discussion in 'Resource and Add-on Requests' started by Stuart Wright, Nov 15, 2015.

  1. Stuart Wright

    Stuart Wright Well-Known Member

    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?
     

    Attached Files:

    • 1.jpg
      1.jpg
      File size:
      2.6 KB
      Views:
      18
  2. Robust

    Robust Well-Known Member

    Working on it
     
    Stuart Wright likes this.
  3. Robust

    Robust Well-Known Member

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

    Stuart Wright Well-Known Member

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

    Robust Well-Known Member

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

    Russ Well-Known Member

    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)
     
    HWS likes this.
  7. Robust

    Robust Well-Known Member

    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: Nov 15, 2015
  8. EQnoble

    EQnoble Well-Known Member

    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
     
    Lisa and Robust like this.
  9. Robust

    Robust Well-Known Member

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

    [​IMG]
     
  10. Robust

    Robust Well-Known Member

    @Lisa might have it.
     
  11. Russ

    Russ Well-Known Member

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

    Attached Files:

    Robust likes this.
  12. Robust

    Robust Well-Known Member

    Thanks! How good is this on responsive? Also, how can I get this working in visitorPanel (homepage sidebar) and user profiles?
     
    Last edited: Nov 16, 2015
  13. Stuart Wright

    Stuart Wright Well-Known Member

    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!
     
  14. Robust

    Robust Well-Known Member

    That's the plan :p
     
  15. Nobita.Kun

    Nobita.Kun Well-Known Member

    Im working on this :)

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

    Attached Files:

  16. Nobita.Kun

    Nobita.Kun Well-Known Member

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

    Attached Files:

    Simon and Ernest L. Defoe like this.

Share This Page