Using CSS in Lessons

Using CSS in Lessons

by Gerard Libby -
Number of replies: 12

Hello all. Im attempting to write some lessons using the HTML editor but its not going so well. Basically I want to implement a menu to the right of the main body of text of each lesson question page. I've attempted to use tables but the are interfering with the tables in the body of the text. Both tables are connected to each other without any gap inbetween them so it looks quite bad. I'll upload a picture when able if that doesnt make sense.

I think using CSS would help me because then I could have floating containers instead of the awkward tables. Im not super skilled in CSS however and I have no idea how to implement in the lessons module of moodle. How can I go about adding some simple CSS menus? Thanks.

Average of ratings: -
In reply to Gerard Libby

Re: Using CSS in Lessons

by Lynn Scarlet Clark -
Hello Gerard,

I know you've said you wanted a right hand menu, but there is an insanely easy way of getting a menu on the left-hand side of the lesson screen.

In your Lesson's Settings page, under Lesson Formatting, just click on Display left menu. I'm sure if you really wanted you could alter the existing CSS to make the menu float right instead of left, but this will give you a lovely menu with practically zero effort.

Hope this helps.
Average of ratings: -
In reply to Lynn Scarlet Clark

Re: Using CSS in Lessons

by Gerard Libby -
Oh wow never noticed that. Two questions. The reason I was implementing the menu was to link to activities outside of the lesson. Is there a way to get that menu to display more than just the branch tables of the lesson. Secondly, is there a way to use HTML code in the menu so that I can have buttons instead of basic links?

Thanks so much!
Average of ratings: -
In reply to Gerard Libby

Re: Using CSS in Lessons

by Hartmut Scherer -
Hi Gerard,

With "Blocks editing on" in a lesson activity, you can add a HTML block with anything you like.

With kind regards,

Hartmut
Average of ratings: -
In reply to Hartmut Scherer

Re: Using CSS in Lessons

by Gerard Libby -
I think that will work perfectly for what I need to do. Thanks.
Average of ratings: -
In reply to Hartmut Scherer

Re: Using CSS in Lessons

by Gerard Libby -
One other question. Is there a way to change what that block displays as a result of what page the lesson is on?
Average of ratings: -
In reply to Gerard Libby

Re: Using CSS in Lessons

by Itamar Tzadok -
Surprisingly enough (or not) there is a way using CSS provided that the block is on the left side. You place the content corresponding to each lesson page in an identified div in the block. Then you add to the block a style tag and set all the divs to display:none. Then you add to each lesson page a style tag in which you set the corresponding div to display:block. That's it. The block should display only the content corresponding to a certain lesson page only when that lesson page is displayed. smile
Average of ratings: -
In reply to Itamar Tzadok

Re: Using CSS in Lessons

by Gerard Libby -
I understand the basic idea of that code, create Ids for the lesson pages and have the menu divs only display according to that ID. Where would I put all that code however?
Average of ratings: -
In reply to Gerard Libby

Re: Using CSS in Lessons

by Itamar Tzadok -
Not quite. You don't need to create ids for the lesson pages.
The content of the block may look something like this:

<div id="content_for_lesson_page1">
...
</div>
<div id="content_for_lesson_page2">
...
</div>
<div id="content_for_lesson_page3">
...
</div>
<style type="text/css">
#content_for_lesson_page1{display:none;}
#content_for_lesson_page2{display:none;}
#content_for_lesson_page3{display:none;}
</style>

Then, in page 1 of the lesson you should add something like this:

<style type="text/css">
#content_for_lesson_page1{display:block;}
</style>

and in page 2

<style type="text/css">
#content_for_lesson_page2{display:block;}
</style>

etc.

smile

Average of ratings: -
In reply to Itamar Tzadok

Re: Using CSS in Lessons

by Gerard Libby -
Hmmm that doesnt seem to be working. Im supposed to just copy that into the HTML box for the block/lesson page?
Average of ratings: -
In reply to Gerard Libby

Re: Using CSS in Lessons

by Itamar Tzadok -
Yes, but you need to toggle html source (toggle in the editor). This also assumes that the editor in a lesson page does not filter out style tags. smile
Average of ratings: -
In reply to Itamar Tzadok

Re: Using CSS in Lessons

by Gerard Libby -
I think it does because it showed the lines between the style tags of the block as text. Is there a way to stop it from doing that?
Average of ratings: -
In reply to Gerard Libby

Re: Using CSS in Lessons

by Itamar Tzadok -
I don't know. I don't use lessons that much so I haven't had an opportunity to address this issue. Try posting a query in the lesson forum and one of the lesson gurus may be able to help. smile
Average of ratings: -