Hi all,
I apologize if this has been discussed before. Then I kindly ask you to direct me to the discussion thread.
In the lesson module (using Moodle 1.9.9) I would like to style the unordered list. Before I save the lesson page, I can see the pushpin (see attachment). After I have saved the lesson, the pushpin is no longer displayed.
Code that I used:
<style type="text/css">
ul { list-style-image: url('. . ./pushpin.gif') }
</style>
Any advice is very appreciated.
With kind regards,
Hartmut
Hartmut,
I have no idea which "unordered list" you are talking about. Please provide a complete screenshot.
Joseph
Hi Joseph,
Thanks for your fast response. Sorry for not giving you enough details. I am using Moodle 1.9.9. In the lesson module I tried to style the bullets (<ul>), previously called unordered list, with a pushpin image. In edit page mode I can see the pushpin. The code is:
<span style="color: red;"><strong>Why do missionaries return prematurely?</strong></span>
<p></p>
<style type="text/css"> ul { list-style-image: url('http://www.. . ./pushpin.gif') }
</style>
<ul>
<li>Anyone or a combination of the following reasons may lead to a premature return:</li>
</ul>
<ol>
<li> health</li>
<li>can't get along with fellow missionaries</li>
<li>can't get along with nationals</li>
<li>motivation for going was not correct</li>
<li>not called from God</li>
</ol>
It looks like this:
As soon as I save the page, the pushpin disappears. This is what I see after saving:
With kind regards,
Hartmut
Has anybody an idea why the CSS style is somehow suppressed from being executed in the lesson module, using Moodle 1.9.9?
With kind regards,
Hartmut
It really should not matter which activity you are using - in HTML the style element <STYLE> always goes inside the HEAD section and now you are using it inside body tags.
You can for example define different custom style classes to your custom theme css files - something like
ul .redpin {...}
ul .bluepin {...}
or
li .redpin {...}
li .bluepin {...}
and use those classes in your course with <ul class="redpin">...</ul> or <li class="redpin">...</li>
or you could try style inside the elements with <ul style="...."> or <li style="..." - in moodle 2 some filter seems to change image paths to links in code like ...<element style="background: url('http://somesite.com/someimage.gif') no-repeat;some morecss;">...</element> but in moodle 1.9.9 you should be able to use most css attributes inside style without problems.
Hi Mauno,
Thank you for your extensive explanation. I posted my observation in the lesson module, because I observed the behavior in a lesson. If you or the moderators think, this should be posted in a different forum, I kindly ask you to move this discussion to the appropriate place.
In test lesson, using Moodle 1.9.9, I tried to follow your instruction and added the code below:
<style type="text/css">
ul { list-style-image: url("http://www..../pushpin.gif") }
</style>
<ul>
<li>Feed the fish</li>
<li>Check email</li>
<li>Clean the floor</li>
<li>Wash the clothes</li>
</ul>
This is what I see after I toggle to HTML:
After I have saved the page, I see this:
When I select "Edit page" again and toggle to plain text, I see this code:
<style type="text/css">ul { list-style-image: url(&quot;http://www....../pushpin.gif&quot;) }</style>
<ul>
<li>Feed the fish</li>
<li>Check email</li>
<li>Clean the floor</li>
<li>Wash the clothes</li>
</ul>
I am still puzzled that the pushpins are no longer visible after saving the page. I appreciate any advice about styling lists in Moodle 1.9.9.
With kind regards,
Hartmut
I tried to explain that you should not use
<style type="text/css">ul { list-style-image: url('http://www....../pushpin.gif') }</style>
inside body tags - theme css overrides that code.
You could try first setting style INSIDE the element itself like this:
<ul style="list-style-image: url(http://moodle.org/theme/image.php?theme=moodleofficial&image=help&rev=252);">
<li>Feed the fish</li>
<li>Check email</li>
<li>Clean the floor</li>
<li>Wash the clothes</li>
</ul>
or if that does not work (in moodle 2 external image paths can be automatically changed to links) add to your theme css file new classes to the bottom - for example
ul .pin {list-style-image: url(http://moodle.org/theme/image.php?theme=moodleofficial&image=help&rev=252);}
and use code like
<ul class="pin">
<li>Feed the fish</li>
<li>Check email</li>
<li>Clean the floor</li>
<li>Wash the clothes</li>
</ul>
Then your theme gets the css for that class only.
My 1.9 test moodle shows the previous example with help icons as pins like this:
Ah - one correction, sorry:
A proper way to add list-style might be to add to theme css files something like this:
.pin li {list-style-image: url(http://moodle.org/theme/image.php?theme=moodleofficial&image=help&rev=252);}
which adds list style to li elements that are inside element class .pin
This works ok also in moodle 2 even if link filters were enabled with code like
<ul class="pin">
<li>Feed the fish</li>
<li>Check email</li>
<li>Clean the floor</li>
<li>Wash the clothes</li>
</ul>
Hi Mauno,
Thanks for both answers and your patience with me. Adding the style in the theme css worked out fine. I highly appreciate your help.
With kind regards,
Hartmut