About website customization

If you are familiar with HTML, CSS and JavaScript, you can easily build custom websites using Mozello as your CMS. This documentation explains how.


Customizing templates

Apart from the built-in user-friendly template color customization, developers can further customize the selected design template by adding custom CSS code that builds upon or overrides the original CSS code.

Using custom CSS code

  1. In the Settings > General settings window, open Code section
  2. Under Additional HTML code for HEAD section create a <style> block
  3. Enter your CSS rules

You can find out what CSS is in effect for a template by means of developer tools built in your web browser. Press F12 to open the developer tools of your web browser.



Adding custom features

You can add custom website features (e.g. pop-ups) by means of writing JavaScript code.

Using JavaScript code

  1. In the Settings > General settings window, open Code section
  2. Under Additional HTML code for HEAD section or Additional HTML code for BODY section create a <script> block
  3. Paste your JavaScript code there

Inserting custom code in the content

  1. Place caret in any content section of the website
  2. On the toolbar, click Insert Code
  3. Paste your JavaScript or HTML code

jQuery is available at all times as it is automatically included in every page.

Server-side apps

Since Mozello is a closed and protected system, server side apps have to be hosted on a separate web server. Their output can be included in Mozello website by means of HTML or JavaScript.

The easiest way to embed your app from an external server is to use <iframe> tags just like it is done with YouTube videos and Twitter feeds, but you can also use JavaScript, AJAX, JSON and JSONP to build a more sophisticated solution.

So, to create a server side app:

  1. Set up your own web server or hosting account that will host the app.
  2. Write the app in such manner that it can be integrated in remote websites as this is what you will have to do next.
  3. Integrate the app into your Mozello website via JavaScript, AJAX or iframe.

Example with iframe

Imagine that you have created a dynamic app hosted on http://www.example.com/app/, here is the code for integrating your app in your Mozello website:

<iframe src="https://www.example.com/app/" style="width: 100%; height: 300px" frameborder="0" scrolling="no" onload="javascript:resizeIframe(this);"></iframe>


Working with files

User files are uploaded via web interface and stored in the cloud. If you want to use your own JS, CSS or image files, here is how:

  1. Use Insert file feature to upload the file
  2. Place the caret inside the inserted file link
  3. Click the Hyperlink icon
  4. Copy the full path of the uploaded file - this is the link to your file
  5. Remove the link from the text as you won't need it

Important notes

  • All uploaded files are stored in the same logical directory
  • For performance reasons files are heavily cached on the server. If you upload a new file with the same name, it may take up to 10 minutes for the new contents to appear and you may have to refresh your browser cache as well.
  • For testing CSS or JS code, it is recommended to either use inline syntax or to save CSS / JS files on some separate development server that does not utilize caching.