Essential Theme - Login buttons overlap in RTL

Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -
Number of replies: 19

Hi every one

I'm using the Essential theme for both English and Persian languages. One thing I have noticed, while on the frontage and switching to persian language is that the login page's buttons overlap with one another. I have attached a screen shot of the login box.

Also, some texts are so close to the icons next to them without the proper space needed. I have been able to add some space for some instances but not for all of them as you see in the attached image. This second issue is not limited, by the way, to the frontpage and is contagious to the entire website.

Any one has any ideas?

Thanks in advance.

Attachment login.png
Average of ratings: -
In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

By margin in the image, I mean the space required between the text and the icon next to it.

In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap in RTL

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

Hi Saeed,

Out of curiosity and the need to fix for all, does the problem happen in the 'Clean' theme too?  This is because both 'Clean' and 'Essential' have as their parent 'Bootstrapbase' and therefore if the issue happens in 'Clean' too, then fixing it in 'Bootstrapbase' will help all themes that have 'Bootstrapbase' as a parent.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

Hi Gareth

Thanks for replying. No, as the attached images show in theme "clean" things are different and there is no overlapping. There is no problem, also, as far as the second issue is concerned, i.e. the required space between the texts and their icons. One thing I forgot to say is that I am testing the theme on a CRT monitor, 17 inches actually. On a wide screen monitor, the overlapping does not occur when switching to the persian language.The only problem in the theme "clean" is that the username and password  boxes exceed the border as evident in the images.  

Attachment Persian.png
In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

The second image

Attachment English.png
In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap in RTL

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

Hi Saeed,

Thank you for the screen shots, really helpful smile

So, there are two issues here, the first only with the Essential theme.  And the second with all 'bootstrapbased' themes in general.  With the responsive intent of this family of themes then certainly there should be no overlap under any circumstances of the boxes regardless of device and screen size.  Both something to look into.  And knowing that there are in fact two separate issues helps.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

Since I cannot help, at least, at present, to amend faulty codes, etc., I'm glad that I can be helpful this way.smile

In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap in RTL

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

There are quite a number of RTL fixes in the pipeline, but not sure how Bootstrapbase is being fixed at the moment.

Essential is a stand-alone-theme in this respect so Essential need fixing by Julian. However I will take a look at the problems you have highlighted and get you the fixes for the button margins and stuff.

Cheers

Mary

In reply to Mary Evans

Re: Essential Theme - Login buttons overlap in RTL

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

OK...add this to your Essential/General setting Custom CSS

/** this fixes the block header icon **/
.dir-rtl .block .header .title h2:before { margin-left: 0.3em; margin-right: 0; }
In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap in RTL

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

Are you using Safari? As I am not seeing the same for the Login buttons, Mine look OK using FireFox although the 'Lost Password?' button seems to be a little squashed up.  Yours looks like it is over the Login button. So could be your browser, which I will need to know so that it can be styled accordingly.

Mary

In reply to Mary Evans

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

Hi Mary

Thanks a lot for replying. Yes, I mostly use Safari, but I also have tested the theme on various browsers including Firefox, Google Chrome and Internet Explorer. But the overlapping issue occurs in Firefox as well when I see it in the CRT monitor. 

I put the code in the css box in the theme's general settings but when I click on the save button it gives the following error.

Some settings were not changed due to an error.

I don't know what causes that error. Any ideas?

Many thanks

In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap 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 Saeed,

CSS

Perhaps you added something that the Custom CSS box did not like?

LOGIN BUTTONS

I have just discovered that the Login buttons appear differently depending on what RTL language you use. I tried it first using 'fa' Farsi and no problem, however I have just changed to 'he' Hebrew and get the same problem with the buttons as you see. It could be caused by the browser, but I will check.

Mary

In reply to Mary Evans

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

I don't think so. Just copied your lines and pasted that in the custom css box.

In reply to Mary Evans

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

Hi again

That is interesting.

As for the space issue, I also have the problem for some other areas as shown in the photo. Do you have any ideas how that can also be fixed. Any other css lines to amend this problem as well? 

 

Attachment photo.png
In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

I added the code to essential.css file in the theme's style folder, and now it works.

Thanks a lot.

In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap in RTL

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

Hi Mary and Saeed,

I've been noticing 'Some settings were not changed due to an error.' recently too and pinned it down to the logo when empty.  Please see https://tracker.moodle.org/browse/MDL-41702?focusedCommentId=265286&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-265286.  In this context it is not related to the problem nor has an effect.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

Hi Gareth

You are absolutely right. When I added the logo, the error disappeared. 

Many thanks

In reply to Gareth J Barnard

Re: Essential Theme - Login buttons overlap in RTL

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

OK...will test that in a minute...just fixing the login buttons.

In reply to Saeed Amiri

Re: Essential Theme - Login buttons overlap in RTL

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

Please don't rush me wanting fixes...I can only work at the time that suits me, which for me can be any time of day or night, depending if I feel like it.

OK...I have spent 2hours messing about with the block login buttons and come up with this.

.block_login .footer {
    height: auto;
}
input#login_username {
    width: 95%;
}
.block_login .footer div {
    margin: 0;
    padding: 0;
}
.block_login input[type="submit"],
.block_login .footer a {
    border-radius: 5px;
    box-shadow: none;
    color: #FFFFFF;
    font-size: 1em;
    margin: 0 0 5px;
    padding: 5px;
    text-shadow: none;
    float: left;
}
.block_login input[type="submit"] {
    background-color: #0CC719;
}
.block .footer {
    padding: 0;
    margin: 0;
    float: left;
}
div.c1.btn {
    height: 30px;
    margin-bottom: 90px
}
.block .footer {
    bottom: 85px;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
.dir-rtl .block .footer {
    float: right;
    text-align: right;
}
.dir-rtl .block_login input[type="submit"],
.dir-rtl .block_login .footer a {
    float: right;
}
.dir-rtl .block .header .title h2:before {
    margin-left: 0.3em;
}

Take it or leaving it...makes not difference to me, but I am really getting to the end of my tether when people ask for help continually without seemingly making any effort to help themselves. You may think it is easy fishing about in someone else's theme, well it isn't it pretty time consuming.

Oh...just done these too...

.dir-rtl .block #icon {
    margin-left: 5px;
}
/* @navigation */
.dir-rlt .tree_item.branch:before {
    margin-left: 5px;
}

Cheers

Mary


EDIT:

Spot the deliberate mistake.

One of the icons will not change because the CSS is wrong.

Check through it and see if you can find the error.

This is good practice as then you will begin to realise it is not all that hard to do but then again it is not easy either.

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Essential Theme - Login buttons overlap in RTL

by Saeed Amiri -

Hi Mary 

Thank you very much for taking the time, really!

I am really sorry, but I didn't mean to rush any one, including you, wanting them to fix me things. This is a free forum and like every one else I thought I can post my theme-related problems here.

You've been really helpful and I am really thankful for that. I shouldn't have addressed my posts, especially the past few ones, to you as you must have felt I am being pushing or being demanding?

PLEASE do ignore my posts from now on whenever you feel you don't like answering them. And I wouldn't address my posts  exclusively to you or probably to any one else from now on.

Best

Saeed