SharePoint Custom Styling for WbePart Text

Mohammed Abed 145 Reputation points
2023-05-05T17:12:21.1966667+00:00

Hello,

We are building a SharePoint site that its content will be RTL text. We need to apply a CSS rule that will affect only the WebParts not the whole site (SP navigation and menus). For example, if I add a Text webpart it needs to be RTL based on the CSS rule that we have but not the upper menu by SP.

Currently we have the following rule but it takes effect on all site and that's what we don't want:

*{
direction: rtl;
}

Also, not applying such rule or aligning text with built in SP styling will make the RTL text not organized at all specially with numbers and lists.

SharePoint Server
SharePoint Server
A family of Microsoft on-premises document management and storage systems.
2,271 questions
SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,003 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,757 questions
SharePoint Workflow
SharePoint Workflow
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Workflow: An orchestrated and repeatable pattern of business activity, enabling data transformation, service provision, and information retrieval.
538 questions
SharePoint Server Development
SharePoint Server Development
SharePoint Server: A family of Microsoft on-premises document management and storage systems.Development: The process of researching, productizing, and refining new or existing technologies.
1,590 questions
0 comments No comments
{count} votes

Accepted answer
  1. RaytheonXie_MSFT 32,476 Reputation points Microsoft Vendor
    2023-05-08T06:50:54.2+00:00

    Hi @Mohammed Abed

    This will deploy to all element in the page. I will recommend you to use class selector or id selector.

    class selector will deploy the css style to all element which class equal to class1

    .class1 {
      direction: rtl;
    }
    

    Id selector will apply to the HTML element with id="para1"

    #para1 {
      direction: rtl;
    }
    
    

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    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.


0 additional answers

Sort by: Most helpful