Change Layout of Courses in Grid View

[IBSP]

Hello, Currently, My courses in All-Courses page are showing like this https://prnt.sc/qeswrq in grid mode. I want to change this view and want something like https://prnt.sc/qesyqg  

[IBSP]

Also, is it possible when user click on gridview the courses count increases to double, For example, if there are only 30 courses are showing in the list view, When user click on Grid view the count increase to 40 or 50? How can I do this?  

[Veronica]

hi, it can be look something like that:http://prntscr.com/qf14df and for that you can use this code in your custom css: #buddypress ul.item-list.grid li .item{ border:none !important; } div#course-dir-list ul.item-list.grid li.course_single_item{ max-width:300px; } div#course-dir-list ul.item-list.grid li.course_single_item .row .item { height:200px !important; } #buddypress ul.item-list.grid li .item .item-title{ margin-bottom:30px; } div#course-dir-list ul.item-list.grid li.course_single_item .row .item-avatar img{ max-width:300px; border-radius:10px !important; } #buddypress ul.item-list.grid li .item .item-credits{ background:#78bc9a; border-radius:10px; margin-top:20px; }

[IBSP]

Thanks @veronica, I'll try this

[Veronica]

yes please, let me know the results after you complete this for the confirmation of closing the topic.

[Author]

Posts