search

creativetimofficial / ct-light-bootstrap-dashboard-pro-react

LBD Pro React Version
20 stars 8 forks source link

RTL support #5

Closed einazare closed 2 years ago

einazare commented 6 years ago

For RTL you need to follow these steps:

  1. Add in public/index.html file this line <link rel="stylesheet" href="//cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css"> inside the <head>...</head> tags.
  2. Replace <body class="off-canvas-sidebar"> with <body class="off-canvas-sidebar rtl-active"> inside the public/index.html file.
  3. Download this file lbdp_rtl.scss.zip
  4. Unzip the file.
  5. Add the unzipped file in src/assets/sass/lbd/ folder.
  6. Add this line @import "lbd/lbdp_rtl"; at the end of the src/assets/sass/light-bootstrap-dashboard.scss file.
emadaaltiti commented 6 years ago

there is bugs when i follow your steps look it to this screen
Look image image image

einazare commented 6 years ago

Hello @emadaaltiti ,

This is caused by the perfect-scrollbar plugin. To stop it from doing so, please replace Ps.initialize(this.refs.mainPanel, { wheelSpeed: 2, suppressScrollX: true }); with Ps.initialize(this.refs.mainPanel, { wheelSpeed: 2, suppressScrollX: true, suppressScrollX: false });

This is located in:

Best, Manu

emadaaltiti commented 6 years ago

@EINazare
thanks a lot , i have another question i used react-intl to support multiple language i need to make everything rtl when Login in if chose Arabic ltr if chose English everything work fine except sidebar and Dashboard do you have any solution for that maybe import different css file for Arabic or English

thanks again

einazare commented 6 years ago

When choosing English, to stop using RTL, you should delete the rtl-active class from the body tag and you should also delete the <link rel="stylesheet" href="//cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css"> from the index.html page. If you are having trouble with this, let me know.

All the best, Manu

dreamcode-star commented 1 year ago

Hello einazare, how are you? I'm a web developer and building a university management dashboard using this theme. I need to implement multi-language support, and in fact the way you explained is not clear to me. I'm sorry for that, but could you please write a tutorial to implement that in your theme? Thanks a lot.

christopher.