Tutor LMS

Archive & Course List

In this documentation, we’ll explain two important elements of Tutor LMS Oxygen Builder integration which are Archive Courses and Courses List.

Archive Courses

Design a course archive page

The “Archive Course” section of Oxygen Builder for Tutor LMS allows you to create a template for an archive page that displays a grid of all the courses on your website.

Course Filter

The Course Filter section of Oxygen builder for Tutor LMS allows you to customize the appearance of the course filter that appears on your course archive pages. 

Filter Widget Title: In this section, You can use the Oxygen Builder text field editor to change the typography, size, and color of the title.

Filter Items:  This section allows you to customize the filter items that appear in the Course Filter.  You can use the Oxygen Builder text field editor to change the typography, size, and color of the filter items.

Course Grid

The “Course Grid” section in Oxygen builder for Tutor LMS provides a variety of customization options for the appearance of courses displayed in a grid format. Here is a brief explanation of the options:

  • Wishlist Icon: This setting allows you to customize the appearance of the wishlist icon, including font size, font color, hover font color, hover background, and hover border color.
  • Course Ratings: This setting allows you to choose the size and color of the stars used for the rating system.
  • Average rating: This setting lets you select the color and typography of the average rating text.
  • Total Ratings: This setting lets you select the color and typography of the total rating text.
  • Course Title: This setting provides options to change the typography of the course title.
  • Meta Icon: This setting lets you select the color and typography of the course meta information.
  • Meta Info: This setting lets you select the color and typography of the meta information of the course, such as course duration, difficulty, and category.
  • Author Label: This setting lets you change the typography of the author label.
  • Author Value: This setting lets you change the typography of the author value.
  • Course Price: This setting allows you to change the typography of the course price.
  • Add to Cart: This setting provides options to change the appearance of the Add to Cart button with the option to add paddings and alter color options.
  • Border: This setting lets you customize the border of the course grid, including border color, width, style, and radius.
  • Hover Border: This setting lets you customize the border of the course grid when hovering, including border color, width, style, and radius.
  • Box Shadow: This setting allows you to add a box shadow to the course grid and customize its color, position, blur, and spread.
  • Hover Box Shadow: This setting lets you add a box shadow to the course grid when hovering and customize its color, position, blur, and spread.
  • Spacing: This setting lets you add padding and margin around the courses in the grid.

Pagination

The “Pagination” section of Oxygen builder for Tutor LMS allows you to customize the appearance of the pagination section in the course grid. Here’s a brief explanation of each of the settings:

  • Links Text Color: This setting allows you to choose the color of the pagination link text when it is in its default state.
  • Hover Text Color: This setting allows you to choose the color of the pagination link text when the mouse pointer hovers over it.
  • Active Text Color: This setting allows you to choose the color of the pagination link text when it represents the current active page.

Border

  • Currently Editing Border: This option lets you choose which border you want to edit.
  • Border Color: This option allows you to select the color of the border.
  • Border Width: This option lets you set the width of the border of the pagination buttons.
  • Border Style: This option lets you choose a style for the border, such as solid, dashed, or dotted.
  • Border Radius: This option lets you set the radius of the border corners. You can also edit individual radii to create a more customized effect.

Hover Border

  • Currently Editing Border: This option lets you choose which border you want to edit when the mouse hovers over the pagination buttons.
  • Border Color: This option lets you select the color of the border when the mouse hovers over the pagination buttons.
  • Border Width: This option lets you set the width of the border when the mouse hovers over the pagination buttons.
  • Border Style: This option lets you choose a style for the border when the mouse hovers over the pagination buttons.
  • Border Radius: This option lets you set the radius of the border corners when the mouse hovers over the pagination buttons. You can also edit individual radii to create a more customized effect.

Hover Box Shadow

  • Box Shadow: This option allows you to toggle between inset and outset shadow when the mouse hovers over the pagination buttons.
  • Shadow Color: This option lets you choose the color of the shadow when the mouse hovers over the pagination buttons.
  • Shadow Horizontal Offset: This option allows you to set the horizontal position of the shadow when the mouse hovers over the pagination buttons.
  • Shadow Vertical Offset: This option allows you to set the vertical position of the shadow when the mouse hovers over the pagination buttons.
  • Shadow Blur: This option lets you set the intensity of the shadow blur effect when the mouse hovers over the pagination buttons.
  • Shadow Spread: This option lets you set how far the shadow spreads when the mouse hovers over the pagination buttons.

Spacing:

Pick a margin and padding around the filter bar.

Course List

Design a course list section

Course Query

The “Course Query” editor under the Course List section in Oxygen Builder for Tutor LMS provides several options to customize the course list display on a website. The following are the available options:

  • Included ID: This field allows you to include specific course IDs in the list. You can enter the course IDs separated by commas.
  • Excluded IDS: This field allows you to exclude specific course IDs from the list. You can enter the course IDs separated by commas.
  • Category IDS: This field allows you to include specific category IDs in the list. You can enter the category IDs separated by commas.
  • Order By: This option lets you choose how the course list should be ordered. You can order by date, title, rand, menu order, date, or post-in.
  • Order: This option allows you to choose the order of the course list display. You can order in ascending or descending order.
  • Limit: This option allows you to limit the number of courses displayed in the list. You can set the limit to any number of your choice.

Course Filter

The Course Filter section of Oxygen builder for Tutor LMS allows you to customize the appearance of the course filter that appears on your course archive pages. 

Filter Widget Title: In this section, You can use the Oxygen Builder text field editor to change the typography, size, and color of the title.

Filter Items:  This section allows you to customize the filter items that appear in the Course Filter.  You can use the Oxygen Builder text field editor to change the typography, size, and color of the filter items.

Course Grid

The “Course Grid” section in Oxygen builder for Tutor LMS provides a variety of customization options for the appearance of courses displayed in a grid format. Here is a brief explanation of the options:

  • Wishlist Icon: This setting allows you to customize the appearance of the wishlist icon, including font size, font color, hover font color, hover background, and hover border color.
  • Course Ratings: This setting allows you to choose the size and color of the stars used for the rating system.
  • Average rating: This setting lets you select the color and typography of the average rating text.
  • Total Ratings: This setting lets you select the color and typography of the total rating text.
  • Course Title: This setting provides options to change the typography of the course title.
  • Meta Icon: This setting lets you select the color and typography of the course meta information.
  • Meta Info: This setting lets you select the color and typography of the meta information of the course, such as course duration, difficulty, and category.
  • Author Label: This setting lets you change the typography of the author label.
  • Author Value: This setting lets you change the typography of the author value.
  • Course Price: This setting allows you to change the typography of the course price.
  • Add to Cart: This setting provides options to change the appearance of the Add to Cart button with the option to add paddings and alter color options.
  • Border: This setting lets you customize the border of the course grid, including border color, width, style, and radius.
  • Hover Border: This setting lets you customize the border of the course grid when hovering, including border color, width, style, and radius.
  • Box Shadow: This setting allows you to add a box shadow to the course grid and customize its color, position, blur, and spread.
  • Hover Box Shadow: This setting lets you add a box shadow to the course grid when hovering and customize its color, position, blur, and spread.
  • Spacing: This setting lets you add padding and margin around the courses in the grid.

Was this helpful?

Yes No 7