Hi moodle-community,
I recently finished my first project on setting up a moodle platform for an enterprise-client. I'd like to share my hacks for that 1.9.4 moodle with you.
Part I - Vertical navigation bar
If you are like me, you want to see the source code first and then read the explanations. Et voilà:
Version 1 (for pages that already use the regular layout with three big coloumns):
//Arvid Hack very first column to have navigation
// print_container_start();
echo '<!-- Navigation Column -->
<td id="navcol">
<table id="navtable"><tbody>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/a.gif" title="a: Home"/><br/>Home</a>
</td></tr>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'/course/view.php?id='.$course->id.'"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/b.gif" title="b: Current course"/><br/>Course</a>
</td></tr>
<tr><td id="navcell">
<a href="externallink1.php"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/c.gif" title="c: to contac"/><br/>Contact</a>
</td></tr>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'/imprint.php"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/d.gif" title="d: imprint"/><br/>Imprint</a>
</td></tr>
</tbody>
</td></tr>
</tbody></table>
</td>';
Version 2 (For pages without the three-columns lay-out, that's typically where no blocks can be used)
echo '<table id="layout-table"><tbody><tr>
<td id="navcol">
<table id="navtable"><tbody>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/a.gif" title="a: Home"/><br/>Home</a>
</td></tr>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'/course/view.php?id='.$course->id.'"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/b.gif" title="b: Current course"/><br/>Course</a>
</td></tr>
<tr><td id="navcell">
<a href="externallink1.php"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/c.gif" title="c: to contac"/><br/>Contact</a>
</td></tr>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'/imprint.php"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/d.gif" title="d: imprint"/><br/>Imprint</a>
</td></tr>
</tbody></table>
</td>
<td id="middle-column">';
… original source code continues before closing the table with:
echo '</tr></tbody></table>';
A high priority demand of the enterprise was to have a vertical navigation bar, that always looks the same. They consider this a) more beautiful b) more intuitive and thus user-friendly, and c) their website has a vertical navigation and consistency is important. Elements of this vertical navigation are "Home", "Course" (obviously has no meaning on the start-page, there it redirects to "Home" as well), "Contact", and "Imprint". Although the horizontal, native moodle-navigation bar is a little bit counter-intuitive (personal opinion) we kept it for several reasons.
The vertical navigation is seen on all pages except the start-page. The hacks need to be inserted it into the courseview as well as all views of all used modules (file-download, wiki, quiz, lesson):
* homepagename/moodle/course/format/topics/format.php, line 74 above /// The left column ..., Version 1 (this means, the bar will only appear if the topics-format is used in the course. If you use other or several course-formats, change the according files as well)
* homepagename/moodle/mod/lesson/viewstart.html line 13 above <!-- First Column -->, Version 1 with added php-tags, i.e. <?php "Code Version 1" ?>
* homepagename/moodle/mod/quiz/view.php line 72 above print_container_start, Version 1
* homepagename/moodle/mod/quiz/attempt.php, line 432 above // Print the quiz name heading and tabs for teacher, etc. Closing the table at new line 565 (above //Finish the page) Version 2
* homepagename/moodle/mod/wiki/view.php, line 355, adapt and insert the Version 2 code between </div> and <div id=”wiki-view” class = “mwiki”> Clsoe the table above print_footer, Version 2
* homepagename/moodle/mod/resource/type/file/resource.class.php, line 514, above if (trim($resource->summary)) { replace old code and close in new line 731 with following: if ($inpopup) {
echo "<div class=\"popupnotice\">(<a href=\"$fullurl\">$strdirectlink</a>)</div>";
echo "</div>"; // MDL-12098
//Hack Arvid Ende der Tabelle
echo '</tr></tbody></table>';
print_footer($course); // MDL-12098
} else {
print_spacer(20,20);
//Hack Arvid Ende der Tabelle
echo '</tr></tbody></table>';
print_footer($course);
That's it for now,
Arvid
Could this have been achieved easier by modifying (or creating) a theme? This way it would stick between upgrades, which will now become harder as you've modified core code.
Hi Arvid,
I agree with Paul. You might have a look at http://moodle.org/mod/forum/discuss.php?d=128160 to see how far you can come with CSS alone.
The screenshot shows another proof-of-concept for putting the side admin block fixed in the upper left corner of the screen.
CSS FAQ and Themes FAQ are good starting points for learning more about CSS and theming.
hth
Frank
I agree with Paul. You might have a look at http://moodle.org/mod/forum/discuss.php?d=128160 to see how far you can come with CSS alone.
The screenshot shows another proof-of-concept for putting the side admin block fixed in the upper left corner of the screen.
CSS FAQ and Themes FAQ are good starting points for learning more about CSS and theming.
hth
Frank
Hi,
thanks for the idea, I think I would prefer this solution for my own installation (and by what I've seen from moodle 2.0 the question won't be relevant in there). However, the given task was to replicate a vertical navigation with four specific icons in a certain position, to match the platform with an existing site.
As far as I see, it's hard to replicate that with CSS, as there need to be the four objects first, isn't it?
thanks for the idea, I think I would prefer this solution for my own installation (and by what I've seen from moodle 2.0 the question won't be relevant in there). However, the given task was to replicate a vertical navigation with four specific icons in a certain position, to match the platform with an existing site.
As far as I see, it's hard to replicate that with CSS, as there need to be the four objects first, isn't it?
If you create your own theme you can put any code you want in its header.html file for example.
Do you perhaps have a screenshot of the menu in question?
Do you perhaps have a screenshot of the menu in question?
Hi Ralf,
I think I was trying to put it into the header, but didn't find a way to have it floating on the left, with the regular course content next to it, that's why I put it into the table. I'd prefer knowing a way to put it into CSS!
As the platform is still non-public I don't want to offer a screenshot, but I made a conceptual drawing (sorry, always preferred music-lessons to drawing ;) ).
Hi,
now that I'm thinking about it, it shouldn't be that difficult to add something to the header which is left of the main content/table. I failed finding a way to make the navigation bar float left, but maybe it would be possible to make the main table float right...
Will let you know, if I successfully followed up on that. Thanks for the input so far.
now that I'm thinking about it, it shouldn't be that difficult to add something to the header which is left of the main content/table. I failed finding a way to make the navigation bar float left, but maybe it would be possible to make the main table float right...
Will let you know, if I successfully followed up on that. Thanks for the input so far.