Course description squashed up to the right

Course description squashed up to the right

by Coral Milburn-Curtis -
Number of replies: 22

Inside a category, when a user looks for the course descriptions, the name/link of the course is on the left, with the details of the course creator and all of the course description is squashed over to the right. This means that a detailed course description goes way down the page! Please could someone tell me how to make the course description spread across the whole page? I have tried SO hard to find the answer!

Thanks,

Coral

Average of ratings: -
In reply to Coral Milburn-Curtis

Re: Course description squashed up to the right

by Mauno Korpelainen -

If you need more space for course descriptions you could edit standard theme styles_layout.css (or your custom theme css files) and change or add for example the following tags (75% for summary, 20% for info=name of course - leave some space for margins and paddings 5%:

.coursebox .summary {
  float: right;
  text-align:left;
  width: 75%;
  padding:5px;
}

.coursebox .info {
  float: left;
  text-align:left;
  width: 20%;
  padding:5px;
}

You could also move all blocks from right to left Left or from left to right Right  (press turn editing on first)

In reply to Mauno Korpelainen

Re: Course description squashed up to the right

by Mauno Korpelainen -

... and if this is not enough you could press Delete to delete all but Site Administration block from front page (you can get them back if needed from Blocks block on the right when you have pressed Turn editing on...)

You could also make font size smaller in summary css tags...or font size of text of Course Description itself

In reply to Mauno Korpelainen

Re: Course description squashed up to the right

by Coral Milburn-Curtis -

Where would I find the:

'standard theme styles_layout.css (or your custom theme css files)'

Thanks,

Coral

In reply to Coral Milburn-Curtis

Re: Course description squashed up to the right

by Mauno Korpelainen -

You need to have access to folder theme on your server and inside theme folder you should find css file yourmoodle/theme/standard/styles_layout.css that can be edited with simple text editors like notepad. Other themes are inside theme folder too...

Can you upload files (with ftp) to your server?

In reply to Mauno Korpelainen

Re: Course description squashed up to the right

by Coral Milburn-Curtis -

Thank you for your reply. As an administrator - is it something I can do, or do I have to be a developer? Sorry for being so thick.

Thanks

Coral

In reply to Coral Milburn-Curtis

Re: Course description squashed up to the right

by Mauno Korpelainen -

If editing theme css files sounds difficult moving/deleting blocks from front page should be easy - just turn editing on and test.

You don't need to be developer to edit those files - http://docs.moodle.org/en/Theme and http://docs.moodle.org/en/Theme_basics

In reply to Mauno Korpelainen

Re: Course description squashed up to the right

by Coral Milburn-Curtis -

Just one more try - this is the page I am having problems with - is this what you are referring to when you say that I should delete blocks because I can't see which blocks to delete? I'll give up if I still don't understand after this, I promise!

The page is this one:

http://educademy.moodle.overnetdata.com/course/category.php?id=61

Best wishes

Coral

In reply to Coral Milburn-Curtis

Re: Course description squashed up to the right

by Mauno Korpelainen -

Thanks for the link. Your site is using a theme iggy and the only way you can change that page is css - moving blocks would help only if your site front page had courses by default.

So you should edit theme/iggy/styles_layout.css ... to change width of summary and info tags. mixed

And it does not help a lot because there are so many rows of text (lists). Combo list (front page settings) would show only info in the place of course description but that's another story...

OnMouseOver popups would be handy in cases like this but moodle does not have them by default. Something like in http://www.walterzorn.com/tooltip/tooltip_e.htm

to make descriptions shorter.

In reply to Mauno Korpelainen

Re: Course description squashed up to the right

by Coral Milburn-Curtis -

This is really helpful, because at least I know where to concentrate. For weeks I have been searching, thinking that I'd set something up wrongly. You've been very helpful - thanks.

Coral

In reply to Coral Milburn-Curtis

Re: Course description squashed up to the right

by Mauno Korpelainen -
One easy solution could of course be that you create separate course description pages (html pages or resources) and just add a link to those files or resources. Or create glossary entries for course descriptions (like those tooltips) and moodle can make automatic links to those glossary pages. There's really nothing wrong in your settings - and the site looks nice. smile
Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: Course description squashed up to the right

by Coral Milburn-Curtis -
That's the one - the easy solution - I can do that!
Thank you so much for your help.
Best wishes
Coral
In reply to Coral Milburn-Curtis

Re: Course description squashed up to the right

by Jeff Forssell -
I went to take a look. If I click on the "click here" links I get to a login page. If I chose guest I don't get anywhere. I think you want guests to see the content or...? If that's the case it won't work for them (though it looks OK for you when you're logged in). You could put those pages completely outside Moodle (or maybe in a special guest accessible course) so the links will work for them.

He mentioned walterzorn popups. They look just like OverLib popups which are used by Moodle for displaying feedback in the CLOZE questions. I don't know if they are usable everywhere in Moodle or if they have to be specified somehow. The other question is that you must be given trusted code status by an admin so javascript you enter won't be filtered away! some mention in the Moodle.Docs


In reply to Jeff Forssell

Re: Course description squashed up to the right

by Mariam Iman -
Hello!

I have tried to change it, nothing works! I am using the theme "knowledge library" and I know, the class "summary" is the one which is for the course description. I tried to change width but nothing happens... Is there any other css file which should be changed?

Thanks very much for suggestions to solve the problem...
In reply to Mariam Iman

Re: Course description squashed up to the right

by Frank Ralf -
Hi Mariam,

Could you perhaps post a screenshot or a URL to the live site?

Frank
In reply to Frank Ralf

Re: Course description squashed up to the right

by Mariam Iman -
Thanks, yes of course, here is one course description:

http://amatulwaahid.cwsurf.de/course/category.php?id=2

If I login, there are course descriptions showing on the main page also, they have the same problem. The css file of the theme says following:

/***
*** Course
***/

#site-index .headingblock {
border:0 none
}
#course-view .headingblock {
margin-left:1em;
padding-left:0.7em;
border:0 none;
border-left:1.2em solid
}
#course-view .topics {
margin:0 0.5em 0 1em
}
#course-view .section .left {
width:0.8em
}
#course-view .section .right {
width:30px
}
#course-view .section .left a {
display:none
}
#course-view .section .spacer {
height:2em
}
#course-view .section .activity .spacer {
height:12px
}
#course-view .section .content .section {
margin-top:0;
margin-left:0.7em
}
#course-view .section .content .section .activity {
padding:0.3em 0.2em 0.2em;
border-bottom:1px solid
}
.course .section .content .summary {
margin:0 0 0 0.7em
}
#course-view .section .content .section .label img {
margin-right:1em;
margin-bottom:1em
}
#course-user #content,
#mod-forum-user #content {
padding-bottom:0.2em
}
.coursebox{
border: 1px solid #826B7D;
}

I don´t know what to change her, i tried many different settings for the class summary...

thank you very much
In reply to Mariam Iman

Re: Course description squashed up to the right

by Frank Ralf -
Thanks,

I will have a closer look ASAP. In the meanwhile you could use Firebug or Webdeveloper toolbar for trying to find out what's going on.

I suppose it has something to do with positioning of the div elements.

hth
Frank
In reply to Frank Ralf

Re: Course description squashed up to the right

by Frank Ralf -
Hi Mariam,

The summary is positioned using the CSS property float: right;.

You can either deactivate that (see screenshot) which will move the summary flush to the left, or give the summary a minimal width (e.g. min-width: 600px;) which makes the summary extending that width from the right margin.

hth
Frank
Attachment Summary_float_left.png
In reply to Frank Ralf

Re: Course description squashed up to the right

by Mariam Iman -
First of all, very much thanks for your help

Firebug is really great, I am going to learn how to use it, thanks for your tip!

There is finally the right setting for the summary box, but I can´t find the right css file! I have tried to search many times the entire directory, but I just cant find it. The firebug says that this is found in styles.php but this file seems to include many css files...

I searched the whole moodle directory for this width:48%;, but notepad++ found nothing. What am I doing wrong? (seach setting was for entire directory, files *.* and with hidden files....)

Thank you some much and sorry for the late answer....
In reply to Mariam Iman

Re: Course description squashed up to the right

by Frank Ralf -
Hi Mariam,

styles.php only collects all separate CSS files before sending the CSS to the browser. Unfortunately, this "feature" of Moodle renders the line numbers given by Firebug useless (which really is a shame). See Moodle CSS file structure for a discussion on this everlasting topic...

And some themes have a parent theme from which they inherit certain settings. That makes it even more difficult to locate them.

The setting you are looking for is in the Standard theme's styles_layout.css line 2021 ff. (I only searched for 48%, which took care of additional whitespace your search string might have missed.)

Please have a look at Where shall I put my custom CSS code? for the recommended way to change CSS. You might also have to use !important to override some settings.

hth
Frank
In reply to Frank Ralf

Re: Course description squashed up to the right

by Mariam Iman -
Thank you very much for your help!

Finally, it works!

Thanks for the links too!!!

*happy*
In reply to Jeff Forssell

Re: Course description squashed up to the right

by Jim Baur -
Hi Jeff,
I find the javascript gets filtered out of a course web site if I view before saving. If I save without viewing in editing mode it works OK. This doesn't work with all html. I don't know why and can't find a solution.

Also, I have the AJAX enable checked and the bottom box blank. If I change these it strips my script and I have to redo a cut and paste from my original html files.