0

I'm attempting to change the colour of the bg-Color property. By standard on my list the colour is set to white. I'd like to change it to a different colour, but there are very few available to me. I can pick green, red, yellow, black, purple, blue, orange. Most of these colours are too dark though.

Are the available colours limited by a theme or a template? Or does someone have a link to the default colours that are available?

I've attempted to use a value of 'lime', '#00ff00', 'aqua', 'green4' but none of these are recognised it seems - Source of values: JonasJacek, I also checked the JSON values.

I'm trying to make these changes via the 'Format List View' menu - see pic below.

Picture of the Format View JSON menu

Yellow does work: Picture of the Format View JSON menu, with value changed to yellow

(BTW I'm new to SP-Online, have used SP 2010 and 2013 On Premises).

Here's the code, it's all default code, nothing changed by me:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 73,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },

1 Answer 1

1

You can find all available classes at: Reusable SharePoint Online Classes for Modern UI

Also, you can apply background color using style property, like:

"elmType": "div",
   "style": {
      "background-color": "#ff0000"
   }
... 

You can use any combination of Hex color as per your requirements.

Your Answer

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

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