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 OSCampus 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 OSCampus 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:
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:
- 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:
- 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.
- Introducing OSCampus, the New Joomla LMS.
- How to Use OSCampus, the New Joomla LMS.
- Say Hello to OSCampus, the New Joomla LMS.
- Introducing New Reports in OSCampus.
- OSCampus Documentation.
Save $1000's when you sign up to the Everything Club today! You' ll get access to all our extensions, templates, and Joomla training.