I am working with a user who would like to categorise topics by colour by setting different colours for different topics.
For example, three different colours for say, 15 topics instead of only one colour for all. See image for our 'fudged' solution.
Is this possible in Moodle 2.5 (or likely in future releases of the Collapsed Topics module)? Topics version unknown.
Hi Ray,
In the screen shot you have the section summary coloured. Is this what you want or the actual toggle itself?
For the actual toggle a few people in the past have asked for the toggle to be coloured on a per section basis. At the moment its only on a per course basis. I've been reluctant to implement this as would make the course settings page a nightmare to use given the number of sections that are now possible for a course. So have no plans to do so. It might be possible on a per site per course basis to implement in CSS, but that would mask the current colour functionality and teachers would have to be told that they could no longer set the colour.
Collapsed Topics is now at a point where I would not want to do much more with it in terms of adding more features. I feel that adding to much kills the simple elegance of a thing.
Cheers,
Gareth
Hi Gareth,
Thanks for the reply. Yes it was the actual section toggle itself that we were looking to colour - the section summary colouring in the screen capture is our fudged attempt at colour coding.
Regards,
Ray
Hi Ray,
Thank you for clarifying that.
For the reasons already stated, I would be reluctant to implement a generic settings based solution. It might be possible on a per installation basis by some clever CSS to override the functionality per section per course.
Cheers,
Gareth
You could put some css for example to an html block on a course (with the html editor turned off). Something like:
<style>
#toggle-1 {background-color: red; }
#toggle-2 {background-color: green; }
#toggle-3 {background-color: blue; }
</style>
Thank you, Toni, that suggestion works very well.
I combined with hover to get the full effect -
#toggle-2:hover {background-color: #bf1f2f; }
Ray
Thank you Ray for your detailed instruction.
In my Moodle2.6 > Edit profile > only show: Text editor, I select Plain text area, not the HTML editor
In my Moodle2.4 > Edit profile > shows: 'Wehn editing text', I select 'Use standard web forms', not the HTML editor
I can add your CSS into the 'General Summary' area:
But, after save it, the CSS displayed straight away at the top part of page, and it doese not work like a code to change the colour of toggle's back ground.
I must have done something wrong, need your help again.
Thank you very much.
William
Do you have "Plain text format" chosen in the dropdown menu just below the Summary field? Try changing it to "HTML format".
Hi Toni,
I added a new HTML block (named as CSS) > edit my profile to use 'Plain text' text editor > Copy/Paste your CSS into the block. But not work. I assume that I am not using the right method to 'disable the HTML editor'.
Would you please give me more instruction to add CSS into a course page?
I am using Moodle2.6.2
Thanks
Hey William,
That should be just the right way to disable the editor. Just make sure you don't see any of the editor buttons etc. when you paste the code and save the block settings. Also you can't hide the html block by closing the eye icon or the code won't work.
Are you sure you a have chosen Collapsed Topics as the course format? You can test this code with the normal topics format to see that the css works.
<style>
#section-1 {background: #ff0000;}
</style>
Hi Toni,
Fantastic! I copied all code into a HTML block as below:
All code are working now, The colour of 4 Collapsed backgrouds and 1 section background changed!
And the block is auto hidden when 'turn editing off', beautiful !
Thank you very much.
William
I modified my first test at the 'general summary' section again as below:
It works as expected. The CSS changed the colour of section 2 and toggles; and the CSS code is hidden when 'Turn editing off'
So, the key combination to add CSS into local course page is:
[Edit profile to 'No-Editor'] + [ HTML format when no 'Editor-tools'], as shown above.
We can add hover color as well:
<style>
#toggle-12 {background-color: #808080; }
#toggle-12:hover {background-color: #c0c0c0; }
#toggle-13 {background-color: #808080; }
#toggle-13:hover {background-color: #c0c0c0; }
</style>