ESSENTIAL theme: too big spaces in course sections

ESSENTIAL theme: too big spaces in course sections

di Luca Oppizzi -
Numero di risposte: 27

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!

Allegato screen cap.png
Media dei voti:  -
In riposta a Luca Oppizzi

Re: ESSENTIAL theme: too big spaces in course sections

di Gareth J Barnard -
Immagine Core developers Immagine Particularly helpful Moodlers Immagine Plugin developers

Ok....

What version of the theme and Moodle are you running?

In riposta a Gareth J Barnard

Re: ESSENTIAL theme: too big spaces in course sections

di 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 riposta a Luca Oppizzi

Re: ESSENTIAL theme: too big spaces in course sections

di Gareth J Barnard -
Immagine Core developers Immagine Particularly helpful Moodlers Immagine Plugin developers

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

In riposta a Gareth J Barnard

Re: ESSENTIAL theme: Version for Moodle 3.x+

di Graham Moir -

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?

In riposta a Graham Moir

Re: ESSENTIAL theme: Version for Moodle 3.x+

di Gareth J Barnard -
Immagine Core developers Immagine Particularly helpful Moodlers Immagine Plugin developers

  1. Two days or more - depends on how it goes = bespoke development.
  2. 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.

In riposta a Gareth J Barnard

Re: ESSENTIAL theme: Version for Moodle 3.x+

di Luca Oppizzi -
In riposta a Luca Oppizzi

Re: ESSENTIAL theme: too big spaces in course sections

di Mary Evans -
Immagine Core developers Immagine Documentation writers Immagine Peer reviewers Immagine Plugin developers Immagine Testers

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

In riposta a Mary Evans

Re: ESSENTIAL theme: too big spaces in course sections

di Luca Oppizzi -

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! sorridente

In riposta a Luca Oppizzi

Re: ESSENTIAL theme: too big spaces in course sections

di Derek Chirnside -

Luca, When I am working with CSS I use developers tools in Chrome

F12 gets me this:


  1. Click the inspect icon, 
  2. then highlight what you want to change 
  3. then read the CSS at X, which you cab edit on the page to see the effect of it) 
  4. then add it to the custom CSS.

What other platform are you comparing Moodle to?

-Derek

In riposta a Derek Chirnside

Re: ESSENTIAL theme: too big spaces in course sections

di Luca Oppizzi -

Thanks Derek, very useful.

I mostly use Wordpress besides Moodle. Also using Mahara, to a lesser extent however.

In riposta a Luca Oppizzi

Re: ESSENTIAL theme: too big spaces in course sections

di 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.

sorridente

regards

-Derek

In riposta a Derek Chirnside

Re: ESSENTIAL theme: too big spaces in course sections

di 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 riposta a Luca Oppizzi

Re: ESSENTIAL theme: too big spaces in course sections

di 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

In riposta a Mary Evans

Re: ESSENTIAL theme: too big spaces in course sections

di Richard Oelmann -
Immagine Core developers Immagine Particularly helpful Moodlers Immagine Plugin developers Immagine Testers

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 riposta a Richard Oelmann

Re: ESSENTIAL theme: too big spaces in course sections

di 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 riposta a Richard Oelmann

Re: ESSENTIAL theme: too big spaces in course sections

di Gareth J Barnard -
Immagine Core developers Immagine Particularly helpful Moodlers Immagine Plugin developers

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

In riposta a Gareth J Barnard

Re: ESSENTIAL theme: too big spaces in course sections

di Mary Evans -
Immagine Core developers Immagine Documentation writers Immagine Peer reviewers Immagine Plugin developers Immagine Testers

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;
}

In riposta a Mary Evans

Re: ESSENTIAL theme: too big spaces in course sections

di Mary Evans -
Immagine Core developers Immagine Documentation writers Immagine Peer reviewers Immagine Plugin developers Immagine Testers

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

In riposta a Mary Evans

Re: ESSENTIAL theme: too big spaces in course sections

di Luca Oppizzi -

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. sorridente

In riposta a Luca Oppizzi

Re: ESSENTIAL theme: too big spaces in course sections

di Mary Evans -
Immagine Core developers Immagine Documentation writers Immagine Peer reviewers Immagine Plugin developers Immagine Testers

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

In riposta a Luca Oppizzi

Re: ESSENTIAL theme: too big spaces in course sections

di Mary Evans -
Immagine Core developers Immagine Documentation writers Immagine Peer reviewers Immagine Plugin developers Immagine Testers
In riposta a Luca Oppizzi

Re: ESSENTIAL theme: too big spaces in course sections

di Bill Warters -

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;

    }