1. Forums
  3. Support and Presales
  5. Professional Members Support
  7. SOLVED: Avatar - Empty default-First and last initial -> customizing background?

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

1 year 9 months ago - 1 year 9 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
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

Please Log in to join the conversation.

1 year 9 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.

.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 to join the conversation.

1 year 9 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 to join the conversation.

1 year 9 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.

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

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 to join the conversation.

1 year 9 months ago - 1 year 9 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.
.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?

Please Log in to join the conversation.

1 year 9 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.

.cb_template .cbImgPictInitial > text {
	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.
The following user(s) said Thank You: NFA

Please Log in to join the conversation.

Moderators: beat, nant, krileon
  1. Forums
  3. Support and Presales
  5. Professional Members Support
  7. SOLVED: Avatar - Empty default-First and last initial -> customizing background?
Time to create page: 0.227 seconds

Facebook Twitter LinkedIn

    You are here:  
  1. Home
  2. Forums
  3. Support and Presales
  4. Professional Members Support
  5. SOLVED: Avatar - Empty default-First and last initial -> customizing background?

Search

Login / Logout

User Menu