Feature Request: Customizing categorycards

[TakedownDeluxe]

Prerequisites

• [X] I am requesting the new feature to the correct repository.
• [X] I checked the latest version on GitHub and the README.md documentation to ensure that this functionality does not already exist.
• [X] I searched to make sure that this feature has not already been requested.
• [X] I have, or I know someone who has, the ability and willingness to test the new feature on a Moodle LMS-based site.
• [X] I agree to submit one feature request per issue ticket (do not submit multiple requests in one issue ticket).
• [X] I understand that development and support is provided by volunteer(s) and that all final implementation decisions are up TNG Consulting Inc.

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

• [X] I have read and agree to the project's code of conduct.

[TakedownDeluxe]

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

[michael-milette]

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