• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Xenforo Default membercard PSD

Xenforo Default membercard PSD v1

No permission to download
This is a source file I constructed of the default membercard........

Shelley

Well-known member
#1
Shelley submitted a new resource:

Xenforo Default membercard PSD (version v1) - This is a source file I constructed of the default membercard........

Description: source file of the default xenforo member-card so users can directly modify (remove outer shadow, conduct colour change) directly. The Dimensions are exactly the same and colours replicated as close as possible though you do have the option to modify to your preference.

This derived from a thread where a member wanted to apply a border to the membercard, but since the shadow around the membercard is embedded he was unable to make alterations so hopefully this will be...
Read more about this resource...
 

Chris D

XenForo developer
Staff member
#6
What are you trying to do?

The file is a Photoshop file and is the source file for the member card overlay. It's been provided so that people can edit it and replace the default one.
 

CritiKiL

Active member
#7
It does not seem to want to change for me. It remains the same, even though I upload it to the FTP.
I think I know what you mean: You've updated your membercard and you don't see the changed one but still the old one? Same happened to me! You'll have to clear your browser cache and give your server time to update. It will show up later on. But it's still storing the old version until it's cleared / updated ;-)
 

erich37

Well-known member
#8
does anyone know where to find the CSS for styling the "outer glow shadow" for the member-card ? I would like to change this "shadow" to a transparent-colored-border.

member-card-border-style.jpg


Instead of the default grey-shadow, I would like to make the same "transparent outer border" (border-radius: 20px 20px 20px 20px) as which is showing when you click onto the icon for "Open Quick Navigation" (the icon which is located at the right of the Breadcrumb).


I have tried to put this CSS-code into template Extra.css, but there is too much padding around the member-card.png image. It is a step in the right direction, but there is still something missing with my approach :confused:
Code:
.xenOverlay.memberCard {
    border: 20px solid rgba(170, 6, 64, 0.5);
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    padding: 0;
}
 

Shelley

Well-known member
#9
The outer glow is not css it's added via a graphics editor. You will be able to adjust the shadow (outerglow) directly from the PSD. The settings are within photoshop to do this effect where the shadow is solid rather than it being spread.

box-shadow should be removed and border on your membercard css as this is all done via a graphics editor and changes made directly to the graphic itself
 

erich37

Well-known member
#11
Is this something you had been after? Let me know if it is and I'll upload it.

View attachment 39420
yep, exactly this. (y)

Although I would like to have another color for the "member-card.png"-image.... so I want to be able to customize the color of this image.

Or even better just set the background-color via CSS instead of having this "member-card.png"-image ?
The "Open Quick Navigation"-popup also does not contain any .png-image..... not sure why there is even a need for a "member-card.png"-image-file when it might be possible to do it all with CSS ?
 

Shelley

Well-known member
#12
yep, exactly this. (y)

Although I would like to have another color for the "member-card.png"-image.... so I want to be able to customize the color of this image.

Or even better just set the background-color via CSS instead of having this "member-card.png"-image ?
The "Open Quick Navigation"-popup also does not contain any .png-image..... not sure why there is even a need for a "member-card.png"-image-file when it might be possible to do it all with CSS ?
hmmm I remember kier or mike saying their was a good reason why the had to use an image (I am sure it was because of old browser support) but here is the image if your still wanting to use it. member-card.png
 

erich37

Well-known member
#13
yeah, I am fine using an image for the member-card.png and just change the color of this image via your PSD-file, which is great !

But I want to be able to change the color of the blue-transparent border via CSS.......

Code:
.xenOverlay.memberCard {
    border: 20px solid rgba(170, 6, 64, 0.5);
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    padding: 0;
}
 

Shelley

Well-known member
#14
yeah, I am fine using an image for the member-card.png and just change the color of this image via your PSD-file, which is great !

But I want to be able to change the color of the blue-transparent border via CSS.......

Code:
.xenOverlay.memberCard {
    border: 20px solid rgba(170, 6, 64, 0.5);
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    padding: 0;
}
You can't change the border via css because the border is embedded/part of the image.
 

erich37

Well-known member
#15
You can't change the border via css because the border is embedded/part of the image.
yeah, this is the reason I want an image without blue-transparent-border..... and make the blue-transparent-border with CSS.......with the CSS-code posted above.
 

Shelley

Well-known member
#16
yeah, this is the reason I want an image without blue-transparent-border..... and make the blue-transparent-border with CSS.
I don't think your understanding the limitation here. if you added a border whilst using a membercard image the border would become square in shape because it doesn't take notice you designed a membercard with a radius it looks at the canvas as a square so you would get an adverse affect where it would be outside of the image on the edge of the canvas.
 

erich37

Well-known member
#18
well, the member-card.png-image does not have to have "rounded borders"....
it would be just perfect to have the "member-card.png" with square borders (no radius).
 

Shelley

Well-known member
#19
well, the member-card.png-image does not have to have "rounded borders" (radius) .....
it would be just perfect to have the "member-card.png" with square borders (no radius).
You should have just said. try this and then try your css stuff it should work okay from here on in. (attachment) Let me know how you get on with it.
 

Attachments