Fully Rtl To Lft Css

Blesta Addons · October 4, 2014

to fully support rtl-to-lft alignement , replcae the rtl.css content with this new content

the file is located in app/views/clients/bootsrap/css . i hope this can be added to the core file for next release .

/**** RTL BOOTSRAP ***/
body {
	direction: rtl;
}
th {
	text-align: right;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: right;
}
.nav {
	padding-right: 0;
	margin-bottom: 0;
	list-style: none;
}

.pull-left{
	float: right !important;
}
.pull-right {
	float: left !important;
}
.text-left {
	text-align: right;
}
.text-right {
	text-align: left;
}
.dropdown-menu {
	float: right;
	text-align: right;
}
.dropdown-menu-right {
	right: auto;
	left: 0;
}

.nav-tabs > li {
	float: right;
	margin-bottom: -1px;
}
.pagination li {
	padding-left : auto;
	padding-right: 0 ;
}
.radio, .checkbox{
	padding-left : auto;
	padding-right: 20px ;
}
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox]{
	float: right;
	margin-left : auto;
	margin-right: -20px ;
}
.close{
	float: left;
}
.list-group-item > .badge {
	float: left;
}

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: right;
  }
  .navbar-nav {
    float: right;
    margin: 0;
  }
  .navbar-nav > li {
    float: right;
  }
  .navbar-right .dropdown-menu {
    right: auto;
    left: 0;
  }
  .navbar-right .dropdown-menu-left {
    right: 0;
    left: auto;
  }
  .navbar-nav.navbar-right:last-child {
    ;
  }
  .navbar-left {
    float: right !important;
  }
  .navbar-right {
    float: left !important;
  }     
   
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: right;
  }
}

@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: right;
  }
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: right;
  }     
}

/*** RTL  STYLE ***/
.header {
float: right;
}

.header .container {
	padding-right: 0;
	padding-left: auto;
}

.logo {
	float: right;
	margin: 13px 0 3px 15px;  
}

.title {
	float: right;
}

.title .container {
	padding-right: 0;
	padding-left: auto;
}

.nav-content .container {
	padding-right: 5px;
	padding-left: auto;
}

.table-curved tbody > tr > td {
	border-right: 1px solid transparent;
}

.table-curved td, .table-curved th {
	border-right: 1px solid #e1e1e1;
	border-top: 1px solid #e1e1e1;
}

.table-curved tbody>tr>td:last-child {
	border-left: 1px solid #e1e1e1;
}
.table-curved tbody>tr>td:last-child {
	border-left: 1px solid #e1e1e1;
}

.table-curved tbody>tr>td:first-child {
	border-left: none;
}

.table-curved th:first-child {
border-radius: 0;
}

div.panel-body div.alert {
	clear: both;
}

.col-border {
	border-right: 1px solid #efefef;
	border-left: 0px ;
}
/* Loading */
.loading_container {
	left: auto;
	right:0;
}
/* Order Page */
.well-order .total-due {
    text-align: left;
}

Blesta Addons · October 11, 2014

updated the css code .

- added the support for navigation link

- added the support for close button in models and messages .

- added the support for right checkbox and radio inputs .

ctalkington · October 13, 2014

im not sure if the guys have gotten much in build processes like grunt but there is a nice task for this:

https://www.npmjs.org/package/grunt-cssjanus

WordPress community has adopted this heavily recently.

Blesta Addons · September 1, 2015

Updated to fix dropdown right menu and the pagination links

kpmedia · September 27, 2015

Is this just a right justify for language that are right-to-left?

Blesta Addons · September 27, 2015

Is this just a right justify for language that are right-to-left?

the css is optimized for right-to-left languages, like arabic, farsi, hebrew .

kpmedia · September 27, 2015

the css is optimized for right-to-left languages, like arabic, farsi, hebrew .

Yep, that's what I thought. Just wanted to make sure.

Blesta Addons · January 21, 2017

Updated with new css for badges .

Paul · May 30, 2017

@Blesta Addons Do you see any RTL issues in the admin interface for Blesta as of 4.0? I'm looking into CORE-1412

Blesta Addons · May 31, 2017

19 hours ago, Paul said:

@Blesta Addons Do you see any RTL issues in the admin interface for Blesta as of 4.0? I'm looking into CORE-1412

it need a lot of styling . the css rtl file in admin side is empty . i will add some basic css and post it

Blesta Addons · May 31, 2017

basic css style fro RTL theme in admin side (v4) , this is not the complete alignment but it cover the general issue in admin side .

