How to Override the OSCampus Class Page Layout
- Written by Alex Smirnov Alex Smirnov
- Category: Joomlashack Joomlashack
- Published: 23 April 2018 23 April 2018
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:
Let's get started.
Step #1. Create Your Class Override
- In your Joomla administrator panel, 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:
- You will see the Templates: Customise (<Your Template Name>). Click Create Overrides tab:
- Next, under the Components column, click com_oscampus:
- Click course:
You will see the "Override created in /templates/<your_template_name>/html/com_oscampus/course" 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:
- You will some sub-folders. Click com_oscampus:
- Click course:
- You will see some files. Click default.php:
You will see the file's code ready to be edited:
- Select the following code:
<div class="page-header"> <h1><?php echo $this->course->title; ?></h1> </div>
- Cut and paste this code right underneath of the following line of code:
<!-- .osc-section -->
- Click Save.
Go to your site front end. You will see the class title now moved down the page layout: