Adding an Icon to Topics (section names)

Adding an Icon to Topics (section names)

by Ashutosh Bhardwaj -
Number of replies: 11

I am using Topics format , essential theme on moodle 2.8.


I would like to edit course page such that i can show icon before each section name (topic name).


I looked into format.php but i cannot find from where the html is generated. My guess is if I am able to echo an additional div with a custom classname just before the <h3 class="sectionname"> I can use that class to show my icon Image with css.


Alternatively if it is possible to have thumbnail option for each section name while editing section (topic) , it will be great as an image then can be choosen for each topic name to be displayed as the icon on the left side of the name.


Need guidance as where to edit or which file to customize so as to achieve this.


 

Attachment icon before section name.png
Average of ratings: -
In reply to Ashutosh Bhardwaj

Re: Adding an Icon to Topics (section names)

by Usman Asar -
Picture of Plugin developers Picture of Testers

Asho, seems like you are using Essential theme, you can use Font Awesome Plug-in filter on top of that, and here is what you have to do

go to Administration > Site Administration > Appearence > HTML Settings

you'll find option "Remove HTML tags from all activity names" and by default its checked. Uncheck it and you can use HTML image holders before section title, use FontAwesome as well

If you have FontAwesome icon filter installed as well, then there is additional step you have to take, go to Plugins > Filters > Manage Filters

and where FontAwesome icon filter is mentioned, choose Apply to "Content & headings", after that you can simply use FontAwesome icon filter as well to show fontawesome icons, or like i mentioned before, use HTML to show image in titles.

Average of ratings: Useful (1)
In reply to Usman Asar

Re: Adding an Icon to Topics (section names)

by Ashutosh Bhardwaj -
Hi Thanks, But when i use html tags in section name box etc, they are stripped off sad
Average of ratings: -
In reply to Ashutosh Bhardwaj

Re: Adding an Icon to Topics (section names)

by Usman Asar -
Picture of Plugin developers Picture of Testers

try using both HTML4 and HTML5 compliant code and see if it works, as I remember using it, but since FontAwesome came, I am making heavy use of that in headings.

Average of ratings: -
In reply to Usman Asar

Re: Adding an Icon to Topics (section names)

by Esther van der Stappen -

I'm also having trouble getting html code to work in section names. I want to add an icon at the start of every section name, in order to have visual recognition for students of what to expect when the topics are collapsed (I'm using Collapsed Topics course format).

I'm running Moodle 2.8.2, have installed FontAwesome filter, have unchecked the 'Remove HTML tags from all activity names' in System Administration > Appearance > HTML Settings, but if I add an img-tag, it gets removed and substituted by the default section name.

The tag I use is "<img src="image.png" alt="Alt Text" width="XX" height="YY">, it should be HTML4 & 5 safe.

Any further suggestions, anyone..?

Average of ratings: -
In reply to Esther van der Stappen

Re: Adding an Icon to Topics (section names)

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

"activity names" are not the same thing as "section names" (as in "Remove HTML tags from all activity names") which are coded in core for all formats as 'text' -> https://github.com/moodle/moodle/blob/master/course/editsection_form.php#L33 - thus cannot take HTML.  Therefore you can either adapt your Moodle installation or find / create a tracker issue to have this implemented in the next version of Moodle (currently 3.0) if its approved and somebody writes the code.

Average of ratings: -
In reply to Esther van der Stappen

Re: Adding an Icon to Topics (section names)

by Soizic POILVE -

Dear Esther,


I have same issue as I want to add picture to a Section name ... As a neophyte in the HTML coding...I don't know how to input your "<img src="image.png" alt="Alt Text" width="XX" height="YY">" and especially in which core file in my Moodle server....

Should you have any useful tip or instruction. Thank you

Average of ratings: -
In reply to Esther van der Stappen

Re: Adding an Icon to Topics (section names)

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

If you have the font awesome filter, try just using [fa-book] Section Title - worked for me.  I am on 3.0 with Adaptable theme.

FYI -  I did have some issues in other areas with font awesome with TinyMCE being the text editor but switching to Atto seemed to resolve that.

Average of ratings: -
In reply to Ashutosh Bhardwaj

Re: Adding an Icon to Topics (section names)

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I did this with the Pioneer theme and you can use any fontawesome icon.  Just put in the code in the admin page.  

Here is a hint to help you - Use the :before CSS function.  

Here is how I did it in the Pioneer theme:

h3.sectionname:before {

  font-family: FontAwesome;

  content: "\f02d";  

  color: #000;  

}

Pioneer allows you to change the font from the theme admin pages.

\f02d this is the unicode from fontawesome which is a book.  

Unfortunately I haven't figured out how to allow each topic to have it's own icon for each course.  Not sure where or how you'd store that data.  But at a sitewide level my solution works quite well.  All topics get the same icon which just helps set a visual cue for the learner.  The icon and other things like not being afraid to put space between topics and enclose them in a box are all little visual cues that help the learner.

Attachment section icon.png
Average of ratings: -
In reply to Chris Kenniburg

Re: Adding an Icon to Topics (section names)

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

If all of your courses followed the same pattern or layout for Topics you could drill down the CSS and add unique icons for each topic throughout the site by finding the unique identifier for each Topic.  

Then use the css I provided to make All topic 1 a book icon,  All topic 2 an assignment icon, All topic 3 a lesson icon.  This would be sitewide and would need to use fontawesome.  

Average of ratings: -
In reply to Chris Kenniburg

Re: Adding an Icon to Topics (section names)

by Soizic POILVE -

Thank you very much. Back end things such this is very new to me but I"ll test it asap to let you know.

It seems quite nice! Thanks a lot!

Average of ratings: -
In reply to Ashutosh Bhardwaj

Re: Adding an Icon to Topics (section names)

by steve anderson -

May not be the best fix but worked for me.  I unchecked the use default section name then just used a single space in the section name.  Then I could put simple HTML in the summary or image and it appears rather than the section name.


Looks right for me.

Average of ratings: -