---
title: "Override the layout of Smile Pack modules - Smile Pack"
description: "Customize any Smile Pack module with a Joomla template override: which layout to copy, where to put it, and what each override changes."
url: "https://www.tassos.gr/docs/smile-pack/developers/layout-overrides"
date: "2026-10-23T13:16:11+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/docs) / [ Smile Pack ](https://www.tassos.gr/docs/smile-pack) / [ Developers ](https://www.tassos.gr/docs/smile-pack/developers)

#  Override the layout of Smile Pack modules

##  Customize any Smile Pack module with a Joomla template override: which layout to copy, where to put it, and what each override changes.

You can change the HTML or the data of any Smile Pack module with a Joomla template override. Your changes live in your template, so a Smile Pack update won't overwrite them.

## [Which layout should you override?](#which-layout-should-you-override)

Every Smile Pack module renders in 2 steps. First, the **module layout** reads the module settings and prepares the data (the map markers, the gallery images, the accordion panels). Then it hands that data to a **widget layout**, which prints the final HTML.

You can override either one:

- **Module layout**: change the data before it's displayed, or wrap the module in your own HTML. It only affects Smile Pack modules of that type.
- **Widget layout**: change the HTML itself. Widgets are shared with other Tassos extensions, so the override also changes fields that use the same widget, like the [ACF - Map](https://www.tassos.gr/docs/advanced-custom-fields/fields/map) and [ACF - Gallery](https://www.tassos.gr/docs/advanced-custom-fields/fields/gallery) fields.

| Module | Module layout folder | Widget layout folder |
|---|---|---|
| [Accordion](https://www.tassos.gr/docs/smile-pack/modules/accordion) | `mod_spaccordion` | `accordion` |
| [Gallery](https://www.tassos.gr/docs/smile-pack/modules/gallery) | `mod_spgallery` | `gallery` (Grid, Masonry and Justified styles)   `slideshow` (Slideshow style) |
| [Map](https://www.tassos.gr/docs/smile-pack/modules/map) | `mod_spmap` | `openstreetmap`, `googlemap` or `bingmap`, depending on the Provider |
| [Video](https://www.tassos.gr/docs/smile-pack/modules/video) | `mod_spvideo` | `video` (YouTube, Vimeo, Dailymotion, Facebook)   `selfhostedvideo` (Self-hosted) |
| [PayPal Button](https://www.tassos.gr/docs/smile-pack/modules/paypal-button) | `mod_sppaypal` | Not available |

 The PayPal Button widget layout can't be overridden. To customize the PayPal Button module, override its module layout.

## [Override the module layout](#override-the-module-layout)

A module layout override works like any other Joomla module override. Joomla's Template Manager can create it for you:

1. Log into your Joomla backend.
2. Go to System → Site Templates.
3. Click **YOUR\_TEMPLATE Details and Files**.
4. Open the **Create Overrides** tab.
5. Under **Modules**, click the Smile Pack module you want to override, for example **mod\_spmap**.

Joomla copies the module's layout into your template:

```
/templates/YOUR_TEMPLATE/html/mod_spmap/default.php
```

Open that file and make your changes. To create the override by hand instead, copy `/modules/mod_spmap/tmpl/default.php` to the path above.

 Keep the file name default.php. Smile Pack modules don't have a Layout option in their settings, so a file with any other name won't load.

### [The Video module](#the-video-module)

The Video module's `default.php` loads a separate file for each provider from a `providers` folder next to it. **Create Overrides** copies this folder for you. If you create the override by hand, copy the whole `/modules/mod_spvideo/tmpl/` folder, including `providers`, to:

```
/templates/YOUR_TEMPLATE/html/mod_spvideo/
```

To change only the YouTube output, edit `providers/youtube.php` and leave `default.php` as it is.

## [Override the widget layout](#override-the-widget-layout)

Override the widget layout when you need different HTML markup. Smile Pack loads widget overrides from the `html/tassos/widgets` folder of your template.

1. Find the widget folder of your module in the table above, for example `openstreetmap`.
2. Copy the widget layout from: ```
    /plugins/system/nrframework/layouts/widgets/openstreetmap/default.php
    ```
3. Paste it into your template, creating any missing folders: ```
    /templates/YOUR_TEMPLATE/html/tassos/widgets/openstreetmap/default.php
    ```
4. Open the copied file and make your changes.

The override takes effect immediately on every Smile Pack module and every field that uses this widget. If you only want to change the Smile Pack module, override the module layout instead.

 Advanced Custom Fields can also use a widget layout under a different name, picked per field from ACF - Options → Layout. Smile Pack modules always load default.php.

### [Gallery sub-layouts](#gallery-sub-layouts)

The Gallery widget splits its HTML into smaller files inside a `default` folder: `item.php` (a single image), `tags.php` (the filtering tags) and `glightbox.php` (the lightbox). To change one of them, copy it into the same structure in your template:

```
/plugins/system/nrframework/layouts/widgets/gallery/default/item.php
```

to

```
/templates/YOUR_TEMPLATE/html/tassos/widgets/gallery/default/item.php
```

You only need to copy the files you change. Any file missing from your template loads from the original folder.

## [Keep your overrides up to date](#keep-your-overrides-up-to-date)

Your override is a copy of the original layout. When a Smile Pack or Tassos Framework update changes the original file, your copy keeps the old code. After an update, compare your override with the new original and copy over any changes you need.

 Last updated on Oct 20th 2026 10:10