Hi everyone
Anyone using Moodle for an RTL language and interested in Theme Essential might have noticed that the frontpage slideshow does not support RTL languages, or at least does not do so in Persian language. To start with, the multi-lang span codes do not work in related settings, and the position of the slide images, on one hand, and the slide title as well as the slide caption, on the other hand, need to be reversed. Previously we had the same problem with frontpage User Alerts, but fortunately a couple of workarounds were offered both by Mary Evans and Gareth J Barnard: here. The solution, of course, has been included, as far as I know, in the recent upgrade to the theme. Following Gareth's solution, I think I have found another similar workaround for the problem with the slideshow in RTL languages as follows.
Please note that the changes in frontpage.php and settings.php make changes to the first slide ONLY so you need to make similar changes to the three remaining slides.
1) settings.php
/*
* Slide 1
*/
// Title.
$name = 'theme_essential/slide1_'.current_language();
$title = get_string('slidetitle', 'theme_essential');
$description = get_string('slidetitledesc', 'theme_essential');
$setting = new admin_setting_configtext($name, $title, $description, '');
$default = '';
$setting->set_updatedcallback('theme_reset_all_caches');
$temp->add($setting);
// Caption.
$name = 'theme_essential/slide1caption_'.current_language();
$title = get_string('slidecaption', 'theme_essential');
$description = get_string('slidecaptiondesc', 'theme_essential');
$setting = new admin_setting_configtextarea($name, $title, $description, '');
$setting->set_updatedcallback('theme_reset_all_caches');
$temp->add($setting);
2) frontpage.php
/* Slide1 settings */
$slide1 = 'slide1_'.current_language();
$slide1caption = 'slide1caption_'.current_language();
if ($hasslide1) {
$slide1 = $PAGE->theme->settings->$slide1;
}
if ($hasslide1image) {
$slide1image = $PAGE->theme->setting_file_url('slide1image', 'slide1image');
}
if ($hasslide1caption) {
$slide1caption = $PAGE->theme->settings->$slide1caption;
}
if ($hasslide1url) {
$slide1url = $PAGE->theme->settings->slide1url;
}
3) slides.css
.dir-rtl .da-slide h2 {text-align:right; font-family:tahoma;font-size: 40px; right:10%}
.dir-rtl .da-slide p {text-align:right; font-family:tahoma; right:10%}
.dir-rtl .da-slide .da-link {right: 0}
.dir-rtl .da-slide .da-img {right: 800px}
/* Animation classes and animations for RTL Languages */
/* Slide in from the left*/
.dir-rtl .da-slide-fromleft h2{
-webkit-animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
-moz-animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
-o-animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
-ms-animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
}
.dir-rtl .da-slide-fromleft p{
-webkit-animation: fromLeftAnim2-1 0.6s ease-in-out 0.8s both;
-moz-animation: fromLeftAnim2-1 0.6s ease-in-out 0.8s both;
-o-animation: fromLeftAnim2-1 0.6s ease-in-out 0.8s both;
-ms-animation: fromLeftAnim2-1 0.6s ease-in-out 0.8s both;
animation: fromLeftAnim2-1 0.6s ease-in-out 0.8s both;
}
.dir-rtl .da-slide-fromleft
.da-link{
-webkit-animation: fromLeftAnim3-1 0.4s ease-in-out 1.2s both;
-moz-animation: fromLeftAnim3-1 0.4s ease-in-out 1.2s both;
-o-animation: fromLeftAnim3-1 0.4s ease-in-out 1.2s both;
-ms-animation: fromLeftAnim3-1 0.4s ease-in-out 1.2s both;
animation: fromLeftAnim3-1 0.4s ease-in-out 1.2s both;
}
.dir-rtl .da-slide-fromleft
.da-img{
-webkit-animation: fromLeftAnim4-1 0.6s ease-in-out 0.8s both;
-moz-animation: fromLeftAnim4-1 0.6s ease-in-out 0.8s both;
-o-animation: fromLeftAnim4-1 0.6s ease-in-out 0.8s both;
-ms-animation: fromLeftAnim4-1 0.6s ease-in-out 0.8s both;
animation: fromLeftAnim4-1 0.6s ease-in-out 0.8s both;
}
.dir-rtl .da-slide-fromleft
.variant2{
-webkit-animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
-moz-animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
-o-animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
-ms-animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
animation: fromLeftAnim1-1 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromLeftAnim1-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim3-1{
0%{ right: 110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim1-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim3-1{
0%{ right: 110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
@-o-keyframes fromLeftAnim1-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim2-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim3-1{
0%{ right: 110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim4-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim1-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim3-1{
0%{ right: 110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
@keyframes fromLeftAnim1-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@keyframes fromLeftAnim2-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@keyframes fromLeftAnim3-1{
0%{ right: 110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@keyframes fromLeftAnim4-1{
0%{ right: 110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
/* Slide in from the right*/
.dir-rtl .da-slide-fromright h2{
-webkit-animation: fromRightAnim1-2 0.6s ease-in-out 0.6s both;
-moz-animation: fromRightAnim1-2 0.6s ease-in-out 0.6s both;
-o-animation: fromRightAnim1-2 0.6s ease-in-out 0.6s both;
-ms-animation: fromRightAnim1-2 0.6s ease-in-out 0.6s both;
animation: fromRightAnim1-2 0.6s ease-in-out 0.6s both;
}
.dir-rtl .da-slide-fromright p{
-webkit-animation: fromRightAnim2-2 0.6s ease-in-out 0.6s both;
-moz-animation: fromRightAnim2-2 0.6s ease-in-out 0.6s both;
-o-animation: fromRightAnim2-2 0.6s ease-in-out 0.6s both;
-ms-animation: fromRightAnim2-2 0.6s ease-in-out 0.6s both;
animation: fromRightAnim2-2 0.6s ease-in-out 0.6s both;
}
.dir-rtl .da-slide-fromright
.da-link{
-webkit-animation: fromRightAnim3-2 0.4s ease-in-out 1.2s both;
-moz-animation: fromRightAnim3-2 0.4s ease-in-out 1.2s both;
-o-animation: fromRightAnim3-2 0.4s ease-in-out 1.2s both;
-ms-animation: fromRightAnim3-2 0.4s ease-in-out 1.2s both;
animation: fromRightAnim3-2 0.4s ease-in-out 1.2s both;
}
.dir-rtl .da-slide-fromright
.da-img{
-webkit-animation: fromRightAnim4-2 0.6s ease-in-out 0.6s both;
-moz-animation: fromRightAnim4-2 0.6s ease-in-out 0.6s both;
-o-animation: fromRightAnim4-2 0.6s ease-in-out 0.6s both;
-ms-animation: fromRightAnim4-2 0.6s ease-in-out 0.6s both;
animation: fromRightAnim4-2 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromRightAnim1-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim3-2{
0%{ right: -110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
@-moz-keyframes fromRightAnim1-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim2-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim3-2{
0%{ right: -110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim4-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
@-o-keyframes fromRightAnim1-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim2-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim3-2{
0%{ right: -110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim4-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
@-ms-keyframes fromRightAnim1-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim2-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim3-2{
0%{ right: -110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim4-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
@keyframes fromRightAnim1-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@keyframes fromRightAnim2-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@keyframes fromRightAnim3-2{
0%{ right: -110%; opacity: 0; }
1%{ right: 10%; opacity: 0; }
100%{ right: 10%; opacity: 1; }
}
@keyframes fromRightAnim4-2{
0%{ right: -110%; opacity: 0; }
100%{ right: 60%; opacity: 1; }
}
/* Slide out to the left */
.dir-rtl .da-slide-toleft h2{
-webkit-animation: toLeftAnim1-3 0.6s ease-in-out 0.6s both;
-moz-animation: toLeftAnim1-3 0.6s ease-in-out 0.6s both;
-o-animation: toLeftAnim1-3 0.6s ease-in-out 0.6s both;
-ms-animation: toLeftAnim1-3 0.6s ease-in-out 0.6s both;
animation: toLeftAnim1-3 0.6s ease-in-out 0.6s both;
}
.dir-rtl .da-slide-toleft p{
-webkit-animation: toLeftAnim2-3 0.6s ease-in-out 0.3s both;
-moz-animation: toLeftAnim2-3 0.6s ease-in-out 0.3s both;
-o-animation: toLeftAnim2-3 0.6s ease-in-out 0.3s both;
-ms-animation: toLeftAnim2-3 0.6s ease-in-out 0.3s both;
animation: toLeftAnim2-3 0.6s ease-in-out 0.3s both;
}
.dir-rtl .da-slide-toleft
.da-link{
-webkit-animation: toLeftAnim3-3 0.4s ease-in-out both;
-moz-animation: toLeftAnim3-3 0.4s ease-in-out both;
-o-animation: toLeftAnim3-3 0.4s ease-in-out both;
-ms-animation: toLeftAnim3-3 0.4s ease-in-out both;
animation: toLeftAnim3-3 0.4s ease-in-out both;
}
.dir-rtl .da-slide-toleft
.da-img{
-webkit-animation: toLeftAnim4-3 0.6s ease-in-out both;
-moz-animation: toLeftAnim4-3 0.6s ease-in-out both;
-o-animation: toLeftAnim4-3 0.6s ease-in-out both;
-ms-animation: toLeftAnim4-3 0.6s ease-in-out both;
animation: toLeftAnim4-3 0.6s ease-in-out both;
}
@-webkit-keyframes toLeftAnim1-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim3-3{
0%{ right: 10%; opacity: 1; }
99%{ right: 10%; opacity: 0; }
100%{ right: 100%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4-3{
0%{ right: 60%; opacity: 1; }
30%{ right: 55%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-moz-keyframes toLeftAnim1-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-moz-keyframes toLeftAnim3-3{
0%{ right: 10%; opacity: 1; }
99%{ right: 10%; opacity: 0; }
100%{ right: 100%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4-3{
0%{ right: 60%; opacity: 1; }
30%{ right: 55%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-o-keyframes toLeftAnim1-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-o-keyframes toLeftAnim2-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-o-keyframes toLeftAnim3-3{
0%{ right: 10%; opacity: 1; }
99%{ right: 10%; opacity: 0; }
100%{ right: 100%; opacity: 0; }
}
@-o-keyframes toLeftAnim4-3{
0%{ right: 60%; opacity: 1; }
30%{ right: 55%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-ms-keyframes toLeftAnim1-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@-ms-keyframes toLeftAnim3-3{
0%{ right: 10%; opacity: 1; }
99%{ right: 10%; opacity: 0; }
100%{ right: 100%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4-3{
0%{ right: 60%; opacity: 1; }
30%{ right: 55%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@keyframes toLeftAnim1-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@keyframes toLeftAnim2-3{
0%{ right: 10%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
@keyframes toLeftAnim3-3{
0%{ right: 10%; opacity: 1; }
99%{ right: 10%; opacity: 0; }
100%{ right: 100%; opacity: 0; }
}
@keyframes toLeftAnim4-3{
0%{ right: 60%; opacity: 1; }
30%{ right: 55%; opacity: 1; }
100%{ right: 100%; opacity: 0; }
}
/* Slide out to the right*/
.dir-rtl .da-slide-toleft h2{
-webkit-animation: toRightAnim1-4 0.6s ease-in-out both;
-moz-animation: toRightAnim1-4 0.6s ease-in-out both;
-o-animation: toRightAnim1-4 0.6s ease-in-out both;
-ms-animation: toRightAnim1-4 0.6s ease-in-out both;
animation: toRightAnim1-4 0.6s ease-in-out both;
}
.dir-rtl .da-slide-toleft p{
-webkit-animation: toRightAnim2-4 0.6s ease-in-out 0.3s both;
-moz-animation: toRightAnim2-4 0.6s ease-in-out 0.3s both;
-o-animation: toRightAnim2-4 0.6s ease-in-out 0.3s both;
-ms-animation: toRightAnim2-4 0.6s ease-in-out 0.3s both;
animation: toRightAnim2-4 0.6s ease-in-out 0.3s both;
}
.dir-rtl .da-slide-toleft
.da-link{
-webkit-animation: toRightAnim3-4 0.6s ease-in-out 0.6s both;
-moz-animation: toRightAnim3-4 0.6s ease-in-out 0.6s both;
-o-animation: toRightAnim3-4 0.6s ease-in-out 0.6s both;
-ms-animation: toRightAnim3-4 0.6s ease-in-out 0.6s both;
animation: toRightAnim3-4 0.6s ease-in-out 0.6s both;
}
.dir-rtl .da-slide-toleft
.da-img{
-webkit-animation: toRightAnim4-4 0.6s ease-in-out 0.5s both;
-moz-animation: toRightAnim4-4 0.6s ease-in-out 0.5s both;
-o-animation: toRightAnim4-4 0.6s ease-in-out 0.5s both;
-ms-animation: toRightAnim4-4 0.6s ease-in-out 0.5s both;
animation: toRightAnim4-4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toRightAnim1-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-webkit-keyframes toRightAnim3-4{
0%{ right: 10%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4-4{
0%{ right: 60%; opacity: 1; }
70%{ right: 30%; opacity: 0; }
100%{ right: -50%; opacity: 0; }
}
@-moz-keyframes toRightAnim1-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-moz-keyframes toRightAnim2-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-moz-keyframes toRightAnim3-4{
0%{ right: 10%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-moz-keyframes toRightAnim4-4{
0%{ right: 60%; opacity: 1; }
70%{ right: 30%; opacity: 0; }
100%{ right: -50%; opacity: 0; }
}
@-o-keyframes toRightAnim1-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-o-keyframes toRightAnim2-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-o-keyframes toRightAnim3-4{
0%{ right: 10%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-o-keyframes toRightAnim4-4{
0%{ right: 60%; opacity: 1; }
70%{ right: 30%; opacity: 0; }
100%{ right: -50%; opacity: 0; }
}
@-ms-keyframes toRightAnim1-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-ms-keyframes toRightAnim2-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-ms-keyframes toRightAnim3-4{
0%{ right: 10%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@-ms-keyframes toRightAnim4-4{
0%{ right: 60%; opacity: 1; }
70%{ right: 30%; opacity: 0; }
100%{ right: -50%; opacity: 0; }
}
@keyframes toRightAnim1-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@keyframes toRightAnim2-4{
0%{ right: 10%; opacity: 1; }
30%{ right: 15%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@keyframes toRightAnim3-4{
0%{ right: 10%; opacity: 1; }
100%{ right: -50%; opacity: 0; }
}
@keyframes toRightAnim4-4{
0%{ right: 60%; opacity: 1; }
70%{ right: 30%; opacity: 0; }
100%{ right: -50%; opacity: 0; }
}
.dir-rtl .da-slide
.da-link{
white-space: nowrap;
}
Regards
Saeed