> For the complete documentation index, see [llms.txt](https://docs.norrnext.com/norrcompetition/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.norrnext.com/norrcompetition/customisation/template-overriding.md).

# Template Overriding

Template overriding is a native feature in Joomla CMS that allows you to customize view templates, sub-layouts, and assets without modifying the core files of components or modules. When you update NorrCompetition, your custom overrides remain intact.

NorrCompetition 3.0+ fully adheres to modern Joomla 5 MVC standards, child template structures, and the WebAssetManager architecture.

***

## 📁 Override Types in NorrCompetition

NorrCompetition views and layouts are split into two primary areas:

1. **View Templates (`tmpl/`):** Full-page view entry points (e.g., contest page, entry page, category list, submission form).
2. **JLayouts (`layouts/`):** Modular partial sub-layouts (e.g., action buttons, countdown timers, voting messages, custom field renderers, comment tabs).
3. **Web Assets (`media/`):** CSS styles and JavaScript scripts registered via WebAssetManager.

***

## 🎨 Template & Child Template Overrides

In Joomla 5, template overrides can reside in either the parent template folder (`/templates/mytemplate/`) or within a Child Template in the media directory (`/media/templates/site/mychildtemplate/`).

### 1. View Template Overrides

To override a complete view (such as the Contest view or Participant view):

| Original Component File                                    | Template Override Location                                           | Child Template Override Location                                             |
| ---------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `/components/com_competition/tmpl/competition/default.php` | `/templates/mytemplate/html/com_competition/competition/default.php` | `/media/templates/site/mychild/html/com_competition/competition/default.php` |
| `/components/com_competition/tmpl/participant/default.php` | `/templates/mytemplate/html/com_competition/participant/default.php` | `/media/templates/site/mychild/html/com_competition/participant/default.php` |
| `/components/com_competition/tmpl/categories/default.php`  | `/templates/mytemplate/html/com_competition/categories/default.php`  | `/media/templates/site/mychild/html/com_competition/categories/default.php`  |
| `/components/com_competition/tmpl/category/default.php`    | `/templates/mytemplate/html/com_competition/category/default.php`    | `/media/templates/site/mychild/html/com_competition/category/default.php`    |
| `/components/com_competition/tmpl/appform/default.php`     | `/templates/mytemplate/html/com_competition/appform/default.php`     | `/media/templates/site/mychild/html/com_competition/appform/default.php`     |
| `/components/com_competition/tmpl/cform/default.php`       | `/templates/mytemplate/html/com_competition/cform/default.php`       | `/media/templates/site/mychild/html/com_competition/cform/default.php`       |
| `/components/com_competition/tmpl/user/default.php`        | `/templates/mytemplate/html/com_competition/user/default.php`        | `/media/templates/site/mychild/html/com_competition/user/default.php`        |

***

### 2. JLayout (Sub-Layout) Overrides

NorrCompetition uses reusable JLayouts located in `/components/com_competition/layouts/default/` for rendering specific UI blocks.

To override a specific layout partial:

| Original Sub-Layout                                     | Override Path                                                                                      |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `layouts/default/partials/contest/items.php`            | `/templates/mytemplate/html/layouts/com_competition/default/partials/contest/items.php`            |
| `layouts/default/partials/contest/result_grandprix.php` | `/templates/mytemplate/html/layouts/com_competition/default/partials/contest/result_grandprix.php` |
| `layouts/default/partials/entry/about.php`              | `/templates/mytemplate/html/layouts/com_competition/default/partials/entry/about.php`              |
| `layouts/default/partials/entry/fields.php`             | `/templates/mytemplate/html/layouts/com_competition/default/partials/entry/fields.php`             |
| `layouts/default/partials/countdown/timer.php`          | `/templates/mytemplate/html/layouts/com_competition/default/partials/countdown/timer.php`          |
| `layouts/default/partials/buttons/vote.php`             | `/templates/mytemplate/html/layouts/com_competition/default/partials/buttons/vote.php`             |
| `layouts/default/partials/comments/tabs.php`            | `/templates/mytemplate/html/layouts/com_competition/default/partials/comments/tabs.php`            |

{% hint style="info" %}
**Child Templates in Joomla 5:** If using a child template, place the layout override inside `/media/templates/site/mychildtemplate/html/layouts/com_competition/default/partials/...`.
{% endhint %}

***

## ⚡ Creating CSS & JavaScript Overrides

Component assets in NorrCompetition are managed through Joomla's **WebAssetManager** and defined in `/media/com_competition/joomla.asset.json`.

Asset files are stored in:

* Styles: `/media/com_competition/css/`
* Scripts: `/media/com_competition/js/`

### Overriding via File Placement

To override an individual stylesheet or script (for example, `style.min.css` or `photo.min.js`), place your custom file in your site template's asset directory:

**Parent Template:**

```
/templates/mytemplate/css/com_competition/style.min.css
/templates/mytemplate/js/com_competition/competition.min.js
```

**Child Template (Joomla 5 Recommended):**

```
/media/templates/site/mychildtemplate/css/com_competition/style.min.css
/media/templates/site/mychildtemplate/js/com_competition/competition.min.js
```

### Overriding via `joomla.asset.json`

You can also override or extend asset definitions globally in your template's `joomla.asset.json`:

```json
{
  "assets": [
    {
      "name": "nc.theme.style",
      "type": "style",
      "uri": "templates/site/mytemplate/css/custom-nc.css",
      "override": true
    }
  ]
}
```

***

## 🛠️ Best Practices for Overrides

1. **Copy only what you need:** Do not copy the entire `layouts/` directory into your template. Override only the specific sub-layout file you intend to modify.
2. **Preserve Data Attributes & Classes:** JavaScript functions and UIkit interactive components (modals, lightboxes, ajax voting) rely on specific HTML classes and `data-*` attributes. Preserve these attributes when modifying HTML markup.
3. **Use Child Templates:** When building custom layouts on Joomla 5, prefer creating a Child Template over modifying template framework files directly to ensure safe updates.