Forums

Bootstrap RTL

Permalink
Hi,

I'm developing a multilingual website that has RTL interfaces..

All is well except when I try to edit the RTL website, the CSS bootstrap RTL converts the concrete5 admin toolbar to RTL...

Any idea how to keep the concrete5 admin toolbar bootstrap LTR while the page design is set to bootstrap RTL?

Thanks in advance.
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi Ta2Ta2,

Just to clarify, are you saying that the RTL theme CSS is changing the concrete5 interface?
Ta2Ta2 replied on at Permalink Reply
For the rtl website interface I'm using pages with bootstrap sets to rtl.
As long as you accessing as guest there is no issues. But when you login as
admin :

1- ltr pages doesn't have issues.
2- rtl pages converts admin toolbar and everything has to do with c5
editing to rtl since it loads bootstrap rtl.

I hope I was able to clarify more..
On Sun, Dec 13, 2015 at 2:50 PM concrete5 Community <
discussions@concretecms.com> wrote:
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Ta2Ta2

As a best practice, your theme CSS should be written in a way not to target the concrete5 interface. A method to do this is scoping/namespacing.

This tutorial explains scoping/namespacing:
http://www.concrete5.org/documentation/how-tos/designers/easily-sco...

What version of concrete5 are you using?

If you are using 5.7, you can scope your CSS to the class "ccm-page". This class is added to the page by concrete5.
Ta2Ta2 replied on at Permalink Reply 2 Attachments
I would say it will be almost impossible to scope the entire bootstrap css not to affect the core c5...

Please check the attachments...
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Ta2Ta2

The default Elemental theme that comes with concrete5 scopes all of the Bootstrap CSS to avoid conflicting with the interface.

The scoping to div.ccm-page is done here:
https://github.com/concrete5/concrete5/blob/develop/web/concrete/the...

Scoping the Bootstrap CSS could be done in various ways, with or without having the original Less files.
Ta2Ta2 replied on at Permalink Reply
Thanks @MrKDilkington for your help...somehow when I scope the css files into div.ccm-page it doesn't work however when I just import them they work fine...

working example:

@import "css/css-rtl/app-rtl";
   @import "css/css-rtl/blocks-rtl";
   @import "css/css-rtl/custom-rtl";
   @import "css/css-rtl/rtl";
   @import "css/css-rtl/style-rtl";
   @import "plugins/bootstrap/css/bootstrap-rtl.min";
   @import "css/css-rtl/headers/header-v6-rtl";
   @import "css/css-flags/flag-icon.min";
   @import "css/css-rtl/footer-v1-rtl";
   @import "plugins/animate";
   @import "plugins/line-icons/line-icons";
   @import "plugins/parallax-slider/css/parallax-slider";
   @import "plugins/fancybox/source/jquery.fancybox";
   @import "plugins/fancybox/source/jquery.fancybox";
   @import "plugins/owl-carousel/owl-carousel/owl.carousel";
Viewing 15 lines of 20 lines. View entire code block.


not working example:

div.ccm-page {
   @import "css/css-rtl/app-rtl";
   @import "css/css-rtl/blocks-rtl";
   @import "css/css-rtl/custom-rtl";
   @import "css/css-rtl/rtl";
   @import "css/css-rtl/style-rtl";
   @import "plugins/bootstrap/css/bootstrap-rtl.min";
   @import "css/css-rtl/headers/header-v6-rtl";
   @import "css/css-flags/flag-icon.min";
   @import "css/css-rtl/footer-v1-rtl";
   @import "plugins/animate";
   @import "plugins/line-icons/line-icons";
   @import "plugins/parallax-slider/css/parallax-slider";
   @import "plugins/fancybox/source/jquery.fancybox";
   @import "plugins/fancybox/source/jquery.fancybox";
Viewing 15 lines of 22 lines. View entire code block.



any idea?
Ta2Ta2 replied on at Permalink Reply
actually I managed to get it working...one of the css files had wrong command..