Essential Theme - Icon Position in the User Alert

Essential Theme - Icon Position in the User Alert

by Saeed Amiri -
Number of replies: 20

Hi every one

One thing I have noticed while switching to RTL languages, persian in my case, is that the icon in the theme's "user alert" feature remain on the left while the text is shifted to the right. I have added the following line to the css file but this only partially solves the problem. 

.dir-rtl .fa-stack-1x,.fa-stack-2x{position:absolute;left:1150px;width:100%;text-align:center}

The problem is solved, thus, in persian language but in English only the fa-info, etc is shifted to the left and the fa-square remains on the right side. A photo of the English mode is attached. 

Any ideas?

Saeed

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

Re: Essential Theme - Icon Position in the User Alert

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

Yes, don't change the CSS but the code that places the position of the icon in the first place.  Given that it's Font Awesome and hence not in core 'bootstrapbase', will almost certainly be in 'essential/renderers/core_renderer.php'.  But I don't have time!

I think Saeed, my friend its time for you to learn HTML, CSS and PHP: http://www.w3schools.com/html/, http://www.w3schools.com/css/ and http://www.w3schools.com/php/.

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme - Icon Position in the User Alert

by Saeed Amiri -

Hi Gareth

Thanks for replying. I have already started the basic lessons.

Anyways, I added

.dir-rtl .fa-stack-2x{position:absolute;left:1150px;width:100%;text-align:center}
.dir-rtl .fa-stack-1x{position:absolute;left:1150px;width:100%;text-align:center}

to font-awesome.min.css file and it is working now. 

Will try the core_renderer.php as well.

 

 

Average of ratings: -
In reply to Saeed Amiri

Re: Essential Theme - Icon Position in the User Alert

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

Hi Saeed,

As font-awesome.min.css is supplied by 'http://fontawesome.io/' then I would recommend adding the CSS to 'custom.css' as that is included after that.  Therefore better from a maintainability point of view.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme - Icon Position in the User Alert

by Saeed Amiri -

Hi Gareth

Thanks for the suggestion. I'll do so.

Regards

Saeed

Average of ratings: -
In reply to Saeed Amiri

Re: Essential Theme - Icon Position in the User Alert

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

@Gareth, I dont think the code in the render needs to be touched - this can be achieved very easily using css

@Saeed, The problem with that solution is that it will move every font-awesome icon which is stacked to the left, and there may well be other items in the theme which use stacked icons not just the warnings in the announcements section. You really need to find what the css selector is for those specific icons not just apply rules randomly without knowing what else they will affect. Also, a fixed left position may well work on your monitor screen size but surely wont on any other screen size.

In this case, in Essential, you probably need to add the .useralerts class to your css and then you could probably just apply it once to .fa (for all font-awesome icons within .useralerts  and far simpler...

.dir-rtl .useralerts .fa {float: right;}

I haven't tried it but ...

+1 for Gareth's suggestion of some basic reading up Saeed! (I've also recommended and used codecademy.com in the past)

Also for css, I strongly recommend using firebug or chrome developer tools to help too

Richard