body {
	direction: rtl;
}
header#main_header h1 {
    float: right;
}
header#main_header .right_section {
    float: left;
}
header#main_header .top_nav {
    float: left;
}
header#main_header .menu ul.nav > li {
    float: right;
}
ul.dropdown-menu {
	right: 0;
}
.dropdown-menu {
    text-align: right;
}
header#main_header .breadcrumbs {
    padding: 12px 41px 0 0;
}
header#main_header .serach_block {
    padding: 5px 33px 0px;
}
#left_container {
    float: right;
}
#right_outer {
    margin: 0 297px 0 0;
}
.pull-right {
    float: left;
}
.pull-left {
    float: right;
}
.btn.pull-right {
    margin-left: auto;
    margin-right: 4px;
}
.icon-line {
	padding-left: initial;
    padding-right: 1.25em;
}
.left {
    float: right !important;
}
.right {
    float: left !important;
}
.icon-line i {
    left: auto;
    right: 0;
}
.settings .left {
    float: right;
}
.settings .right {
    float: left;
}
.settings_detail_box ul li {
    padding: 4px 12px 0 0;
}
.settings_detail_box li.heading a, 
.settings_detail_box li.parent a {
    margin-right: 5px;
}
.quick_links ul li div {
    float: right;
}
.common_box .content_section .inner .itemlist .logo {
    float: right;
}
.common_box .button_row_inline {
    float: left;
    top: 0;
    right: auto;
    padding: 22px 0 0 5px;
    left: 0;
}
.common_box .content_section .inner .itemlist ul {
    margin-left: 300px;
    margin-right: 150px;
}
.common_box h2 span {
    float: right;
    padding: 10px 17px 0 0;
}
.common_box h2 a {
    float: left;
    margin: 4px 0 3px 5px;
}
.common_box .links_row ul {
    float: right;
}
.tabs_row ul li {
    float: right;
    padding-left: unset;
    padding-right: 4px;
}
.tabs_row .tabs_nav {
    float: left;
    border-right: 1px solid #e1e1e1;
    border-left: none;
}
.tabs_row .tabs_nav a.prev {
    margin-right: 3px;
    margin-left: unset;
    border-right: 1px solid #e1e1e1;
}
.tabs_row .tabs_nav a.next {
    margin-left: unset;
	margin-right: 4px;
}
.table .heading_row td.last {
    border-right: unset;
    border-left: 0;
}
.table td {
    text-align: right;
}
.table .heading_row td.last span {
    float: right;
}
.table .heading_row td span a.asc::after, 
.table .heading_row td span a.desc::after {
    padding-left: unset;
    padding-right: 6px;
}
.client_detail_box .member_txt {
    float: right;
    padding: 0 15px 9px 0;
}
.currency_amounts .amounts ul li p {
    float: right;
}
.currency_amounts .amounts ul li span {
    float: left;
}

Paul · June 8, 2017

On 5/31/2017 at 10:40 AM, Blesta Addons said:

basic css style fro RTL theme in admin side (v4) , this is not the complete alignment but it cover the general issue in admin side .


body {
	direction: rtl;
}
header#main_header h1 {
    float: right;
}
header#main_header .right_section {
    float: left;
}
header#main_header .top_nav {
    float: left;
}
header#main_header .menu ul.nav > li {
    float: right;
}
ul.dropdown-menu {
	right: 0;
}
.dropdown-menu {
    text-align: right;
}
header#main_header .breadcrumbs {
    padding: 12px 41px 0 0;
}
header#main_header .serach_block {
    padding: 5px 33px 0px;
}
#left_container {
    float: right;
}
#right_outer {
    margin: 0 297px 0 0;
}
.pull-right {
    float: left;
}
.pull-left {
    float: right;
}
.btn.pull-right {
    margin-left: auto;
    margin-right: 4px;
}
.icon-line {
	padding-left: initial;
    padding-right: 1.25em;
}
.left {
    float: right !important;
}
.right {
    float: left !important;
}
.icon-line i {
    left: auto;
    right: 0;
}
.settings .left {
    float: right;
}
.settings .right {
    float: left;
}
.settings_detail_box ul li {
    padding: 4px 12px 0 0;
}
.settings_detail_box li.heading a, 
.settings_detail_box li.parent a {
    margin-right: 5px;
}
.quick_links ul li div {
    float: right;
}
.common_box .content_section .inner .itemlist .logo {
    float: right;
}
.common_box .button_row_inline {
    float: left;
    top: 0;
    right: auto;
    padding: 22px 0 0 5px;
    left: 0;
}
.common_box .content_section .inner .itemlist ul {
    margin-left: 300px;
    margin-right: 150px;
}
.common_box h2 span {
    float: right;
    padding: 10px 17px 0 0;
}
.common_box h2 a {
    float: left;
    margin: 4px 0 3px 5px;
}
.common_box .links_row ul {
    float: right;
}
.tabs_row ul li {
    float: right;
    padding-left: unset;
    padding-right: 4px;
}
.tabs_row .tabs_nav {
    float: left;
    border-right: 1px solid #e1e1e1;
    border-left: none;
}
.tabs_row .tabs_nav a.prev {
    margin-right: 3px;
    margin-left: unset;
    border-right: 1px solid #e1e1e1;
}
.tabs_row .tabs_nav a.next {
    margin-left: unset;
	margin-right: 4px;
}
.table .heading_row td.last {
    border-right: unset;
    border-left: 0;
}
.table td {
    text-align: right;
}
.table .heading_row td.last span {
    float: right;
}
.table .heading_row td span a.asc::after, 
.table .heading_row td span a.desc::after {
    padding-left: unset;
    padding-right: 6px;
}
.client_detail_box .member_txt {
    float: right;
    padding: 0 15px 9px 0;
}
.currency_amounts .amounts ul li p {
    float: right;
}
.currency_amounts .amounts ul li span {
    float: left;
}

Thanks for this. We found some other issues and resolved them as well, but you were very helpful. I still feel like it's not perfect, but it's pretty good.

Sign In

Fully Rtl To Lft Css

Recommended Posts

Blesta Addons

Blesta Addons

ctalkington

Blesta Addons

kpmedia

Blesta Addons

kpmedia

Blesta Addons

Paul

Blesta Addons

Blesta Addons

Paul

Join the conversation

Browse

Activity