Add icons in TOC

Re: Add icons in TOC

by AL Rachels -
Number of replies: 2
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi René,

Sorry, I didn't make that clear enough. You also have to tell the Atto editor where you want the Generico toolbutton to appear.

Go to Site administration > Plugins > Test editor > Atto HTML editor > Atto toolbar settings. Scroll down to the box for Toolbar config. Add generico to one of the lists like in the included picture.



Since I have multiple items from Justin Hunt, I started my own group of tools, like in the following picture, and also placed Daniel Thies Preview tool there.


In reply to AL Rachels

Re: Add icons in TOC

by René Paniagua -

Hi Al!!

Sorry for my delay on the replay, but I did that you show me in your message and the "G" appears on Atto Html editor, anyway I couldn't add font awesome with Generico code, I don't know why, only show me the Generico Code with the { }, in any case I found a solution that maybe help some people, for that I will share here. Very very thanks for your replies Al.

I modified locallib.php from book folder (mod/book/locallib.php)

// Normal students view

        $toc .= html_writer::start_tag('ul');

        foreach ($chapters as $ch) {

            $title = trim(format_string($ch->title, true, array('context'=>$context)));

            $titleunescaped = trim(format_string($ch->title, true, array('context' => $context, 'escape' => false)));

            if (!$ch->hidden) {

                if (!$ch->subchapter) {

                    $nch++;

                    $ns = 0;


                    if ($first) {

                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));

                    } else {

                        $toc .= html_writer::end_tag('ul');

                        $toc .= html_writer::end_tag('li');

                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));

                   }


                    if ($book->numbering == BOOK_NUM_NUMBERS) {

                          $title = "$nch $title";

                    }

                } else {

                    $ns++;


                    if ($first) {

                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));

                        $toc .= html_writer::start_tag('ul');

                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));

                    } else {

                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));

                    }


                    if ($book->numbering == BOOK_NUM_NUMBERS) {

                          $title = "$nch.$ns $title";

                    }

                }

                if ($ch->id == $chapter->id) {

/*add a two divs (box 1 and box2), one with the font awesome and one with table of contents*/

$toc .= html_writer::start_tag('div', array('class' => 'box1'));

/*the first font awesome have the class title_toc and it's the same class as the titles of the table of contents*/

             $toc .= '<i class="fa fa-file-text-o fa-2x title_toc" aria-hidden="true"></i> ';           

$toc .= html_writer::end_tag('div', array('class' => 'box1'));

$toc .= html_writer::start_tag('div', array('class' => 'box2'));

/*in the line below I add the same class to the titles as font awesome*/

                    $toc .= html_writer::tag('strong', $title, array('class' => 'title_toc'));

$toc .= html_writer::end_tag('div', array('class' => 'box2'));

/*all previous was for the active titles for the table of contents*/

                } else {

/*this is for the non active titles on the table of contents*/

$toc .= html_writer::start_tag('div', array('class' => 'box1'));

/*for that I add another class for font awesome title_no*/

             $toc .= '<i class="fa fa-file-text-o fa-2x title_no" aria-hidden="true"></i> ';           

$toc .= html_writer::end_tag('div', array('class' => 'box1'));

$toc .= html_writer::start_tag('div', array('class' => 'box2'));


                    $toc .= html_writer::link(new moodle_url('view.php',

                                              array('id' => $cm->id, 'chapterid' => $ch->id)),

                                              $title, array('title' => s($titleunescaped)));

$toc .= html_writer::end_tag('div', array('class' => 'box2'));

                }

With all this changes, you can add some CSS on the Custom CSS section of the theme and the result is: (if you have a doubt I can show you when applied the CSS)



I think is a more flexibility way to customize the table of contents

In reply to René Paniagua

Re: Add icons in TOC

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi René,

"anyway I couldn't add font awesome with Generico code, I don't know why, only show me the Generico Code with the { }"

This problem is due to not setting the Generico filter to work for both Content and Headings.

To fix it and make the Generico method work, go to Site administration > Plugins > Filters > Manage filters. Once there, look in the, Apply to, column for Generico and set the drop down to, Content and headings.

Using Generico is preferred to changing the code like you did because your changes will get wiped out when you upgrade Moodle. Using the Generico filter, your icons will still be there after each and every Moodle upgrade.

Average of ratings: Useful (1)