How to add color to hyperlink in beast mode?

CONCAT('<div style= ""><a href="https:`,' "target="_blank">',`id`, '</a></div>')


I'm using this code in beasrt mode. How do I add color to my font?


  • Commenting for visibility, also interested -- right now, the fact that it defaults to the darker blue has led to some issues in how I format surrounding cards and colors, so modifying this would be super helpfyl. 

  • @Ritwik  @hamza_123 


    Try using this beast mode format:



    CONCAT('<div><a href="https://..."','"target="_blank"><font color="black">',`id`,'</a></div>')

    You should be able to type in other colors where it says "black" or you can use Hex values like this which would display green:




    CONCAT('<div><a href="https://..."','"target="_blank"><font color=#00c200>',`id`,'</a></div>')



  • @DDalt Thank you!


    Could we do something similar in a beast mode where we use html to set a color for the background? 


    We use the following beast mode to highlight the background of a cell to be pale green. The text within the cell, however, looks similar to a hyperlink (same blue-ush font). 


    In this case, where would we add the "font color = black" html part? Appreciate any help, thanks!


    CONCAT('<div style="background-color:#98FB98; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', DATE_FORMAT(`Actual First Units`, '%m/%d/%y'), '</a></div>')



  • hamza_123
    hamza_123 Contributor

    @DDalt no that does not work : (

  • @Ritwik 


    I was able to display black text with your green background using this beast mode (note: I used a column called `Completion Date` so you will want to replace that with your `Actual First Units` field)


    CONCAT('<font color="black"> <div style="background-color:#98FB98; width: 100%; height:100%; margin:-20px; padding:20px">', DATE_FORMAT(`Completion Date`, '%m/%d/%y'), '</div>')
  • @hamza_123 


    Bummer! What specifically did not work? 


    This is a "live" beast mode that you should be able to drop into any data set to link to Google as a test:


    CONCAT('<div><a href=""','"target="_blank"><font color=#00c200>','Link to Google','</a></div>')

    If you want only one row to show up, you can use: 


    MAX(CONCAT('<div><a href=""','"target="_blank"><font color=#00c200>','Link to Google','</a></div>'))

    If you use that exact beast mode, place it as a column in a Table card, and save and close can you 1) see "Link to Google" in Green and 2) click the link to go to the main Google search engine page?