Logo of Joomlashack OSCampus Pro

One of our Everything Club members asked how to change an OSCampus class page layout.

They tried to achieve this by directly editing the OSCampus files. That was not the best approach.

The correct technique for changing a layout of a Joomla page is called a "templates override".

In this tutorial, you will learn how to use this technique to redesign an OSCampus class page.

What are Template overrides?

If you are new to the concept of Joomla template overrides, this technique allows you to customize layouts of your Joomla site pages.

Your pages with their layouts always get created by either a Joomla core or by a third-party component. In this post, such component is Joomlashack's OSCampus Pro.

Naturally, to edit a layout of a page, you may want to directly edit OSCampus file responsible for the layout of the page. 

And you will manage to change the layout of the page this way. However next time you update your OSCampus Pro, the new files will overwrite the old ones and all of your edits will be lost.

With the Template Overrides technique, you don't need to edit a component or module files directly. You instead copy those files in the html folder of your template and edit them in there. 

Once you did, Joomla smartly starts using them instead of their originals. 

Before you begin

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

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

You will learn how to move an OSCampus class page title slightly down the page:

Class page layout out of the box

Let's get started.

Step #1. Create Your Class Override

  • In your Joomla administrator panel, go to Extensions > Templates > Templates:

Go to Extensions -Templates - Templates

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

js wright details files

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

Click Create Overrides tab

  • Next, under the Components column, click com_oscampus:

Click com_oscampus

  • 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 set your 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


About the author

Born from a Ukrainian mother and Russian father, Alex lives in the United Kingdom. Alex is a self-taught Microsoft Certified Professional. He enjoys learning Joomla and helping web site administrators make the most of it.