Tip: Main Courses Block - Formatting Category names

A user query directed our attention to formatting Category names in the main Courses block. Specifically, the user wanted to change the font-size, link color and add a horizontal line under each category name. Like this:

Here's a quick CSS solution:

1. To change font color and size -

First locate the file styles_fonts.css in your theme's folder

Next locate this group in this file

.categorybox .category,
.categorybox .category {
font-size:1.2em;
font-weight:bold;
}

You can control font size by changing the value of font-size: ..

Next add these tags below the above group

.categorybox .category a:link {
color: #006666;
}

.categorybox .category a:visited {
color: #006666;
}

.categorybox .category a:hover {
color: #666666;
}

Control font colors by changing the color: values

2. Add the horizontal line like this -

locate the file styles_layout.css in your theme's folder

Next, locate this group in this file

.categoryboxcontent,
.courseboxcontent {
border-width:1px;
border-style:solid;
}

Below this group add this

.categorybox.category {
border-bottom: 1px solid #666666;
}

Control the horz line height and color by changing the border-bottom: px value and the color value which here is #666666

To Top

Tip: Course View - Increasing font size of Links

Would you like to increase the font size of Links in your main Course View blocks? Here's how. Thanks to Michael Kowalczyk for directing my attention to this aspect!

First, find this tag - #course-view .section - in the theme's styles_fonts.css file. If it is not there add it. The 'font-size' attribute below will increase or decrease the font-size of the links only. You may also add a:visited and a:hover attributes to have a completely new links scheme for this block.
Note: change the font-size to what you think is right..18px below is just a random value.

#course-view .section a:link{
font-size:18px;
line-height: normal;}

To Top

Tip: Course View - Line Height congestion

When using our themes you'll face a problem of line-height 'congestion' when you use big fonts in the Rich-text Editor. Text lines tend to wrap or 'stick' together. To correct this do the following:

1. In the theme's folder, look for and open the file styles_fonts.css.

2. Find this css entry - #course-view .section. You'll see something like this

#course-view .section {
font-size:0.95em;
line-height:1.2em;
}

3. Now change the line-height to normal, like this:

#course-view .section {
font-size:0.95em;
line-height:normal;
}

That's it. Now the text lines won't look congested. And you can safely use big fonts.

Note: Somehow the font-size entry here doesn't have any effect. So you could safely 'switch' it off, like this:

#course-view .section {
/*font-size:0.95em; */
line-height:normal;
}

By switching off font-size, the text in the topic and weekly format boxes should take on the default font-size we have given in most themes: 12px.

Use the comment tags shown, the star and the slash at both ends of a specific css entry, to switch off css entries...it's bad practise to remove entries, you could need them later!

To Top

Tip: Course-specific Themes - no sideblock images

Having problems with Course-specific Themes in Moodle 1.5x ..like missing headers and images? Follow the tip shown below in the forum post screenshot. Better still, see the focused discussion at http://moodle.org/mod/forum/discuss.php?d=25113#118536. Thanks to Jorge L. Melendez for searching the forums and finding the solution. Hope it works for you.

To Top