Xenforo Default membercard PSD v1

[Shelley]

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

 

[CritiKiL]

Great! Thank you soo much ;-)

 

[Xyphien]

Wish you'd add pictures, would help a lot

 

[Chris D]

Here's a preview of it in Google Drive if it helps:

https://docs.google.com/open?id=0B2D8Olb4TZRkZmYxaGdfNUZjOW8

 

[Xyphien]

It does not seem to want to change for me. It remains the same, even though I upload it to the FTP.

 

[Chris D]

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]

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]

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.




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

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

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

 

[Shelley]

Is this something you had been after? Let me know if it is and I'll upload it.

 

[erich37]

Is this something you had been after? Let me know if it is and I'll upload it.

View attachment 39420

yep, exactly this.

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]

yep, exactly this.

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.

 

[erich37]

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

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

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

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

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]

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.

 

[Shelley]

Screenshot below

 

[erich37]

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

 

[Shelley]

Scrub that, I just tried it and the corners shoot off past the css border.