ViralListMachine

I have created the VLM in such a way that is is quite easy to modify the design and add your own JavaScript codes for example for exit popups and similar scripts.

Themes

VLM is shipped just with the default theme. If you’d like to modify it I suggest you copy the directory system/themes/default to for example system/themes/custom and select that theme on the admin page “General Configuration”.

This way you can make sure that whatever you’re doing you can always switch back safely to the default theme within a few seconds.

Every theme consists of  several CSS files (Cascading Style Sheets). If you just wish to change some minor things you don’t even need to modify the themes at all – see the next paragraph for more information. The CSS files are theme.css, iefixes.css and xinha.css. The admin directory under the them directory contains admin.css and iefixes.css.

The theme.css file specifies the core CSS styles, the main design of the site. The file iefixes.css contains just some fixes for Internet Explorer that overwrite some styles from the theme.css file for that browser only.

The file xinha.css defines the basic styles for the HTML editor preview so that the preview shows almost the same design as the page after saving it. If you e.g. change a font in the theme file you should also do this in the xinha.css file.

The admin.css file in the admin subdirectory builds upon the main CSS file and just defines more styles used only in the admin area.

So if you’d like to change larger parts of the design you should use the CSS files in the theme directory directly.

Small Design Changes

Rather small design changes like changing the font or removing the background image can be inserted directly into the file system/customize/system.css

So if you’d just like to remove the background image add this line to the system.css file:

body { background:none; }

And by the magic of CSS the background is gone. You can overwrite every single CSS style from the theme in this file without having to touch any theme.

Custom JavaScript Like Exit Popups And More

You’d like to add your own JavaScript code to integrate popups or similar JavaScript code?

That’s really easy. Just add it to this file: system/customize/js/custom.js

Changing The HTML Code (Templates)

The ViralListMachine is completely template-based therefore you can even modify the HTML templates.

You can find all of the templates where editing would make sense in the directory system/customize/tpl

Before you begin just a warning: be careful what you’re doing, especially don’t remove placeholders (“{placeholdername}”) and HTML comments (“<!– BEGIN blockName –>…<!– END blockName –>”) as these are used by the PHP code to render the page. Removing these or moving them to another place may have unexpected side effects – so just make sure you know what you’re doing

I think that all of the template names are self-explanatory. The main.tpl file however contains just one placeholder (don’t remove or all of your pages – including the admin area – will not display anything anymore) – this is essentially the main template you can use for your HTML code, everything else is inserted into that placeholder.

I hope this information was helpful for you and you can now modify the design of the ViralListMachine to suit your needs and requirements.