SharePoint Custom Styling for WbePart Text

Question

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.

Answer 1

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.