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 OSCampus 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 OSCampus 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

Step #3. Override your OSCampus class page CSS style

A layout override is a customization. With an override for a class page layout, you may want to make a further step. You may wish to also override your OSCampus Pro class CSS styles.

For the purpose of this tutorial, I will override the font-size CSS style of the h1 tag of a class page:

the class h1 styles

  • Go to Add Custom CSS plugin download page and download the plugin.
  • Install and publish it on your site.
  • In the root of your Joomla site create a new folder, called, for example, /my-css-overrides/.
  • Create an empty .css file inside the /my-css-overrides/ folder, called, for example, custom-oscampus.css.
  • Place inside the custom-oscampus.css file your required CSS style and save it.
  • In your Joomla control panel, go to Extensions > Plugins and open the System - Add Custom CSS plugin for editing.
  • Enter my-custom-css/custom-oscampus.css into the Custom CSS File 1 Path field:

path to custom styles

  • Click Save & Close.

There you have it. If you check your OSCampus class page now, you will see the new CSS styles at work. 

Next time you upgrade either your Joomla, or your template, or your OSCampus component, these new styles will stay intact.

Additional Reading

What's Next?

Save $1000's when you sign up to the Everything Club today! You' ll get access to all our extensions, templates, and Joomla training.


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.