Closed TakedownDeluxe closed 1 year ago
I did find a solution to change the background image to whatever you want with this code: .fc-categorycards li:nth-of-type (X) .card-img { background-image: url()!important; background-size: 280px; } Unfortunately its not possible for me as to date to change the specific size of each categorycard.
I hope i can help others with this. Kind regards
Hi @TakedownDeluxe , thanks sharing your solution. Much appreciated.
I am assuming that you are using Moodle 4.x which has a narrow space for content, even when there is lots of space on the screen. You can override easily this using CSS to make it more like pre-4.x which used more of the available screen space. See: https://www.elearningworld.org/moodle-lms-4-0-is-it-time/#bonus-tip
As for the width of the cards, you can change these by adding some CSS to your theme's settings, something like the following CSS:
.fc-categorycards>li.card.shadow.mr-4.mb-4.ml-0 {
min-width: 160px!important;
max-width: 160px!important;
}
On a side note, you can also change the width of course cards to fit more per line with this CSS:
div.card.shadow.mr-4.mb-4.ml-1 {
min-width: 160px!important;
max-width: 160px!important;
}
Between these techniques, you should be able to fit lots of cards per line.
Hope you find this information useful.
Best regards,
Michael Milette
Prerequisites
Feature Request - The User Story
My question is to what extent it is possible to style individual course sections on the home page using the {categorycards} function. Ideally, I would be able to set a different background image for each individual course area, similar to the background for individual courses.
Furthermore, I would like to place more course areas next to each other instead of just two, depending on the device (i.e. on desktop more than on an ipad).
It is described in the Github of the plugin with the sentence "You can also optionally configure the look of {categorycards} using CSS on the .fc-categorycards class." that in principle styling is possible. Unfortunately I can't get it to work to that extent.
Thanks in advance and best regards Luke
Screenshots / Mock-ups
No response
Alterative you have considered
No response
Additional information
No response
Planning on submitting a solution in a pull request (PR)?
No
Code of Conduct