Form output colour

[tonyyap]

why the form output colour still cant be changed. For chat, the colour matches well the background as it is the same colour so text appears to be flowing but the form output is not. And what happend to the colour customization ?is it gone apart from the theme. Pickaxes really need to work on its design customization and functonality

[boultons]

It would be good if we had a new Pickaxe ‘Design Theme’ that looked like a Facebook Messenger Conversation or an SMS Chat - Blue Bubbles, Grey Bubbles, White Background etc.

[danny_support]

@boultons @tonyyap

Thank you for your feedback. Our team is working hard to add new features and improve customization options in the Studio.

For right now, here’s how you can change the color of the form output so it matches your theme:

First, open your Pickaxe page where the form output appears. Right-click directly on the output area (the box that shows the form’s response) and select “Inspect” or “Inspect Element” from the menu. This will open your browser’s developer tools, showing the page’s HTML structure. Look for the outermost <div> that wraps around the entire output box. It will usually have several classes, such as flex gap-x-3 px-4 py-5. Make sure you are selecting the <div> that highlights the entire output area rather than just the text inside. Take note of these class names, since you’ll use them for your custom CSS.

Next, go to your Pickaxe Studio dashboard and open the Pickaxe you want to edit. Click on Settings in the sidebar and scroll down until you find the Website Code Injection section.

In the Header section, paste the following CSS code. You can change the colors in this code to fit your theme:

<style>
/* Target the form output area */
.flex.gap-x-3.px-4.py-5 {
  background-color: pink !important;  /* Change to your preferred background */
  color: orangered !important;            /* Change to your preferred text color */
}

/* Make sure all inner text and icons follow the color */
.flex.gap-x-3.px-4.py-5 * {
  color: orangered !important;
}

/* Optionally, style the timestamp and buttons for consistency */
.flex.gap-x-3.px-4.py-5 .font-semibold {
  color: orangered !important;
  opacity: 0.5 !important;
}
</style>

Once you save your changes, the update will take effect for everyone who visits your Pickaxe. The new color scheme will remain active even if you refresh the page, and all users will see the updated design.

Before:

After:

If you want to adjust other elements, you can repeat this process by inspecting those parts and updating your CSS as needed.

Let me know if this helped!

[boultons]

Thanks - this is the sort of colour scheme I was trying to explain