EDIT: Add it at the end of essential.css (or the equivalent in your cloned theme! - There's no custom.css in the current version of Essential on github) or in your custom css box in your theme settings page.

Average of ratings: -
In reply to Richard Oelmann

Re: Essential Theme - Icon Position in the User Alert

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

Oh crumbs!  No 'custom.css' - oh well, any after 'fontawesome.min' on https://github.com/moodleman/moodle-theme_essential/blob/ESSENTIAL_262/config.php#L36.

Also, I've found FireBug slower than a snail with a hang over these days.  Chrome Developer Tools is getting much better and a new emulation tool - https://developers.google.com/chrome-developer-tools/docs/mobile-emulation - has made it into the latest stable release being 32.0.1700.76.

May the farce be with you young developer.

Average of ratings: -
In reply to Richard Oelmann

Re: Essential Theme - Icon Position in the User Alert

by Saeed Amiri -

Hi Richard

Yes, you are right .dir-rtl .useralerts .fa {float: right;} is the right solution. 

By the way, I found that solution with the help of firebug.

Thanks

Average of ratings: -
In reply to Saeed Amiri

Re: Essential Theme - Icon Position in the User Alert

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

Hi Saeed,

When fixing CSS for RTL you first need to find the CSS rules that are already being applied to that element that you want to make changes to. In this case if you look in essential/style/essential.css you will find this ...

.useralerts [class^="fa-stack"] {
    float: left;
    vertical-align: middle;
    margin-right: 5px;
}
So all you need to do is creat a similar set of CSS rules for RTL for this element like so...
  
.dir-rtl .useralerts [class^="fa-stack"] {
    float: right;
    margin-right: 0;
    margin-left: 5px;  
}
   
Notice how I have reduced margin right to zero and added a CSS rule for margin-left. I have also not added the vertical-align rule as this will be applied automatically to the element via the original CSS. What this means is that you only need to make changes to those rules that apply to direction like margin-right, margin-left, padding-right, padding-left, float (right or left), text-align(right or left) etc.,
   
EDITED: 21/1/2012 (12:29pm)
   
Also, and I nearly forgot...when you are styling more that one element, you can group them together separated by a comma, if they are using the same CSS, but you need to add the .dir-rtl to each set of rules which is why the example you posted above did not work.
   
.dir-rtl .fa-stack-1x,
.dir-rtl.fa-stack-2x {
    position:absolute;
    left:1150px;
    width:100%;
    text-align:center;
}
   
This make it easier.
   
Hope this helps?
Mary
Average of ratings: Useful (1)
In reply to Mary Evans

Re: Essential Theme - Icon Position in the User Alert

by Saeed Amiri -

Hi Mary

Your solution to this problem obviously works better than my silly workaround

Thanks

Average of ratings: -
In reply to Saeed Amiri

Re: Essential Theme - Icon Position in the User Alert

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

Hi Saeed,

Your workaround was not silly, it was not unlike the sort of things I used to do when I was learning about CSS. I am a great believer that you learn by your mistakes. I know I have made plenty over the years. So making a little blunder with the CSS is nothing, it's just a learning curve.

All I can say is enjoy the ride...it's worth it in the end.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Essential Theme - Icon Position in the User Alert

by Saeed Amiri -

Hi Mary

You are right. Thanks for the encouragement.

Cheers

Saeed

Average of ratings: -
In reply to Mary Evans

Re: Essential Theme - Icon Position in the User Alert

by Saeed Amiri -

Hi Mary

You are right. Thanks for the encouragement.

Cheers

Saeed

Average of ratings: -
In reply to Saeed Amiri

Re: Essential Theme - Icon Position in the User Alert

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

Hi Saeed,

If you can use a FireFox browser you might like to see this video tutorial that explains how to find and change CSS in a Moodle theme using the FireBug Add-on. The tutorial is worth watching, it was made by Mirriam Laidlaw who was a Moderator in this forum until last year.

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

Re: Essential Theme - Icon Position in the User Alert

by Saeed Amiri -
Hi Mary Thanks. I have already watched that video and have learned to change things the way it explained. But things are not always that easy when working with firebug, especially when it is not related to css. Best Saeed
Average of ratings: -
In reply to Saeed Amiri

Re: Essential Theme - Icon Position in the User Alert

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

Development is always much harder than it is perceived to be by non-developers.  Hang in there Saeed and keep persevering.  You will succeed in the end.

Average of ratings: -
In reply to Saeed Amiri

Re: Essential Theme - Icon Position in the User Alert

by Saeed Amiri -

Hi Gareth, Richard and Mary

Thanks a lot for your replies. But PLEASE stop telling me to start studying html, css, php blah blah blah. 

As I have said before, I have started studying the basics. But it obviously takes time before "a young developer" stops making fun of himself in front of professional coders and starts, humanly, helping around in solving the same petty, foolish mistakes of another such young developer. 

Please do not forget the initial reason I am here: to get help, even for those impossibly trivial problems that every single visitor can solve prior to clicking on the "add a new discussion topic" button! And I know you might expect a certain degree of prior knowledge on the field but, believe me, I am spending more and more time each day trying to figure out your explanations and compare them with those basic lessons I have learned earlier.

I am cautious, really, to ask any questions at all! ... Does it make any difference to any one?

Best

Saeed

Average of ratings: -
In reply to Saeed Amiri

Re: Essential Theme - Icon Position in the User Alert

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

Hi Saeed,

To answer some of your concerns:

  • No matter how experienced the developer, there is still more to learn.  I learn something new each day.
  • Experienced developers still ask easy questions.
  • Don't be afraid of making a fool of yourself if you don't know the answer = there is no such thing as a stupid question if you do not know the answer.  If somebody says you're foolish because of this then they are the fool not you.
  • Being a developer is not about knowing lots of skills, its more about the ability to adapt, discover and learn new things.  Sort of like a problem solver.  So do try and think the problem through and search the web for answers.
  • The initial stages of learning software development can be daunting.  Sometimes you cannot see the wood for the trees and nothing makes sense.  However, keep going and don't give up.  One day you will attain the critical mass of connected pieces in the puzzle such that it starts to make sense.  Then it will be easier.

Cheers,

Gareth

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Essential Theme - Icon Position in the User Alert

by Saeed Amiri -

Hi Gareth

Words of wisdom. Thanks.

Regards

Saeed

 

Average of ratings: -