Adding Images and advanced HTML to Course Summary

Adding Images and advanced HTML to Course Summary

by Jeffrey Kirkman -
Number of replies: 4
I am setting up my classes and just started with Moodle.. on the main Moodle page in the middle are what appear to be course summaries and they have clickable images them. Can this be done for course summaries? From what I see there is limited HTML: code allowed. How can one dress these summaries up to make the opening page and the course offerings more interesting? Thanks-- Jeffrey (http://www.iclassroom.us)
Average of ratings: -
In reply to Jeffrey Kirkman

Re: Adding Images and advanced HTML to Course Summary

by Mauno Korpelainen -

You may use css to create some effects and use html editor to add the rest. HTML editor (or some lib file of moodle itself) really cuts tags not only from summary but from many other places of moodle.

Test the following code (paste it to the end of some of your theme css files for example with notepad):

.coursebox .info {
  width: 30%;
min-height: 180px;
background-image:url();
background-position:bottom right;
background-repeat:no-repeat;
}
.coursebox .summary {
  width: 60%;
min-height: 180px;
background: #FFFFC0;
}

If you look at source code of your moodle there is for example

<div class="coursebox"> and inside it
<div class="info"> and <div class="summary">

You may give different css for these or paste styles, ids or classes for div tags in editor too. Try for example to paste (press first < > in editor )

<div class="navbar" style="line-height: 2em; text-align: center">Welcome!</div>
<p>Within this course you can explore the various Moodle features available.</p>

In reply to Mauno Korpelainen

Re: Adding Images and advanced HTML to Course Summary

by Jeffrey Kirkman -
Thanks Mauno. I will follow your instructions I take it from your informative reply that I cannot just put in more complex HTML code in the Course Summary boxes? I was not precise in my orgiinal posting as I was referring to the main page of www.moodle.org and the content in the middle of that page with the clickable graduation cap and group piciture for example. Can that that be done with HTML code in the Course Summary boxes?
In reply to Jeffrey Kirkman

Re: Adding Images and advanced HTML to Course Summary

by Mauno Korpelainen -

Both html and css are possible. Just read the source code and test:

<a title="Click here to see a demo" href="/course/view.php?id=34"><img style="float:right;" src="/theme/moodleorange/hat.gif" alt="See demo"  height="100" width="107" /></a>

See demo
In reply to Mauno Korpelainen

Re: Adding Images and advanced HTML to Course Summary

by Jeffrey Kirkman -
You are TOO quick and TOO helpful! THANKS A MILLION! I am testin it now and will get it and send a link in case you care to see! Many thanks!