0

I have a hyperlink column which displays a light blue color, until I add some conditional formatting to indent child documents.

My script is:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "margin-left": "=if([$IsChild] == 'Yes','40px','0px')",
    "width": "500px"
  },
  "children": [
    {
      "elmType": "a",
      "txtContent": "[$Title]",
      "attributes": {
        "target": "_blank",
        "href": "[$Title_x0020_Links]"
      }
    }
  ]
}

This works exactly how I want it, but when applied, it darkens the shade of blue for the column links. Is there a way I can change the color to light blue within this script?

1 Answer 1

1

You can add color to hyperlink like below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "margin-left": "=if([$IsChild] == 'Yes','40px','0px')",
    "width": "500px"
  },
  "children": [
    {
      "elmType": "a",
      "txtContent": "[$Title]",
      "attributes": {
        "target": "_blank",
        "href": "[$Title_x0020_Links]"
      },
      "style": {
        "color": "lightblue"
      }
    }
  ]
}

You can add any color at below line as per your requirements:

"color": "lightblue"

You can use HEX color code as well like:

"color": "#87ceeb"

You can find some shades of blue & their HEX codes at: Shades of Blue

Documentation: Use column formatting to customize SharePoint

3
  • Hi @Chris, did you try this? Is it working for you? Jun 3, 2021 at 4:57
  • This worked perfectly. Thank you. I ended up also adding script to remove the text-decoration too, which removed the underline to the hyperlinks.
    – Chris
    Jun 3, 2021 at 17:26
  • Great, glad it worked for you. (As you already know) underline of hyperlinks can be removed easily by adding "text-decoration": "none" inside style property (leaving this comments for other users reading this thread in future). Jun 3, 2021 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.