SOLVED: Avatar - Empty default-First and last initial -> customizing background?

NFA
OFFLINE
Posts: 84
Thanks: 15
Karma: 0

2 years 4 months ago - 2 years 4 months ago #329875 by NFA

Avatar-Empty default-First and last initial-> customizin background image/color? was created by NFA

Hi,

I like the "First and last initial" on Avatar - Empty default parameter, because it makes almost every avatar (especially in the user lists) unique, even if the user hasn't selected an avatar yet. However, I don't like the randomly chosen background colors. Is there a (CSS or other) way to change the background to a (custom) background image? If not, can I set the color to colors that match the overall design of my website?

I tried a lot by adding something like the line below to the involved CSS elements, but I am still not able to get it done

Code:

background-image: url(/"/components/com_comprofiler/plugin/templates/default/images/avatar/nophoto_n.png");

Besides that, this background image should only be added in cases the user still doesn't have an own avatar selected.

Hope you can help, Noa

Last edit: 2 years 4 months ago by NFA.

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48541
Thanks: 8290
Karma: 1445

2 years 4 months ago #329882 by krileon

Replied by krileon on topic Avatar-Empty default-First and last initial-> customizin background image/color?

That avatar setting generates a unique color based off their name. It's applied using an SVG. So you'll have to restyle the SVG itself to change the background. For example the below will make all of the SVG backgrounds black.

Code:

.cb_template .cbImgPictInitial > rect {
	fill: black;
}

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

NFA
OFFLINE
Posts: 84
Thanks: 15
Karma: 0

2 years 4 months ago #329885 by NFA

Replied by NFA on topic Avatar-Empty default-First and last initial-> customizin background image/color?

Thanks, Kyle! Also, is there a way to make it transparent and add a background image to this nice built-in feature?

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48541
Thanks: 8290
Karma: 1445

2 years 4 months ago #329887 by krileon

Replied by krileon on topic Avatar-Empty default-First and last initial-> customizin background image/color?

Change the fill to none and apply your background CSS rules directly to cbImgPictInitial. Example as follows.

Code:

.cb_template .cbImgPictInitial > rect {
	fill: none;
}

.cb_template .cbImgPictInitial {
	background: red;
}

You'll need to deal with background sizing, repeating, positioning, etc.. entirely in CSS.

Please Log in or Create an account to join the conversation.

NFA
OFFLINE
Posts: 84
Thanks: 15
Karma: 0

2 years 4 months ago - 2 years 4 months ago #329888 by NFA

Replied by NFA on topic SOLVED: Avatar - Empty default-First and last initial -> customizing background?

Kyle, you really are the best, thank you so much! The code below fully meets my question/wish.

Code:

.cb_template .cbImgPictInitial > rect {
	fill: none;
}

.cb_template .cbImgPictInitial {
	background-image: url("/components/com_comprofiler/plugin/templates/default/images/avatar/nophoto_n.png");
}

I'm trying to ask you one more cheeky question. Also, is there a way to change the font color of the SVG's white initials?

Last edit: 2 years 4 months ago by NFA.

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48541
Thanks: 8290
Karma: 1445

2 years 4 months ago #329889 by krileon

Replied by krileon on topic Avatar-Empty default-First and last initial-> customizin background image/color?

Also, is there a way to change the font color of the SVG's white initials?

Yes, you need to restyle the text node in the SVG similarly as done with the rect node in the above example CSS. Example as follows.

Code:

.cb_template .cbImgPictInitial > text {
	fill: black;
}

The following user(s) said Thank You: NFA

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon