sharepoint json format view row color

Jen Potter 1 Reputation point
2021-08-20T15:14:04.243+00:00

I need to create a list that has a row with a black background and white text with no hover effect. Just all black - always. Right now I'm getting light grey background when hovering over a row. Can this be changed? I have the following:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalRowClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          {
            "operator": "%",
            "operands": [
              "@rowIndex",
              2
            ]
          },
          0
        ]
      },
      "ms-bgColor-neutralPrimaryAlt sp-css-color-WhiteText",
      {
        "operator": ":",
        "operands": [
          {
            "operator": "==",
            "operands": [
              {
                "operator": "%",
                "operands": [
                  "@rowIndex",
                  2
                ]
              },
              1
            ]
          },
          "ms-bgColor-neutralPrimaryAlt sp-css-color-WhiteText",
          ""
        ]
      }
    ]
  }
}
SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,300 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,810 questions
{count} votes

1 answer

Sort by: Most helpful
  1. CaseyYang-MSFT 10,341 Reputation points
    2021-08-23T08:37:14.767+00:00

    Hi @Jen Potter ,

    Per my research, you could use some deleloper tools to find custom SharePoint CSS classes that you need to overwrite to change the colour of the hovering. For example .ms-welcome-hover and .ms-siteactions-hover are the welcome hover class obviously being the top bar for the page.

    Then you could use the following code to change the hover color:

       .ms-siteactions-hover  
        {  
            background-color:#000000;  
            color:#FFFFFF;  
        }  
    

    For Reference:
    How to remove the Hover /or chage the hover color, when moving the mouse over the current username
    Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.


    If an Answer is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.