style for label is very ugly

style for label is very ugly

by Ger Tielemans -
Number of replies: 18

When I move a course from 2.5.3 to 2.6.1 the layout of the label becomes very ugly in all themes:

grey with white fonts.. and with mouse over unreadable, (see under the arrow)

(and I have to click twice when I save a new post... not coreect required warning comes up)

 

 

 

Average of ratings: -
In reply to Ger Tielemans

Re: style for label is very ugly

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

Hi Ger,

I do agree with you the label looks very ugly indeed.

Can I ask if you have added some text to that label which was copied from a Word processor?

That is the only thing I can think off., as it could be the formatting carried over from the text that was copied.

Mary

Average of ratings: -
In reply to Ger Tielemans

Re: style for label is very ugly

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

Which theme are you using Ger?

Average of ratings: -
In reply to Richard Oelmann

Re: style for label is very ugly

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

Hi all,

This is bugging me as I'm sure I've seen this discussed about recently in another post on this forum.

Humm.

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: style for label is very ugly

by Derek Chirnside -

I'm very hesitant to post this, as it may be a complete red herring.  If it is it will not be the first time.

We have had problems with labels and a few other bits and pieces.  Gareth's image is here: https://moodle.org/mod/forum/discuss.php?d=252141

We seem to have a corrupt Moodle 2.6.1 install where it comes to the base and canvas themes which is affecting our theme.  We have figured out this MAY be the case with two from scratch installs which behave slightly differently.  Here is a quote from a guy who did one of the installs:

"Somehow the xxx git repo got totally trashed.  Looks like someone over-wrote all the version-controlled files with a big moodle.zip on Jan 16"  

I of course am unsure what this means.  We ended up putting in some CSS to fix our problems (like file pickers z index).  We will (probably) be working to a 2.6.1+ refresh just to check things are current.

-Derek 

.  

Average of ratings: -
In reply to Derek Chirnside

Re: style for label is very ugly

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

Hi Derek,

Ah I remember that white on white. Can you recall where the CSS was...which theme?

Average of ratings: -
In reply to Mary Evans

Re: style for label is very ugly

by Ger Tielemans -

It was NOT ugly when it was in a course under 2.5.4

(Well, not exactly... In 254 suddenly all topics in a section are centered...)

It was an import from 2.5.4 to 2.6.1

(I use decaf theme, but when I switched back to formal white and topics format it was still there)

(I purged the cashes) 

Today: Moodle 2.6.1+ (Build: 20140131) .. it is still there

And there are more problems. A long line gets a scroll bar instead of word/wrapping..

(I just wonder why this happens..)

 

Average of ratings: -
In reply to Ger Tielemans

Re: style for label is very ugly

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

That looks like one of the 'tabbed' course formats.  Did you upgrade that too?  Does the issue happen when you use standard 'topics' and 'Clean' theme?  If not, then could be an issue with the course formats style sheet.

Average of ratings: -
In reply to Gareth J Barnard

Re: style for label is very ugly

by Ger Tielemans -

Dear Gareth: yes, I use decaf theme, but when I switched back to formal white and topics format it was still there.

Average of ratings: -
In reply to Ger Tielemans

Re: style for label is very ugly

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

Ger,

Is there any kind of Block plugin on that same page?

I have looked everywhere and been sorting through lots of CSS and cannot find anything.

I am beginning to think this is something to do with the imported course.

If you add a new label does that behave in the same way?

Mary

Average of ratings: -
In reply to Mary Evans

Re: style for label is very ugly

by Ger Tielemans -

I removed all the blocksin the course, problem stays
(What made you think that could be the problem? should I remove all the plugins? - test server smile)

When I create a new label it is also ugly.

If I switch to week format with theme formal white or Arialist it is also there.

(corrupt basic theme? install of all themes again, same problem)

Average of ratings: -
In reply to Ger Tielemans

Re: style for label is very ugly

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

Well since we cannot replicate it, it must be something either you or another person has done. For instance, is there any CSS in Appearance > Additional HTML - someone could have added it there for a joke for all we know! If all of a sudden the text is centred, and things start to look wrong, with labels the wrong colour, one cannot rule out sabotage!

Average of ratings: -
In reply to Mary Evans

Re: style for label is very ugly

by Ger Tielemans -

Ok, I did  a new install and added the course: no problem at all,

I added decaf: still ok

i added

I added topictabs: oops is a 25 course format, but still ok

Then check/ add additional html (in head)
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

install filter fontawesome, install other filters

still ok

so it is one of the other plugins: first suspects: blocks?

all blocks back in place, still ok, now I will try poodll

I keep you informed

Average of ratings: -
In reply to Ger Tielemans

Re: style for label is very ugly

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

Hi Ger,

I think there are two possible courses of action:

  1. Learn browser development tools such as https://developers.google.com/chrome-developer-tools/ and investigate what is styling the label and where it is defined.
  2. Set the course to guest access and provide a URL such that we could do the same.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: style for label is very ugly

by Ger Tielemans -

It is a test-server on my laptop, so I try option 1: poodll as suspect?

 

(and I try a complete reinstall step by step, see answer  in other thread)

Attachment ScreenShot012.png
Average of ratings: -
In reply to Ger Tielemans

Re: style for label is very ugly

by David Scotson -
If you right click directly on the white text, and choose the option that says something like "Examine Element" the bottom left area of your screenshot should highlight the specific div or p tag and the bottom right area (where it says "styles") should show exactly where the color: white is coming from (though you might need to scroll down that little window if it's been inherited from an item further up the chain).

Does it only happen on hover? In that case, you also need to click on the little dashed square with the arrow in it (to the right of "element.style") and then select hover, after selecting the appropriate item on the page.
Average of ratings: -
In reply to David Scotson

Re: style for label is very ugly

by David Scotson -
Actually, this reminds me of an early error I had with Bootstrap where the .label (in Moodle terms the bit that you add between resources) was picking up the styles from Bootstrap's labels (which look like this: http://getbootstrap.com/2.3.2/components.html#labels-badges)

In fact, with the new theme I might be able to demonstrate:

this is a Bootstrap label


Which by default have a grey background, with white text, and they set the white-space to no-wrap which makes things turn into one big line.

But, it seems weird if you're getting that in multiple different themes, most of which have no Bootstrap CSS in them.

I notice you're pulling in the Font Awesome from the BootstrapCDN, you didn't accidentally bring in the standard Bootstrap CSS too?
Average of ratings: -
In reply to David Scotson

Re: style for label is very ugly

by Ger Tielemans -

Thanks David, I think that something like that did happen: there is a lot more changed if I compare this server with a fresh install. I keep both to learn and compare smile

Average of ratings: -
In reply to Ger Tielemans

Re: style for label is very ugly

by Ger Tielemans -

this is the content  (I added the spaces in the brackets')
< p >Welcome! ..and what is this course about< / p >

< p >This course is divided in sections. Each section covers a topic. Under the title of each section you see in a glance what you can do around that topic. < br  / >Start by reading the information in "About this course" (see below). We look forward to see you on September 4th.< /p >
< p >Isabelle Langeveld and Ger Tielemans< /p >

 

.. and I need a big monitor screen to reach the edit button on the right side of the label

Average of ratings: -