Login box in RTL

Login box in RTL

by Saeed Amiri -
Number of replies: 8

Hi

Excuse me If I'm posting in the wrong forum. I thought my problem is somehow related to the "header" which is part of the theme category.

I'm making a multilingual moodle site. The languages are English and Persian, the second one being an RTL. When I switch to Persian, the login box and its accompanying text in the header of the theme also shift to the left which makes a mess with my logo. I just want to have a fixed login box on the left for both languages. The moodle version I'm using is version 2.6 and the original theme is "leatherbound", if that helps. BUnfortunately, I just could not find the code with the help of firebug! sad

Any help would be appreciated.

 

Average of ratings: -
In reply to Saeed Amiri

Re: Login box in RTL

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi,

Does the issue happen in the original 'leatherbound'? If not, would you be able to post the modified theme code somewhere so it can be looked at.  If so, then can then use that as a basis upon which to investigate.

Cheers,

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Login box in RTL

by Saeed Amiri -

Hi Gareth and thanks for the reply

No, this does not happen in the original theme as it does not have a logo image. It includes only a plain brown colour header image which repeats to fill in the whole header area. So the shifting of the login box does not interfere with any logo images. what I did - and it clearly turns out to be the wrong way for my purpose - was to modify the main.css file in the following manner.  

#page-header {
float: none;
padding: 10px 0 0;
background: url([[pix:theme|logo]]) no-repeat 0px 0px;
height: 90px;
background-color: #33AED0;
border-bottom: 5px solid #33AED0;

#page-header {
float: none;
padding: 10px 0 0;
background: url([[pix:theme|logo]]) no-repeat 0px 0px;
height: 90px;
background-color: #33AED0;
border-bottom: 5px solid #33AED0;
color: transparent

Any thoughts on how I should incorporate the logo instead of changing the "background" parameter in the header?

 

 

Average of ratings: -
In reply to Saeed Amiri

Re: Login box in RTL

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi

color: transparent; is for text only and should not be used.

What you need to do is add .dir-rtl in front of any CSS selector you want to style for RTL as well as the same CSS for the element you are styling in English like so...

.dir-rtl #page-header,
#page-header {
float: none;
padding: 10px 0 0;
background: url([[pix:theme|logo]]) no-repeat 0px 0px;
height: 90px;
background-color: #33AED0;
border-bottom: 5px solid #33AED0;
}

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Login box in RTL

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Saeed,

Go with what Mary suggests smile - but with 'dir-rtl' smile - I think 'dif' must be a typo.

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Login box in RTL

by Saeed Amiri -

Hi Mary and Gareth

Thank you both for the reply.

After adding the "dir-rtl" at the beginning of the line "#page-header", the header area along with the login box do not show up at all. Or should I have made some other changes as well?

Best

Saeed 

Average of ratings: -
In reply to Saeed Amiri

Re: Login box in RTL

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Sounds like you've made a mistake.  Did you add '.dir-rtl #page-header,' above the existing definition?

Average of ratings: -
In reply to Saeed Amiri

Re: Login box in RTL

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi you need to add a dot inf ront of dir-rtl like so...

.dir-rtl

you also need to add the two different page-header s to the css rule like so...

.dir-rtl #page-header,
#page-header {
float: none;
padding: 10px 0 0;
background: url([[pix:theme|logo]]) no-repeat 0px 0px;
height: 90px;
background-color: #33AED0;
border-bottom: 5px solid #33AED0;
}

This makes i work the same in both rtl and ltr

Average of ratings: -
In reply to Mary Evans

Re: Login box in RTL

by Saeed Amiri -

Hi With your help, I think I found where to insert the ".dir-rtl". Below is the code with the changes in bold letters.

 

#page-header {
float: right;
padding: 10px 0 0;
background: url([[pix:theme|logo]]) no-repeat 0px 0px;
height: 90px;
border-bottom: 5px solid #33AED0;
background-color: #33AED0;
}

#page-header h1 {
font-size: 2.25em;
margin: 30px 0 20px;
}

#page-header h1.inside {
font-size: 1.8em;
margin: 20px 0 10px;
}

.dir-rtl .headermenu {
float: right;
margin: 0;
font-size: .9em;
}

Average of ratings: -