Hi All
We are having alignment issues with the gradebook. This is using the Elegance theme, and Moodle 2.7.
Not sure what needs to be changed to line up the first 2 rows. Any help is much appreciated.
THanks,
Rene
In a nutshell the fact Elegance is a stand alone theme it is not picking up the CSS for the gradebook from bootstrapbase which fixes all these problems.
Hi Mary,
I flipped over to bootstrapbase, and they are aligned. I then flipped it to bootstrap 3 and they are not. So Elegance gradewbook doesn't look right because it uses bootstrap3 as a base?
Any other users looking at Elegance have this issue / fix?
Rene
This is the nightmare reality of this theme. The problem is that the code in Moodle is not Bootstrap3 compatible.
That said, the thing is Elegance could probaly work just as well using Bootstrapbase as a parent and still use Bootstrap 3 to style the layouts and all the fancy stuff.
If I were you Rene I would delete this section of CSS from elegance/style/elegance.css file
https://github.com/lazydaisy/moodle-theme_elegance/blob/master/style/elegance.css#L2322-L2469
and see how it looks.
Shoehorn is BSv3 based in terms of a child theme and I've not noticed the issue, but will double check tomorrow.
Does the problem happen in the original or Danny's new child version?
if the output is a BS2 grid then ti will be a problem on either.
It's a table which has specific CSS and should not need any CSS from any theme.
The css is in grade/report/grader/style.css and is uptodate in MOODLE_27_STABLE AND master branches in https://github.com/moodle/moodle.git:
I added bootstrapbase as a grandparent to your elegance theme last night and it cured the problem with the grader and also the dropdown menus in the header (which are sluggish without bootstrapbase javascript)
Gareth, if checking this you need to select Static Student in Admin settings.
Also be aware the problem is historic....but is fixed in 2.7
Thanks Mary, this is Shoehorn with 'Static student' some slight issue but not as bad as Elegance. The CSS is in reality based upon the latest Bootstrap V3 theme of Bas.
Ok, the fix for Bootstrap V3 is https://github.com/bmbrands/theme_bootstrap/pull/287 (see attached image).
I did find that removing the '#user-grades' margin caused a much larger gap at the top so assume that it is the lack of this selector in Elegance that is causing the issue.
Hi Gareth, Thanks for the fix on the bootstrap 3 theme. I switched to that as the theme, and the gradebook shows up properly. Oddly enough, the fixed bootstrap3 theme, doesn't fix the issue in Elegance. I am using the latest version from Danny.
(Purged caches, and restarted Apache).
There must be something in Elegance styling the grade table.
Rene
PS Turned off Static Columns, and everything lines up.
Hi Rene,
No worries. Actually, https://github.com/bmbrands/theme_bootstrap/pull/287 as not been integrated into Bootstrap V3 yet so apply manually to your copy of Bootstrap V3, then recreate the CSS from the LESS files in Danny's child, then a 'Purge all caches'.
Gareth
Hi Gareth,
I have never created css from files, so looked it up. Followed these instructions.
Installed recess for ubuntu.
cd theme/bootstrap/less/
recess --compile--compress moodle.less > ../style/moodle.css
But must have gunged something up, as theme was damaged. Purging cache didn't seem to help.
Do I need to do something different?
Rene
Hi Rene,
Oh I see, sorry, I should clarify. Bootstrap V2.3.2 in core uses 'recess' but V3 uses 'lessc' invoked by 'grunt'.
Looking at Elegance, the CSS is as it is: https://github.com/thedannywahl/moodle-theme_elegance/tree/master/style so does not need to be compiled, however the LESS in Bas's Bootstrap V3 does, please see: https://github.com/bmbrands/theme_bootstrap/blob/master/less/README - where you use 'npm' environment used with 'recess'.
Alternatively, temporarily use the compiled CSS in the 'style' folder of: https://github.com/gjb2048/theme_bootstrap/tree/master_static_student_gradebook
Cheers,
Gareth
Hi Gareth,
I think I am following, but maybe I am still messing up.
I downloaded moodle.css and moodle-rtl.css from https://github.com/gjb2048/theme_bootstrap/tree/master_static_student_gradebook
I copied the files to /var/www/moodle/theme/bootstrap/style/ after renaming the originals.
The theme looked wonky again, but Purged the Caches just in case. No go. Am I messing up? I can try to compile with grunt. (I should be able to grunt with the best of them
Thanks,
Rene
Hi Rene,
Odd. Should have worked. This is for M2.7. What version of Moodle are you using and where did you get 'bootstrap' from please?
Or temporarily replace your 'bootstrap' with mine: https://github.com/gjb2048/theme_bootstrap/tree/master_static_student_gradebook - as long as you are happy uninstalling later and fixing any version issues in the DB if needed.
Cheers,
Gareth
Hi Gareth,
Very strange. Totally nuked bootstrap from the disk and used the zip file from the url provided above. Boostrap3 theme, gradebook looks perfect. Elegance continues to have the mis-alignment.
Moodle Version - Moodle2.7+ (Build: 20140529)
Elegance Version - 2.7.0.03
Bootstrap 3 Version - downloaded fresh off the github provided.
Think I will leave it till next week, as my forehead is getting sore slamming it against my desk.
Thanks for your time, it is much appreciated.
Rene
Hi Rene,
Odd as I cannot replicate (see attached). I'm using:
https://github.com/gjb2048/theme_bootstrap/tree/master_static_student_gradebook and https://github.com/thedannywahl/moodle-theme_elegance (in effect as pulled into my https://github.com/gjb2048/moodle-theme_elegance).
Cheers,
Gareth
Hi Gareth,
When I look at your picture, the rows are not aligned. Maybe we are seeing the same thing.
I noticed a padding of 8px on .generaltable > tbody > tr > td and set it to 0px. It is almost aligned after that.
The cells where Surname and email address are 51px, but the Unit 1 Discussion cell is 46px.
Thanks,
Rene
Rene, there should be a space between --compile and --compress you have it all as one. Of course it could just be a typo...but these little things can cause strange things to happen.
recess --compile--compress moodle.less > ../style/moodle.css
this is how I write it - http://docs.moodle.org/dev/LESS
recess --compile --compress moodle.less > ../style/moodle.css
Hey Mary,
Yes, just a typo in my post. My exact command was: recess --compile --compress moodle.less > /var/www/moodle/theme/bootstrap/style/moodle.css
Thanks,
Rene
What you could do is switch to Clean theme when doing Admin work.
OK. Everything is lined up.
Code added to custom css block in theme.
.path-rating .ratingtable > thead > tr > th, table.flexible > thead > tr > th, .generaltable > thead > tr > th, .path-rating .ratingtable > tbody > tr > th, table.flexible > tbody > tr > th, .generaltable > tbody > tr > th, .path-rating .ratingtable > tfoot > tr > th, table.flexible > tfoot > tr > th, .generaltable > tfoot > tr > th, .path-rating .ratingtable > thead > tr > td, table.flexible > thead > tr > td, .generaltable > thead > tr > td, .path-rating .ratingtable > tbody > tr > td, table.flexible > tbody > tr > td, .generaltable > tbody > tr > td, .path-rating .ratingtable > tfoot > tr > td, table.flexible > tfoot > tr > td, .generaltable > tfoot > tr > td {
padding: 0px;
}
.path-grade-report-grader .left_scroller #fixed_column th {
height: 0em;
}
.path-grade-report-grader .right_scroller table#user-grades td.grade {
height: 0em;
}
Not sure what else I wrecked by changing these items, but they line up when viewing and editing.
It was the padding that has caused so much trouble in the first place.
one pixel here, one pixel there
just makes for a wonky grade-book
everywhere!
It looks OK to me.
I added the following code in the custom CSS for Elegance. It looks like it is working.
.right_scroller{ padding-top: 21px; }