How to Override OSCampus Pro Class Page Layout

To follow instructions in this tutorial, you will need the following:

  • A Joomla 3 site.
  • The latest OS Campus Pro installed.
  • One OSCampus pathway created.
  • One OSCampus class created.
  • One OSCampus lesson created.

In this document, you will learn how to move an OSCampus class page title from the top of the page slightly down the layout.

At the beginning of this tutorial, your title will be placed as shown below:

 

Class page layout out of the box

At the end of this tutorial, your class page title will be placed as follows:

Final result

Let's get started.

Step #1. Create Your Class Override

  • In your Joomla back end, go to Extensions > Templates > Templates:

Go to Extensions -Templates - Templates

  • You will be taken to the Templates: Templates (Site) page. Click on <Your Template Name> Details and Files. For the purpose of this document, I am using the Wright template. So, I clicked the Js_wright Details and Files:

js wright details files

  • You will be taken to the Templates: Customise (<Your Template Name>). Click Create Overrides tab:

Click Create Overrides tab

  • Next, under the Components column, please click com_oscampus:

Click com_oscampus

  • Now, click course:

Click course

You will see the "Override created in /templates/<your_template_name>/html/com_oscampus/course" message:

Override has been created message

Excellent! You have just created a stage for moving your OSCampus class title slightly down the page layout.

You are now ready to override the out-of-the-box OSCampus class page layout with your own.

Step #2. Override Your Class Layout

  • Click html:

Click html

  • You will some sub-folders. Click com_oscampus:

Click com_oscampus

  • Click course:

Click course

  • You will see some files. Click default.php:

Click default php

You will see the file's code ready to be edited:

File ready to be edited

  • Select the following code:

<div class="page-header">
<h1><?php echo $this->course->title; ?></h1>
</div> 

Select the following code

  • Cut and paste this code right underneath of the following line of code:
    <!-- .osc-section -->

Cut and paste the code to the new place

  • Click Save.

Go to your site front end. You will see the class title now moved down the page layout:

Check the final result