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

Membercard graphic backgrounds

Discussion in 'Styling and Customization Questions' started by Morgain, Jan 13, 2012.

  1. Morgain

    Morgain Well-Known Member

    I would like to design my own membercard -
    using a bordered background,
    and drop the membercard data in the centre area of the graphic.

    Later on just to be insanely ambitious I'd like to investigate a membercard style switcher to have several different versions of this with different graphics. Same layout, but different background graphic.

    For now please help me get started with pointers on how to place the membercard on a graphic background.

    Thank you.
     
    aiman.h.kallaf likes this.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Phil and erich37 like this.
  3. Morgain

    Morgain Well-Known Member

    Brilliant Brogan thank you.
    2 full minutes - about your average turnaround.
     
  4. Morgain

    Morgain Well-Known Member

    I've put some bits together but I need to make the all the block of text on the right move to the left and downwards.

    I tried putting this:

    Code:
    <div class="userInfo" style="margin-left: 10px; margin-top: 30px;">
    The margin-top works to move it down, but not margin-left.
    Tried float: left
    Tried !important
    Have looked in the membercard.css and in Style properties.

    SQUEAK!
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Try this in EXTRA.css:
    Code:
    .xenOverlay.memberCard .userInfo {
    position: relative !important;
    right: -50px !important;
    top: 250px !important;
    }
    Untested, so you will have to play around with the settings.
     
    Morgain likes this.
  6. Morgain

    Morgain Well-Known Member

    GAH! lost my whole message AGAIN by timeout! My one hate on XF

    Code:
    .xenOverlay.memberCard .userInfo {
    position: relative !important;
    left: 300px !important;
    top: 150px !important;
    }
    This is what worked as a variant on the code you supplied, thank you.

    Last struggle of the night - 2 hours of fighting!

    cannot get the small dt text to stop being GREY!
    Tried Style Props - banished ALL grey from the palette! in desperation made those bits black
    the css sheet - color: #000000; EVERYWHERE!

    In the template itself
    Code:
    <blockquote style="color: #ff0000;" class="status">{xen:helper bodytext, $user.status}</blockquote>
    <div style="color: #ff0000;" class="userLinks">
    STUFF
     
    <dl style="color: #000000;" class="userStats pairsInline">
    and
    EXTRA.css - no effect
    Code:
    .xenOverlay.memberCard .userStats pairsInline {
    color: #000000 !important;
    }
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

  8. Shelley

    Shelley Well-Known Member

    your missing a . before pairsInline glancing at your css.

    have you tried adding the following to change the dt text

    Code:
    .xenOverlay.memberCard .pairsInline dt {
        color: #hexvalue !important;
    }
     
  9. Morgain

    Morgain Well-Known Member

    Thanks lots both of you - I am building a collection!

    Last thing - how can I get a shadow border round the edge of my image?

    Bit later membercard.css

    Code:
    .xenOverlay.memberCard
    {
        background: transparent url(@imagePath/xenforo/overlay/member-card.png);
        color: white;
        width: 612px;
        height: 272px;
    border-image: initial;
    box-shadow: 30px 30px 20px #ccffcc;
    }
    Almost right but the shadow cuts through the graphic
    borderproblem.png
     
  10. Shelley

    Shelley Well-Known Member

    I'm quite sure the shadow was done through a graphics editor using an outer glow set on a dark colour. They would have left/gave a transparent area around the membercard to allow the shadow to show.

    If your image is using the full space then your shadow will not show, your going to allocate space for the shadow to show using box-shadow: or apply it through a graphics editor.
     
  11. Morgain

    Morgain Well-Known Member

    I made the shadow like this on membercard.css​

    Code:
    .xenOverlay.memberCard
    {
        background: transparent url(@imagePath/xenforo/overlay/member-card.png);
        color: white;
        width: 612px;
        height: 272px;
    border-image: initial;
    box-shadow: 30px 30px 20px #ccffcc;
    }
    I tried making the graphic smaller and it seemed to help a little but not enough.
    When I made it smaller still it didn't show up at all.
     
  12. Morgain

    Morgain Well-Known Member

    Just been trying again - tried making the height of the graphic in the css both bigger and smaller.
    Tried resizing the graphic bigger and smaller.
    Makes no difference.
     
  13. Shelley

    Shelley Well-Known Member

    Did you leave enough transparent space for the box-shadow to show? You'll have to allocate space for that if the image is taking the full size of the canvas.

    A suggestion. I would personally go about doing the shadow directly from an image editor (Outer glow) as xenforo did, so the shadow displays in all browsers that do not support the box-shadow. Most do support it older ones don't.
     
    Morgain likes this.
  14. Morgain

    Morgain Well-Known Member

    Shelley thank you very much for your help. I know you are a beautiful designer and my membercard was inspired by your "nature calls."

    I understand in principle what you mean by leaving space for the shadow. But as I said I have tried resizing the graphic both enlarging it and decreasing it by the 30px of the shadow. Neither way helps.
    Do I need to create "transparent space?" I put my code above but I'll put it here again. Could you tell me what I need to add and the arithmetic I need to do?
    Then I will learn it I promise.

    I don't know anything about "outer glow."M y image editor is quite basic. So I think I'll stick to the css shadow for now and just try to understand this issue you're talking about first.

    I want to do a whole series of seasonal and event membercards with different graphics - the rest will stay pretty much the same, just the graphic changing. Just for my site.
    I thought I'd ask my coder if we could have a theme switcher for users to choose a membercard they like. He's busy with my articles mod right now but if he does a theme switcher I'll share it with you if you like.
     
  15. Morgain

    Morgain Well-Known Member

    oops here is the code.

    Code:
    .xenOverlay.memberCard
    {
        background: transparent url(@imagePath/xenforo/overlay/member-card.png);
        color: white;
        width: 612px;
        height: 272px;
    border-radius: 20px;
    /*
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-image: initial
    box-shadow: 30px 30px 25px #cc9966; */
    }
    Also here is the latest design. I hope you like it as you inspired it.

    green-bdr6spiderflowers.png
     
  16. Shelley

    Shelley Well-Known Member

    What I think is happening is your re-sizing the image and it's taking 100% of the area so when your re-sizing it'll always use up 100% of the space no matter if you scale the sizes up or down.

    If you post all your css for the membercard and the images your using I can test it out later today and check on a default installation to isolate what the issue is.
     
    Morgain likes this.
  17. Shelley

    Shelley Well-Known Member

    Ah, I think you need a little more transparent space for the shadow. you've left about 2-3px for the shadow to show which isn't really enough. Your wanting the shadow to surround the whole image/membercard right?
     
  18. Morgain

    Morgain Well-Known Member

    Shelley wow thank you. I can see the word transparent just before the URL but I can't see where the allowance you speak of is set.
    Actually yes you're right - the shadow appears only on the right and below - in this case I'd like it all round.

    I'm dithering between a palest green #ccffcc and the pretty soft pale brown XF uses - paler than #cc99966 :)
     
  19. Shelley

    Shelley Well-Known Member

    set the .xenOverlay.memberCard width: 640px and the height: 300px and remove box shadow then upload the membercard in the attachment.You'll have to rename it

    see if that fixes your shadow problem.
     

    Attached Files:

Share This Page