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

Membercard colours/ borders

Discussion in 'Styling and Customization Questions' started by Morgain, Sep 29, 2012.

  1. Morgain

    Morgain Well-Known Member

    Am preparing AT LAST to transfer my 3rd forum to XF. Been waiting on an addon I needed.

    Very odd I cant change the membercard in Style Properties - or maybe I overlooked it. I changed the background to dark green in the Overlays section but no effect.

    I found Brogan's help on other features of the membercard
    http://xenforo.com/community/threads/membercard-location.19002/#post-244614

    So I tried this in EXTRA.css
    Code:
    /* Change colour of background on member card */
    .xenOverlay.memberCard {
    background: @primaryDark !important;
    }
    That worked but it lost the shadow round the edges.

    Also I'd like to add a thin gold membercard.png border around the inside.
    pic of my heart's desire
     
  2. Shelley

    Shelley Well-Known Member

    Have you tried pasting in extra.css changing the px size and colour to your preference? The reason you lost the shadow is because the shadow is not css and part of the default member-card image.

    If you custom card is an image it would probably be best just adding a shadow border via a graphics editor like the devs did with the default membercard otherwise doing it via css will result in the shadow surrounding the end of the image which would have adverse effects if that him has a radius.

    Code:
    .xenOverlay.memberCard {
    box-shadow: 0 0 10px #000 !important;
    }
    
     
    Jake Bunce likes this.
  3. Morgain

    Morgain Well-Known Member

    Shelley thank you - I was hoping you'd notice my request because you are the Membercard expert.

    Any idea how I can get that narrow gold line border running around the inside of the container? I'm not so far using a graphic.
     
  4. Shelley

    Shelley Well-Known Member

    I'm quite sure you would have to make a template edit for that and add an additional class to surround the avatarcropper & .userinfo class with the alterations having to be made within the member_card template and styling thrown in extra.css
     
    Jake Bunce likes this.
  5. Morgain

    Morgain Well-Known Member

    OK I'll try making a container with a border.

    One last thing - I can't make the username font go white.
     
  6. Shelley

    Shelley Well-Known Member

    This should work. I'll go test that on my test installation.

    edit: yeah below should work.

    Code:
    .xenOverlay.memberCard .userInfo h3 a {
        color: #FFFFFF !important;
    }
    
     
    Jake Bunce likes this.
  7. Morgain

    Morgain Well-Known Member

    Thank you Shelley you're the lady.

    Um - I got the graphic close.png into my editor and upped it to green. But it shows with white corners. I'm not clever at transparency or maybe I need a better editor.
    (I always keep the original as eg closeORIG.png for safety so I do still have that)

    close-green.png
     
  8. Shelley

    Shelley Well-Known Member

    Yeah the reason for that is because you didn't have access to the source file (psd) and the shadow embedded within the image stops you from directly altering it efficiently.I'm about to jump in a bath, when I get back I'll re-create the closed icons and submit them in the database in psd format so this kind of thing doesn't happen. There are ways to get around altering png formats but directly adjusting the source file is just easier and output is cleaner.
     
  9. Morgain

    Morgain Well-Known Member

    Have a lovely bath. :)
     
  10. Shelley

    Shelley Well-Known Member

    here's a quick alteration from the png but I'll re-create it from scratch in psd format. close.png
     
  11. Shelley

    Shelley Well-Known Member

    Here's the png close-green.png

    And the psd can be downloaded and modified to your preference if the colour isn't right.
     

    Attached Files:

    Jake Bunce likes this.
  12. Morgain

    Morgain Well-Known Member

    Thanks lots Shelley. I'm all fixed now.
     

Share This Page