Because Export Kit allows you to customize your HTML5 Content before export, you can add both custom CSS and JavaScript. This can further enhance your Output to incorporate your existing code.

NOTE: All layer names will follow the Layer Naming Rules:

PSD layer name: My Layer Name

JS/CSS element name: my_layer_name

External Javascript

You can add external JavaScript to your Custom HEAD by using the HTML script tag.

Eg: <script src="myscripts.js"></script>

Once you add the script tag to your Custom HEAD, the Output will process the external JavaScript as normal in any website.

Using External JavaScript

Your JavaScript files can take-over any layer element in your PSD file. You can use JavaScript to control all aspects of your Output including button actions, events and animation.

Eg. Assume you have a layer in your PSD named “Custom Gallery”, you can use external JavaScript to take over the PSD element by using:

JavaScript: document.getElementsByName('custom_gallery')

jQuery: $('#custom_gallery')

External CSS

You can add external JavaScript to your Custom HEAD by using the HTML link tag.

Eg: <link rel="stylesheet" type="text/css" href="mystyles.css" />

Once you add the link tag to your Custom HEAD, the Output will process the external CSS as normal in any website.

Using External CSS

Your CSS files can take-over any layer element in your PSD file. You can use CSS to control all visual aspects of your Output.

Eg. Assume you have a layer in your PSD named “Home Button”, you can use external CSS to take over the PSD element by using:

#home_button{}

Virtual Scripts (Advanced)

You can add any custom HTML, CSS, JavaScript or PHP code to this folder and Export Kit will auto-load the content into Virtual Scripts. You can copy any external file into your web-templates, add a few Script Tags, and modify the code directly in Photoshop – for any project without linking additional files.