Displaying hex number color from a member's custom field attribute Answered

• 

  Chukwudi Onyekwere

  • November 17, 2023 10:14

  Hi Vincent,

  Here's how you can modify your existing code to pick the hex color code from the custom field and apply it to a div:

  <script>
const memberstack = window.$memberstackDom;
memberstack.getCurrentMember().then(async ({ data: member }) => {
if (member) {
if (member.data && member.data["customFields"]) {
// Gets the color field info from memberstack
const color = member.data["customFields"]["color"];
console.log("memberstack color: " + color);

// Get the reference to the div element
const myDiv = document.getElementById("yourDivId");

// Apply the background color
myDiv.style.backgroundColor = color;
}
}
});
</script>

  In this code, replace "yourDivId" with the actual ID of your div and ensure your custom field ID on Memberstack is "color" else you may have to modify the custom field ID in the code to be the same with what you have on Memberstack. The hex color code stored in the color variable obtained from the Memberstack data will be applied as the background color to the div. Make sure that your HTML contains a div with the specified ID for this code to work properly.

  0
• 

  Vincent Torquato

  • November 17, 2023 10:15

  Hello! Thank you for your response! I tried it out with no luck. Here is a screenshot of how I modified the code. Where am I going wrong?

  

  0
• 

  Chukwudi Onyekwere

  • November 17, 2023 10:15

  Sorry that didn't work for you, Vincent. I've modified the code and it works perfectly now. Kindly replace the code on your website with the one below:

  <script>
// Gets the color field info const memberstack = window.$memberstackDom;
memberstack.getCurrentMember().then(async ({ data: member }) => {
if (member) {
if (member["customFields"]) {
// Gets the color field info from memberstack
const color = member["customFields"]["main-color"];
console.log("memberstack color: " + color);

// Get the reference to the div element
const myDiv = document.getElementById("color1"); // Apply the background color
myDiv.style.backgroundColor = color;
}
}
});
</script>

  0
• 

  Vincent Torquato

  • November 17, 2023 10:16

  Awesome!! Thank you so much!! Do I have to copy and paste this code for each color? (there are 3 colors)

  0
• 

  Chukwudi Onyekwere

  • November 17, 2023 10:16

  Here's the modified code to show the three colors (Main, Secondary, and Accent) but then, a third Div (with id color3) to display the accent color is missing on your webpage. You need to add it for the accent color to display.

  <script>
// Gets the color field info const memberstack = window.$memberstackDom;
memberstack.getCurrentMember().then(async ({ data: member }) => {
if (member) {
if (member["customFields"]) {
// Gets the color field info from memberstack
const color1 = member["customFields"]["main-color"];
const color2 = member["customFields"]["secondary-color"];
const color3 = member["customFields"]["accent-color"];

// Get the reference to the div element
const myDiv1 = document.getElementById("color1");
const myDiv2 = document.getElementById("color2");
const myDiv3 = document.getElementById("color3"); // Apply the background color
myDiv1.style.backgroundColor = color1;
myDiv2.style.backgroundColor = color2;
myDiv3.style.backgroundColor = color3;
}
}
});
</script>

  0
• 

  Vincent Torquato

  • November 17, 2023 10:17

  Heck yeah! Works perfect!! Thank you!!

  Duncan Hamra I think this would be a good tutorial to go along with the color picker.

  0
• 

  Duncan Hamra

  • November 22, 2023 13:08

  Great idea Vincent Torquato 👍 I added a link to the cloneable project

  https://webflow.com/made-in-webflow/website/color-input

  0

Please sign in to leave a comment.