Membercard graphic backgrounds

[Morgain]

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.

 

[Paul B]

The member card is an image: http://xenforo.com/community/styles/default/xenforo/overlay/member-card.png

You can just replace that image with one of your own.
Obviously if you use a different size or shape then you will need to adjust the CSS to suit.

 

[Morgain]

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

 

[Morgain]

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:

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

 

[Paul B]

Try this in EXTRA.css:

.xenOverlay.memberCard .userInfo {
position: relative !important;
right: -50px !important;
top: 250px !important;
}

Untested, so you will have to play around with the settings.

 

[Morgain]

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

.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

<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

.xenOverlay.memberCard .userStats pairsInline {
color: #000000 !important;
}

 

[Paul B]

This post may be of help: http://xenforo.com/community/thread...on-the-overlay-member-card.11511/#post-153322

Or possibly this one: http://xenforo.com/community/threads/font-color-question.12134/#post-160853

Or this one: http://xenforo.com/community/threads/membercard-location.19002/#post-244632

 

[Shelley]

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

.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

<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

.xenOverlay.memberCard .userStats pairsInline {
color: #000000 !important;
}

your missing a . before pairsInline glancing at your css.

have you tried adding the following to change the dt text

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

 

[Morgain]

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

.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

 

[Shelley]

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.

 

[Morgain]

I made the shadow like this on membercard.css​

​

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

 

[Morgain]

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.

 

[Shelley]

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]

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.

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.

 

[Morgain]

oops here is the 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.

 

[Shelley]

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

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.

 

[Shelley]

oops here is the 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.

View attachment 23665

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?

 

[Morgain]

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

 

[Shelley]

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.