[PLUGIN] CSS Import

Post your completed addons to share with the community

Post » Wed Apr 16, 2014 2:46 pm

Nevermind...I managed to use <style> inside index.html
B
64
S
16
G
20
Posts: 471
Reputation: 16,131

Post » Fri Apr 18, 2014 7:14 am

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.
Code: Select all
#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%);
}

For the entire page.
Add the following to the stylesheet (notice the "body" instead of "#c2canvas").
Code: Select all
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%);
}


Sorry for the late reply, but glad to hear you figured it out.
B
89
S
33
G
7
Posts: 31
Reputation: 8,450

Post » Fri Apr 18, 2014 8:45 am

@McKack Thanks alot. Will try it right now
[EDIT] Yeeeeyy...It's working in preview also now with your plugin . Thanks again
B
64
S
16
G
20
Posts: 471
Reputation: 16,131

Post » Fri Apr 18, 2014 10:44 am

@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?
B
94
S
19
G
34
Posts: 1,840
Reputation: 27,988

Post » Sat Apr 19, 2014 10:11 am

@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
B
89
S
33
G
7
Posts: 31
Reputation: 8,450

Post » Sat Apr 19, 2014 11:41 am

@McKack how did you make this 'style.css' files?
B
94
S
19
G
34
Posts: 1,840
Reputation: 27,988

Post » Wed Apr 23, 2014 8:46 am

@delgado I wrote it in Sublime Text 3. In other words, any text editor you prefer :)
B
89
S
33
G
7
Posts: 31
Reputation: 8,450

Post » Fri Jul 18, 2014 5:19 pm

Please investigate the CSS Import download link or site as a possibly hijacked because it attempted to install malware on my computer from a site call Just Hook Up. A tutorial by istavang was recently posted which require the CSS Import. The link needs to be fixed or moved to another site because having third party crap installed on my computer is not something I care to deal with. My ESET security software flag the download site as being on a not trusted list and they were right to warn me. The site cannot be trusted and you may want to move the file to a safe site for downloading.

I would hope that as a member of the C2 community that I need not fear being sent to download sites that immediately installs malware when I simply need an addon. The site link may have been safe in the past buy seeing a large graphic displaying information about Asian women and then having Just Hook Up software malware try to install tells me that something went wrong.
B
61
S
9
G
8
Posts: 24
Reputation: 8,437

Post » Fri Jul 18, 2014 5:30 pm

* edit, oops i answered question from first page by mistake :lol:
You could use the Input plugin, but it only allows importing one css file atm .
B
10
S
2
G
1
Posts: 202
Reputation: 1,535

Post » Sat Jul 19, 2014 12:55 am

McKack wrote:CSS Import
1.0 - January 18th 2013


Background
I thought I'd share this plugin I made for some personal projects. It's somewhat redundant since most objects support CSS natively but it can be helpful if you want a more global approach to styling things. Also very handy since you can do CSS in preview/realtime.

Usage
The primary method of importing a CSS is automatically doing so by including it in your project and defining the name of the CSS file in the plugin properties.


The alternative method is including it in your project, then using the Import CSS file action through an event whenever you like.
Just remember to remove any CSS files that share styles (if using multiple CSS files) to avoid any conflicts.



P.S. There's built-in protection from accidentally importing the same CSS file several times.

Preview


Downloads
Plugin: css_import.zip
Example: css_import.capx

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 and don't think I'd be able to make a plugin from scratch :) Now, this also means I can't guarantee it working flawlessly. I've only tested it in Chrome on Windows 7, so if it breaks down and blows up your computer, I warned you!

Enjoy!McKack2013-04-27 01:37:13


something wrong with your download link ?? is it hijaked or something ?
B
12
S
5
G
4
Posts: 176
Reputation: 4,384

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: R0J0hound and 4 guests