Hi,
I have big spaces in my course sections (above and below each section), see picture. I tried to edit the CSS to modify this, unsuccessfully. Any tip?
Thanks!
In reply to Luca Oppizzi
Re: ESSENTIAL theme: too big spaces in course sections
by Gareth J Barnard -
Ok....
What version of the theme and Moodle are you running?
In reply to Gareth J Barnard
Re: ESSENTIAL theme: too big spaces in course sections
by Luca Oppizzi -
Moodle 3.0+ and Essential 2.9.1.4.1
Good question, just realized that Essential isn't supposed to be compatible with Moodle 3.0... It works fine however, except those annoying big spaces in between course sections. For the rest, nothing to complain.
In reply to Luca Oppizzi
Re: ESSENTIAL theme: too big spaces in course sections
by Gareth J Barnard -
Hi Luca,
I see thank you. In that case it will be a part of my checks when I have a business case to produce a version for M3.x+.
Cheers,
Gareth
Hi Gareth - I assume that "when I have a business case to produce a version for M3.x+" means you won't be doing anything until one or more people have stepped forward to fund your effort to do it? How much effort (cost) is that by the way and have you thought of trying crowdfunding?
- Two days or more - depends on how it goes = bespoke development.
- Yes, hence the Flattr link. If I did a MoodleGarage would that work? Last time with the Grid format only achieved half the funding.
Additional: Or I see that it is in my benefit to put the time in for whatever reason. If anybody has other platforms that pay by PayPal that are good for software crowdfunding then I'm open to suggestions.
Maybe Indiegogo: https://www.indiegogo.com/
Thanks Luca, I'll look into its viability.
Hi everybody,
Thanks to Joseph of MoodleNews, a crowd funding campaign is now in place: http://www.moodlegarage.com/.
Cheers,
Gareth
Hi Luca,
Things like this should be able to be fixed with a little CSS.
Is there any chance you could let me have a link to your site so that I can investigate what the problem is?
Looking at the image you posted...it looks like the section padding or the header margin is too big.
Cheers
Mary
Hi Mary,
I agree. I tried with CSSedit but I don't know css enough to make changes successful. Also, there are so many css files in Moodle that it makes any modification more difficult than any other platform I use. If you can find css strips that can be put in Essential custom css, that'd be great.
Please go to: http://lescuela.ch/lms/
There are course that can be accessed anonymously, like this one: http://lescuela.ch/lms/course/view.php?id=6.
If you want to register I can grant you access to other course spaces too.
Thanks!
In reply to Luca Oppizzi
Re: ESSENTIAL theme: too big spaces in course sections
by Derek Chirnside -
Luca, When I am working with CSS I use developers tools in Chrome
F12 gets me this:
- Click the inspect icon,
- then highlight what you want to change
- then read the CSS at X, which you cab edit on the page to see the effect of it)
- then add it to the custom CSS.
What other platform are you comparing Moodle to?
-Derek
In reply to Derek Chirnside
Re: ESSENTIAL theme: too big spaces in course sections
by Luca Oppizzi -
Thanks Derek, very useful.
I mostly use Wordpress besides Moodle. Also using Mahara, to a lesser extent however.
In reply to Luca Oppizzi
Re: ESSENTIAL theme: too big spaces in course sections
by Derek Chirnside -
Luca, you may be interested in this post:
https://moodle.org/mod/forum/discuss.php?d=322877#p1296355
Comparing Moodle and Wordpress is like comparing a swiss army knife with a nail file.
regards
-Derek
In reply to Derek Chirnside
Re: ESSENTIAL theme: too big spaces in course sections
by Luca Oppizzi -
Well, I was not comparing Wordpress and Moodle actually, just saying that editing css in Moodle is way harder than in Wordpress which I'm quite used too...
By the way, I tried to add LMS capabilities to Wordpress (through plugins) a couple of years ago, and never succeeded. Moodle's features are ahead many so-called LMSs. ;)
In reply to Luca Oppizzi
Re: ESSENTIAL theme: too big spaces in course sections
by Derek Chirnside -
Now I get it Luca.
In Wordpress you open up the CSS, one link for each file and edit on the server. I well remember this!!
Yes, point taken, comparing to this it is way more difficult. My apologies.
-Derek
I think, in fact, its where the theme has right and left classes for some of the icons that are only normally visible during editing (the edit control itself for example). These probably need adjusting so they are not visible when editing is turned off, rather than being present and contributing to the space at the top of the section.
In reply to Richard Oelmann
Re: ESSENTIAL theme: too big spaces in course sections
by Luca Oppizzi -
That's perfectly right Richard, I noticed that too. However I wondered if it were possible to remove those invisible icons spaces with just css.
In reply to Richard Oelmann
Re: ESSENTIAL theme: too big spaces in course sections
by Gareth J Barnard -
Hi Richard,
That is not strictly true. The left and right classes are course format things. They are used when editing is off to contain information such as topic number. They also provide a form of padding to style the area. Therefore should be visible when editing is off. That is how they have been stated in the format's styles.css file: https://github.com/moodle/moodle/blob/MOODLE_30_STABLE/course/format/topics/styles.css#L4-L7.
G
I'm just trying to find what's happening here.
The left and right sides have width auto, where normally it used to be width 40px so that they sit either side, so no need to hide them, as they are needed.
I was struggeling to do this on my iPad but the source view would not work on that site so have fired up my main computer to try figure out what is happening in Essentil as it does not appear to happen in Clean theme on the Demo site.
At the moment just trying:
.course-content ul.topics li.section .left {
float: left;
}
.course-content ul.topics li.section .right {
float: right;
}
.course-content ul.topics li.section .left,
.course-content ul.topics li.section .right {
width: 40px;
}
Hi Luca,
Further to my last comment with suggested CSS you could also try:
h3.sectionname { margin-top: -20px}
A bit radical but works.
Cheers
Mary
Great, Mary,
Eventually these parameters were added in custom css and worked perfectly:
h3.sectionname { margin-top: -10px}
.course-content ul.topics li.section .left {
float: left;
}
.course-content ul.topics li.section .right {
float: right;
}
.course-content ul.topics li.section .left,
.course-content ul.topics li.section .right {
width: 40px;
}
body .course-content ul.topics li.section {padding-bottom: 5px}
A general question based on all this: is next Essential version to be fixed with such css parameters (given the layout problem stems from MDL-48947) or will it be up to admin like us to set them manually?
Still many thanks to everyone.
Hi,
Glad these work ok. You can add that CSS to the Custom CSS area and the theme, and once added will carry through when the theme is updated.
As for Moodle itself then I think there is a casue to get that setting changed as it is not right.
I'll report this as a bug and try and fix it in Moodle.
Cheers
Mary
Done...
Wonderful, many thanks!
RE: MDL-52547 - voted.
I worked on this a while ago, noticing similar problems. Not sure if it is the exact same problem, but FYI, the custom code I ended up using is this:
div[role=heading].subject {
padding-top: 5px;
padding-bottom: 5px;
}
This layout problem stems from MDL-48947
where this was added:
https://github.com/moodle/moodle/blob/master/course/format/topics/styles.css#L8-L9
which in turn over rides this:
https://github.com/moodle/moodle/blob/master/course/format/topics/styles.css#L4-L5