[PLUGIN] Import (Previously "CSS Import")

Import

About

Import, previously known as the CSS Import plugin (download still available at bottom of post), has been updated and renamed - it now supports JS as well as CSS (open to suggestions for other filetypes you'd normally add to the exported HTML, if any)

The Import plugin allows you to import files you've added to your project into the DOM at runtime (even with NW.js!) instead of having to edit the index.html each time you export.

Primarily it's just meant for testing things like CSS or JS modules without the need to export, but depending on your project you may be able to use it in your releases as well.

A tiny drawback for instance with importing at runtime is that it's not immediately loaded, so you might see styled elements switch from original look to styled for a few ms. if you load directly into a layout. This can be hidden with a loading layer, layout or setting initial visibility of styled elements to hidden, then unhiding them at start with events.

Usage

If you only need to import one file you can use the Auto-import field under the plugin properties.

There's no benefit of Auto-import vs events and you can combine both methods as well if you'd like. For example, import module.js via Auto-import and style.css at start with the Import file event. There's built-in protection from accidentally importing the same file several times but it may not be bullet proof so try to avoid it if possible :]

Import v1.1 Download - June 9th 2017

Plugin: mck_import.zip

CSS Import v1.0 Download - January 18th 2013

Plugin: css_import.zip

Example: css_import.capx

Screenshot: http://i.imgur.com/ZWVFy.png

Credits/Disclaimer

The plugin was basically Frankenstein'd from Pode's HTML Div plugin (because it contained CSS stuff) + code scavenged from the web. So credits to Pode and this site specifically for making this possible.

I have no real coding skills, this was mainly just for personal use and don't think I'd be able to make a plugin from scratch. So this means I can't guarantee it working flawlessly. I've only tested it in Chrome on Windows 7 and 10, so if it breaks down and blows up your computer, I warned you!

Enjoy!

<img src="smileys/smiley20.gif" border="0" align="middle" /> Good one!

it helps for the entire HTML file

Sorry, we are unable to retrieve this document. - said Google. Please repair links.

Sorry! Links should work now.

McKack

hi. can this plugin support css files with images?

I don't see any reason it shouldn't work. Did you try without succeeding?

Link from download page is broken.

https://dl.dropboxusercontent.com/u/2175584/Construct2Examples/plugins/css_import.zip

Here's a copy from when i downloaded it <img src="smileys/smiley2.gif" border="0" align="middle">

Links still working here.

McKack I try putting a background gradient but cannot seem to make it work. I am talking about layout background not a button or text.Can you give please some pointers?

Thanks

Nevermind...I managed to use <style> inside index.html

Yes, that can easily be done in the index.html for deployment. Hopefully there'll be more settings and control over the index.html appearance in future versions of Construct 2.

This plugin is mostly just intended for realtime usage or testing in preview.

In any case, for future reference if anyone wonders, using the plugin, here's some examples of how it could be done:

For just the layout.

Set the layer(s) in your layout to transparent and add the following to the stylesheet.

#c2canvas {
	/* Support for most browsers */
	background-image: -ms-linear-gradient(top, #000000 0%, #EF1A7E 100%);
	background-image: -moz-linear-gradient(top, #000000 0%, #EF1A7E 100%);
	background-image: -o-linear-gradient(top, #000000 0%, #EF1A7E 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), color-stop(1, #EF1A7E));
	background-image: -webkit-linear-gradient(top, #000000 0%, #EF1A7E 100%);
	background-image: linear-gradient(to bottom, #000000 0%, #EF1A7E 100%);
}[/code:3tumn0kj]
[b]For the entire page.[/b]
Add the following to the stylesheet (notice the "body" instead of "#c2canvas").
[code:3tumn0kj]body {
	/* Support for most browsers */
	background-image: -ms-linear-gradient(top, #000000 0%, #EF1A7E 100%);
	background-image: -moz-linear-gradient(top, #000000 0%, #EF1A7E 100%);
	background-image: -o-linear-gradient(top, #000000 0%, #EF1A7E 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), color-stop(1, #EF1A7E));
	background-image: -webkit-linear-gradient(top, #000000 0%, #EF1A7E 100%);
	background-image: linear-gradient(to bottom, #000000 0%, #EF1A7E 100%);
}[/code:3tumn0kj]

Sorry for the late reply, but glad to hear you figured it out.

McKack Thanks alot. Will try it right now

[EDIT] Yeeeeyy...It's working in preview also now with your plugin . Thanks again

McKack you have iea how use this font: http://robotofont.com/ in construct 2?

this is direct lint from step 3: http://robotofont.com/wp-content/upload ... Step-3.png

Or how make my own css files?

Cipriux Great!

delgado

You'll wanna use the text object, it has support for web fonts (Not recommended/supported for mobile if I recall correctly, though)

Another option is to create a spritefont using that font.

https://www.scirra.com/tutorials/236/using-web-fonts-in-the-text-object

https://www.scirra.com/manual/166/sprite-font

Handy CSS documentation / tutorials can be found here:

http://www.w3schools.com/css/DEFAULT.asp