Hi Sol,
Do you mean an icon against each course for their category in the list of courses or the actual category list?
Which version of Moodle are you using?
Cheers,
Gareth
Hi Gareth,
I'm using moodle 2.5.1+.
I need you in the course list appears in front of each icon, depending on the category to which the course belongs. That is, assign each category an icon.
I attached picture:
Thanks!!!
Regards,
Sol
Hi, It probably can be done but not easily, as this discussion explains the technique...
https://moodle.org/mod/forum/discuss.php?d=157935&parent=691903
However in 2.5 the code changed considerably since I wrote that comment.
The way you would need to write the CSS rule in Moodle 2.5 would be something like this...
}
.coursebox > .info > .name a[href="http://yoursiteURL/course/view.php?id=1"] {
background-image: url([[pix:theme|catagory1]]); }
.coursebox > .info > .name a[href="http://yoursiteURL/course/view.php?id=2"] {
background-image: url([[pix:theme|catagory2]]); }
.coursebox > .info > .name a[href="http://yoursiteURL/course/view.php?id=3"] {
background-image: url([[pix:theme|catagory3]]); }
Where you would need an image for each category in your theme's pix directory like so...
moodle/theme/yourthemename/pix/
category1.png
category2.png
category3.png
But there is no guarantee it will work, as I do not have the time to test it out at the moment.
EDIT: This works!
But hope this helps?
Cheers
Mary
@Gareth,
I would love to see if this would work using awesomefont icons!
Ooooo, that's a neat idea Mary (started to write this before moodle.org crash).
So, I've taken it one step further to get the code to output a custom tag attribute. With the code on: https://github.com/gjb2048/moodle-theme_shoelace/tree/Course_Category_Icon_M25 as a reference, in the theme file 'renderers/core_renderer.php' I have overridden the class 'core_course_renderer' and method 'coursecat_coursebox' (copy, paste and change) so that the line:
Gestión del tiempo (Category: Cursos)
Docentes (Category: Entorno profesional)
Habilidades Sociales (Category: Autoaprendizaje) $coursenamelink = html_writer::link(new moodle_url('/course/view.php', array('id' => $course->id)),
$coursename, array('class' => $course->visible ? '' : 'dimmed'));
becomes:
$coursenamelink = html_writer::link(new moodle_url('/course/view.php', array('id' => $course->id)),
$coursename, array('class' => $course->visible ? '' : 'dimmed', 'course-category' => $course->category));
and therefore you can add custom CSS to the theme:
.coursebox > .info > .name a[course-category="1"] {
background-image: url([[pix:theme|icon]]);
}
Please see the image attached.
As for Font Awesome, I'm not sure as the method 'render_pix_icon' in 'core_renderer.php' might not know the category. But hey, if you are overriding 'coursecat_coursebox', you can always put the 'i' tag there.
Cheers,
Gareth
Hi Gareth
The contribution you make is very important ... I think there are many sites that have had to make a similar change to give greater coherence to show a course ...
So I wanted to say (you have more influence than me) to suggest this change to the original 'renderer', adding the information of the category, as is done with categories:
div class="category dimmed_category loaded" data-depth="xx" data-categoryid="xx"
Something like:
div class="clearfix odd coursebox first last" data-courseid="xx" data-categoryid="xx"
What do you think?
regards
Hi Franc,
I think it is a good improvement, but to get it into core there needs to be justification in terms of the attributes being used. I doubt that the renderer change in itself will get past HQ checks.
Perhaps raise a tracker issue and ask
Cheers,
Gareth
Further to my comments which I posted earlier.
This is proof that you can add FontAwesome icons to replace a Moodle image.
This is definitely a EUREKA moment for me.
Cheers
Mary
Just needing to remind myself about this EUREKA moment as it is relevant in a post I am making in Moodle Tracker.
Sorry for the noise...
Thanks
Mary
Hola Sol
Yes, yes, it is possible and it works perfectly ...
I have developed a theme and in the new version I have incorporated an option to select five different types of display courses categories. Right now I am polishing some other things and hopefully upload it on Wednesday ...
If you have patience you will be able to download it and comment your appreciations ...
Greetings from Galicia
Hi again
Yesterday was not on my computer ... so I could not copy this code. It is to show the categories in a 'grid' format, is not exactly what you ask, but you can use it like code basis…
This option does not require code changes nor load scripts. Once applied remains as follows:
All you have to do is 2 easy steps:
1.- Add some CSS properties to give the required format:
/* Set the position on the frontpage */ #frontpage-category-names,
#frontpage-category-names .course_category_tree {
clear: both; margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
/* Create box for each category */
.course_category_tree .category {
position: relative;
float: left;
width: 180px;
height: 180px;
margin: 1px 1px 1px 1px;
padding: 0px 0px 0px 0px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #007EBA;
}
/* Adjust color for disabled categories */
.course_category_tree .category.dimmed_category {
border-color: #AAAAAA;
}
/* Adjust the position of the name */
.course_category_tree .category .info .name {
padding: 0px 0px 0px 0px;
text-align: center;}
/* Hide icon 'colapsed' because it makes no sense here */
.course_category_tree .category > .info .name {background: none;}
.dir-rtl .course_category_tree .category > .info .name {background: none;}
.course_category_tree .category.with_children > .info .name {background: none;}
.course_category_tree .category.with_children.collapsed > .info .name {background: none;}
.dir-rtl .course_category_tree .category.with_children.collapsed > .info .name {background: none;}
/* Place image in each category */
.course_category_tree .category[data-categoryid] {
background: url([[pix:theme|cat/default]]) no-repeat center bottom;
}
/* Upload the image from each category */
.course_category_tree .category[data-categoryid="1"] {background-image: url([[pix:theme|cat/1]]);}
.course_category_tree .category[data-categoryid="2"] {background-image: url([[pix:theme|cat/2]]);}
.course_category_tree .category[data-categoryid="3"] {background-image: url([[pix:theme|cat/3]]);}
.course_category_tree .category[data-categoryid="4"] {background-image: url([[pix:theme|cat/4]]);}
.course_category_tree .category[data-categoryid="5"] {background-image: url([[pix:theme|cat/5]]);}
.course_category_tree .category[data-categoryid="6"] {background-image: url([[pix:theme|cat/6]]);}
.course_category_tree .category[data-categoryid="7"] {background-image: url([[pix:theme|cat/7]]);}
.course_category_tree .category[data-categoryid="8"] {background-image: url([[pix:theme|cat/8]]);}
.course_category_tree .category[data-categoryid="9"] {background-image: url([[pix:theme|cat/9]]);}
.course_category_tree .category[data-categoryid="10"] {background-image: url([[pix:theme|cat/10]]);}
.course_category_tree .category[data-categoryid="11"] {background-image: url([[pix:theme|cat/11]]);}
.course_category_tree .category[data-categoryid="12"] {background-image: url([[pix:theme|cat/12]]);}
.course_category_tree .category[data-categoryid="13"] {background-image: url([[pix:theme|cat/13]]);}
.course_category_tree .category[data-categoryid="14"] {background-image: url([[pix:theme|cat/14]]);}
.course_category_tree .category[data-categoryid="15"] {background-image: url([[pix:theme|cat/15]]);}
.course_category_tree .category[data-categoryid="16"] {background-image: url([[pix:theme|cat/16]]);}
.course_category_tree .category[data-categoryid="17"] {background-image: url([[pix:theme|cat/17]]);}
.course_category_tree .category[data-categoryid="18"] {background-image: url([[pix:theme|cat/18]]);}
.course_category_tree .category[data-categoryid="19"] {background-image: url([[pix:theme|cat/19]]);}
.course_category_tree .category[data-categoryid="20"] {background-image: url([[pix:theme|cat/20]]);}
/* Hide subcategories in the GRID model */
.course_category_tree .category .content {display: none;}
/* Hide buttons to expand and collapse */ .jsenabled .course_category_tree .controls {display: none;}
2.- Use an existing folder or create a new one (in this example theme \ aigne \ pix \ cat) to copy the images to be used as icons/backgrounds/images. I highly recommend that the name of the image is the 'ID' of the category to easier make updates or changes.
You can also apply the option to a font of symbols (fontawesome, zurb, icomoon, etc ...) using selectors: before and: after. This option has become very popular lately and has a very nice visual effect, but does not convince me at all…
I hope this information will be useful
Greetings from Galicia
Cool!
I am loving this idea. Spent an hour tinkering with it to see if I can get fontawesome working nicely with it and am pretty happy with the response. Thinking I might build this as an option into the next Essential release.
Thanks for sharing the idea and the code.
I have attached my amended css for those who are interested. (p.s. there are some Essential settings being pulled in..just FYI)
Great!
...fontawesome this way... fontawesome over there... looks great with fontawesome tooooo...
fix two things for me are ...
1.- solve the question of the image and the category_id, not so repetitive, more... automatic, but of course, without adding code ... impossible?
2.- do the same (images/icons) with the courses ... also without adding code ... aha!
3.- how to apply an option to select the icons mode or standard mode? ... look at theme_aigne new version ... a homemade solution!!!
are two? no, three things!
It makes me wonder Julian if we need such unfriendly frontpage layouts for courses when we could just have the icons instead. Where you have the number there could just as easily be a ? for info as a pop-up
I just love those BIG icons!!!
I have updated the Essential Master branch in Github with these changes if anyone wants to have a look.
Essential is largely icon driven so keeping it this way for this theme.
But, the way I have now done this with theme settings rather than code changes means that we could also make it that users can upload images of their own desired graphics through moodle screens rather than having to use backend code/file changes to make these changes.
There must be a more elegant/streamlined way of coding this however than the way I have done so at the moment. So keen for feedback.
Julan
Hi!
I have some problems with font awesome as a course category icons. I use clean theme and making changes in custom css or renderers just does nothing. Even with samples here. Could you show me how you made it work?
Thanks in advance.