Table of Contents
Folder Structure
There are different types of extensions. Depending on what of extension you're creating, the folder structure may differ. The following files are always present, regardless of what type of extension you're creating:
Base Structure
- splash.html
- splash.jpg
- thumbnail.jpg
- translations/
params.json
The purpose of this file is to tell Mobirise what the name of the extension is, the description, the version of the extension and what logo to use. If you want to know more about this file, check out the params.json page.
splash.html
This file contains the contents of what a user sees when the extension has been installed succesfully.
splash.jpg
In most cases, the splash.html
file contains an img-tag that points to an image. This image is displayed when the extension has been installed succesfully. The name of said image does not have to be splash.jpg
, but it's very common to do so. It may as well be named extension.png
. As you can see, it may as well be a PNG file.
thumbnail.jpg
Just like the splash.jpg
file, the thumbnail.jpg
does not have to be named this way. You can call it whatever you like, as long as you're referring to this file through the params.json file.
translations
Any extension can come with its own translations. Translations are not required, but are very user friendly if you incorporate them into your extensions. Each language can have its own language file that contains all phrases and their translations.
App Extensions
app.js
The app.js file contains all the code required for that extension.
core.js
An App Extension sometimes come with a core.js file. It's unclear when you would need a core.js file.
Component Extensions
A Componend Extension comes with one or more components. In most cases these are additional blocks a user can drag onto his website. The file and folder structure looks like this:
- primary component_directory
- thumb.png
component_directory
This is a directory that holds all component files. You can name this directory however you like, as long as it's referred to by the params.json file.
component.js
A component.js file contains all the code that's required for the component to work. It also contains all the parameters a user can set through the gear icon of a block. If you wish to know more about this file, check out the component.js page.
template.html
The template.html file contains all the HTML to display the block inside Mobirise, but also when the website is previewed/published.
thumb.png
The thumb.png
file is the image that's used in the blocks sidebar, from where you drag blocks onto your website.
Themes
Themes are a different kind of extension. They provide an entire theme on which you can base your website and offer several blocks to get you started. Older M3 themes came with Component Extensions in them, but nowadays that isn't the case anymore. Themes often come with:
- fonts/
- components/
- plugins/
fonts
Most themes come with their own fonts to give them that more unique look and feel. Fonts are stored inside this directory.
components
This directory contains all the blocks of said theme. These are the blocks that get displayed on the sidebar which ou can drag onto your website.
plugins
All plugins and (Javascript) libraries a theme uses are stored in this directory.