FAQ different Background Colors Question, and Placeholder

Ask the Community Customization
22

No problem! It’s my pleasure to help you :wink:

23

Good Morning Max,
i think, i have found the issue! The Childs are not example ( Child1 = Group Hypercars, Child2 = Group Racer, etc. ) rather the rows ( row1 are Child1 ) and so on…
Then if you search a word… the word in Group3 will be in first row and Child1 and get the color from child 1
I hope, you understand me… puhhh difficult!
Thats a task for a script… not an css…

best regards

Harald

24

Hi @Harald :wave:

Thank you for waiting!

You are absolutely right, you need to remove the CSS code from the Custom CSS fieild and add this script right after the widget’s installation code:

<script>
const config = [
  {
    question:
      'Gruppe Hypercars - Abfahrt 09.30 Uhr - Funkgerät Kanal 2 - Roadcaptain Hilfe: 0660/5558520',
    color: 'rgb(236, 231, 53)'
  },
  {
    question:
      'Gruppe Racer - Abfahrt 09.45 Uhr - Funkgerät Kanal 3 - Roadcaptain Hilfe: 0664/8157284',
    color: 'rgb(191, 191, 191)'
  },
  {
    question:
      'Gruppe Drifter - Abfahrt 10.00 Uhr - Funkgerät Kanal 4 - Roadcaptain Hilfe: 0664/5152078',
    color: 'rgb(218, 27, 78)'
  }
];

const listenerBlock = (selector, callback) => {
  const initialTargetNode = document.querySelector(selector);
  if (initialTargetNode) {
    return callback(initialTargetNode);
  }

  let shouldBreak = false;
  const mutationObserver = new MutationObserver((mutations) => {
    for (const { addedNodes } of mutations) {
      if (shouldBreak) {
        shouldBreak = false;
        break;
      }

      for (const addedNode of addedNodes) {
        if (addedNode.nodeType === Node.ELEMENT_NODE) {
          const targetNode = addedNode.querySelector(selector);
          if (targetNode) {
            shouldBreak = true;
            callback(targetNode);
            break;
          }
        }
      }
    }
  });

  mutationObserver.observe(
    document.querySelector(
      '.elfsight-app-12cad5b7-4547-4d99-806f-006dff3c104a'
    ),
    {
      childList: true,
      subtree: true
    }
  );
};

const normalizedString = (str) => str.trim().toLocaleLowerCase();

const isLight = (color) => {
  let r, g, b;
  if (color.substring(0, 1) === '#') {
    r = parseInt(color.substring(1, 3), 16);
    g = parseInt(color.substring(3, 5), 16);
    b = parseInt(color.substring(5, 7), 16);
  }

  if (color.substring(0, 3).toLowerCase() === 'rgb') {
    let rgb = color.match(/\d+/g);
    r = parseInt(rgb[0]);
    g = parseInt(rgb[1]);
    b = parseInt(rgb[2]);
  }

  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
  return brightness > 125;
};

listenerBlock('.eapps-faq-content-category-items', (container) => {
  const questions = container.querySelectorAll(
    '.eapps-faq-content-category-item-question'
  );

  questions.forEach((question) => {
    const currentQuestion = config.find(
      (item) =>
        normalizedString(item.question) ===
        normalizedString(question.textContent)
    );

    if (currentQuestion) {
      if (question.style.backgroundColor !== currentQuestion.color) {
        question.style.backgroundColor = currentQuestion.color;
      }

      const text = question.querySelector(
        '.eapps-faq-content-category-item-question-text'
      );
      const textColor = isLight(currentQuestion.color)
        ? 'rgb(17, 17, 17) !important'
        : 'rgb(255, 255, 255) !important';
      if (text.style.color !== textColor)
        text.style.cssText = `
        color: ${textColor}
      `;
    }
  });
});
</script>

In case you’d like to change the color of a field, find the question in the config parameter and adjust its color. To add a new question, just include a new object similar to the existing ones, separated by a comma.

Check it out and let me know if it helped :slightly_smiling_face:

25

Great, it works!!! Thank you for your help Max!

26

Awesome!

You are always welcome :wink: