Get the distro files by downloading them from github using the downloads feature, or pull them out of the project manually (the files are in /distro). Copy these files into your project, and if you adjust where they're located (e.g. if they're not within
assets/stylesheets). Also make sure you update the
mercury_loader.js file to reflect this. How to use the
mercury_loader.js is outlined in more detail below.
Images are bundled into the CSS if you're using the
mercury.bundle.css file, but if you'd rather not use the bundled CSS you'll need to grab the images manually and adjust the paths that are in the
The dialogs (eg. color palettes, modals, and other dialog types) are bundled into the mercury_dialogs.js file. If you would like to customize a view you can remove the view from the mercury_dialogs.js file and adjust the path you want to load using the configuration -- your custom view will then load using Ajax.
Bundling snippet options and snippets doesn't work in this way, so you may need to disable snippets or adjust where they're loaded from (writing your own back end integration).
Include the mercury_loader.js file. The loader will reload the page and enable Mercury in full page editing mode, so you may want to wrap this in conditional logic (only admins or something).
Then you can create editable regions within your markup by using the
data-mercury attribute. There's more documentation about the region types in the README Make sure you have an id for all regions.
<div data-mercury="full" id="uniqueID"> /* Your editable content will be here... */ </div>
The loader allows for you to provide "packages". These packages are basically where and what files you want loaded. There's some pre-defined for you, and you're expected to modify these or create your own
mercuryPackages object that describes your custom packages before including the loader.
Then when including the
mercury_loader.js you can specify which package you want loaded.
You can also provide additional options to Mercury in this way. For instance to load Mercury in a hidden state, you can provide the
Or if you feel it's easier, you can modify your
mercury_loader.js file to make whatever modifications you want. The rest of the documentation provided in the README, and on the wiki will likely apply.### ### ###