PDA

View Full Version : Add-On Releases - @font-face & @keyframes


Elite_360_
12-06-2012, 11:00 PM
Mark As Installed = Support
will be compatible with
e360 - Username Html MarkUp 4.x.x Version 1.2.0 (https://vborg.vbsupport.ru/showthread.php?t=290368)
and e360 - Username Prefix with Html MarkUp (Clan Tags) 4.x.x Version 1.2.0 (https://vborg.vbsupport.ru/showthread.php?t=290374)

For Version Information And Features for Next Version: Go to Post #2 (https://vborg.vbsupport.ru/showpost.php?p=2389035&postcount=2)

Only Tested on 4.2.0

Description:

Adds 6 New BBcodes For Use and can use custom @font-face and @KeyFrame Effects
Adds an IE LeightBox Warning for IE 6,7,8 and 9 to upgrade browser or get Google Chrome Frame for IE 6,7,8 and 9.
(The LeightBox Warning only shows For IE 6,7,8 and 9 Unless the have Google Chrome Frame for IE)

1.Outline Text Effect, this is achieve by CSS
2.Color Outline Text Effect, this is achieve by CSS
3.Neon Lights Text Effect (also fades in and out), this is achieve by CSS and @font-face
4.Blinking Text Effect, this is achieve by CSS
5.Fire Animation Text Effect, this is achieve by CSS
6.Sparkles Text Effect, this is achieve by images

If you dont like any of the bbcode you can delete them by going to
AdminCP >Custom BB Codes > BB Code Manager But try them out first before you delete them

Neon Lights Text Effect
you can use for colors red,yellow,green,purple,blue,orange And pink for this effect.
(For option use lowercase letters only!)

Color Outline Text Effect
you can use for colors blue,lime,yellow,red,magenta,cyan,purple,hotpink,n avy,green and orange for this effect.
(For option use lowercase letters only!)

Sparkles Text Effect
You can use 1-7 for this effect.

@font-face compatible with all browsers except Opera Mini, and IE6.

@KeyFrame compatible with Firefox,Chrome,Safari,Opera,iOS Safari,Android Browser,Blackberry Browser and IE10 except Opera Mini, IE 6,7,8 and 9, But some will still work with IE 9.

@KeyFrame Can be compatible with all IE browsers, If they Have Google Chrome Frame for IE 6,7,8 and 9.

Adds 20 New Fonts the 20th one use for Neon Lights Text Effect
Digital-7
Transformers Movie
X-Files
Top Secret Bold
Super Mario Bros
Kingthings Christmas2
Army
BatmanForeverAlternate
Blade Runner Movie Font
BLiNG RiNG
Coca Cola ii
Graffogie
Most Wazted
Harry Potterregular
STARWARS
Compacta Black BT
Blood Thirsty
Chinese Take Away
North Side

Installation or Update:

1. BackUp Your DataBase

2. Upload e360mods folder to your forum root

3. Import the product-e360_font_face product file via AdminCP > Plugin System > Manage Products > [Add/Import Product]

4. IF YOU WANT TO USE THEM ON THE CKEDITOR Go to AdminCP > Styles & Templates > Style Manager > Your Style > Toolbar Menu Options > and add to Available Fonts from the new fonts that are in the font text (Text Document)

5. Go to AdminCP > Setting > Options > e360 @font-face Leightbox > and Enable IE LeightBox Warning?

6. If You have dark Style Go to AdminCP > Style Manager > Your Style > Style Variable Editor > e360_FontFace and config Outline Color to white and Outline Font Color to black

7.Now if you have your own server or VPS add this
(This is for people with Google Chrome Frame for IE so it will work on your site)

For Apache, httpd.conf

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf
</IfModule>
</IfModule>



For IIS 7.0 and greater, you can set the header in a web.config

<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="chrome=1" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>


if you dont have your own server add this to the top of your headinclude Template

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">



You Can Read more about Google Chrome Frame Here (https://developers.google.com/chrome/chrome-frame/)

8. If you want to add your own custom @font-face's and @KeyFrame's
add the CSS in the template e360_at-ff-kf-additional.css and your custom fonts to the folder root /e360mods/@font_face/custom_fonts (Folder custom_fonts)
for custom font make sure you have all 4 font files (eot,woff,ttf,svg)

This is a good place for font generator (Here) (http://www.fontsquirrel.com/fontface/generator) if you have a font file it will generator the css and the other 3 font files for you. You just have to edit the css a little bit

Example:

Here's want in the CSS file fontsquirrel generates (Make Perfect CSS)
(NOTE THIS IS AN EXAMPLE)

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 1, 2012 */



@font-face {
font-family: 'Compacta Black BT';
src: url('compacta_black_bt-webfont.eot');
src: url('compacta_black_bt-webfont.eot?#iefix') format('embedded-opentype'),
url('compacta_black_bt-webfont.woff') format('woff'),
url('compacta_black_bt-webfont.ttf') format('truetype'),
url('compacta_black_bt-webfont.svg#compacta_blk_btblack') format('svg');
font-weight: normal;
font-style: normal;
}




now add this e360mods/@font_face/custom_fonts/ to your this css and make it looks like this
(NOTE THIS IS AN EXAMPLE)


@font-face {
font-family: 'Compacta Black BT';
src: url('e360mods/@font_face/custom_fonts/compacta_black_bt-webfont.eot');
src: url('e360mods/@font_face/custom_fonts/compacta_black_bt-webfont.eot?#iefix') format('embedded-opentype'),
url('e360mods/@font_face/custom_fonts/compacta_black_bt-webfont.woff') format('woff'),
url('e360mods/@font_face/custom_fonts/compacta_black_bt-webfont.ttf') format('truetype'),
url('e360mods/@font_face/custom_fonts/compacta_black_bt-webfont.svg#compacta_blk_btblack') format('svg');
font-weight: normal;
font-style: normal;
}



and add the CSS code above to the e360_at-ff-kf-additional.css template
(NOTE THIS IS AN EXAMPLE)

and just upload all 4 font files (eot,woff,ttf,svg) to your forum root /e360mods/@font_face/custom_fonts (Folder custom_fonts)
IF YOU WANT TO USE THEM ON THE CKEDITOR add the font name Compacta Black BT to AdminCP > Styles & Templates > Style Manager > Your Style > Toolbar Menu Options > and add to Available Fonts
(NOTE THIS IS AN EXAMPLE)

Elite_360_
12-07-2012, 03:15 AM
Version Information:

v1.0 - Dec 6 2012
-First version
v1.0.1
-Fix bug: bbcode was not installing

Toorak Times
12-10-2012, 02:46 PM
WOW...we have just figured out how to upload 4 fonts to our WYSIWIG and I see this. Thank you mate, 11 am tomorrow when my developer gets here I'm pointing him straight to it and see what he thinks. can we upload other fons through this mod of our own choice?

Cheers

Silverrain
12-10-2012, 02:49 PM
Excuse me but where is this?

4. IF YOU WANT TO USE THEM ON THE CKEDITOR Go to AdminCP > Style Manager > Your Style > Toolbar Menu Options > and add the new fonts that are in the font text (Text Document)

I cant find Toolbar Menu Options in VB 4.2.0 ... and i have german version too. Can you help me with that?

Elite_360_
12-10-2012, 03:45 PM
WOW...we have just figured out how to upload 4 fonts to our WYSIWIG and I see this. Thank you mate, 11 am tomorrow when my developer gets here I'm pointing him straight to it and see what he thinks. can we upload other fonts through this mod of our own choice?

Cheers

you can add as many fonts as you want as long as you upload the 4 font files for that font (eot,woff,ttf,svg) so it can work with all the different browser out there
you dont really even need this mod to upload new fonts you could just add the CSS to additional.css and it wil work just as the same you would need your CSS to point to the font file
Excuse me but where is this?

4. IF YOU WANT TO USE THEM ON THE CKEDITOR Go to AdminCP > Style Manager > Your Style > Toolbar Menu Options > and add the new fonts that are in the font text (Text Document)

I cant find Toolbar Menu Options in VB 4.2.0 ... and i have german version too. Can you help me with that?

Admincp > Styles & Templates > Style Manager > Your Style > Toolbar Men? Optionen (Wird in dem Dropdown BE) > um verf?gbare Fonts hinzuzuf?gen

Silverrain
12-10-2012, 06:32 PM
http://s1.directupload.net/images/121210/qhjqi6qk.png



Wo finde ich es?

please help me :(

Elite_360_
12-10-2012, 07:05 PM
http://s1.directupload.net/images/121210/qhjqi6qk.png



Wo finde ich es?

please help me :(

bbcode schaltfl?che einstellungen

Silverrain
12-11-2012, 05:23 PM
Vielen Dank! Dieser Schritt hat geklappt. Ich werd allerdings durch deine Erklärung nicht schlau. Ich habe es installiert und die Schriften sind alle sichtbar. Allerdings werden sie nicht Fehlerfrei dargestellt. Wenn ich unter Custom BB-Code reinschaue, sehe ich dort leider nix.. und auch die neuen Knöpfe im CKeditor kann ich nicht sehen.

Elite_360_
12-11-2012, 06:13 PM
Vielen Dank! Dieser Schritt hat geklappt. Ich werd allerdings durch deine Erkl?rung nicht schlau. Ich habe es installiert und die Schriften sind alle sichtbar. Allerdings werden sie nicht Fehlerfrei dargestellt. Wenn ich unter Custom BB-Code reinschaue, sehe ich dort leider nix.. und auch die neuen Kn?pfe im CKeditor kann ich nicht sehen.

i dont speech germen but i used google translate to read this can you show a screenshot?

Silverrain
12-12-2012, 03:16 PM
The fonts are all visible now thank you!. However, the Custom-BB-Code-Button in CKeditor will not show up. ... I cant see this on my Forum from your pictures.

BBcode:

http://s1.directupload.net/images/121212/kqm6pofk.png

CKeditor:

http://s1.directupload.net/images/121212/cqhcgsiz.png

Silverrain
12-12-2012, 03:24 PM
Adds 6 New BBcodes For Use and can use custom @font-face and @KeyFrame Effects
Adds an IE LeightBox Warning for IE 6,7,8 and 9 to upgrade browser or get Google Chrome Frame for IE 6,7,8 and 9.
(The LeightBox Warning only shows For IE 6,7,8 and 9 Unless the have Google Chrome Frame for IE)


I have installed it. But there are no Custom-BB-Codes :(

Elite_360_
12-12-2012, 03:44 PM
Adds 6 New BBcodes For Use and can use custom @font-face and @KeyFrame Effects
Adds an IE LeightBox Warning for IE 6,7,8 and 9 to upgrade browser or get Google Chrome Frame for IE 6,7,8 and 9.
(The LeightBox Warning only shows For IE 6,7,8 and 9 Unless the have Google Chrome Frame for IE)


I have installed it. But there are no Custom-BB-Codes :(

try to uninstall product-e360_font_face.xml then reinstall product-e360_font_face.xml

if that dont work do you have bbcode table in your database or is you database written in German?

Silverrain
12-12-2012, 04:00 PM
Hi there ! . I have tried to reinstall your product. But it dousn`t work :(

My Version of Vbulletin was in English. But i have used a German Language pack to translate all in German. I dont know if the Database is translated too, or just some Phrases. But i have many other Addons, and they are working too, so i dont know if thats the cause :(

I dont know what is going on :(

In my other post above, i have posted some pictures.

Elite_360_
12-12-2012, 04:05 PM
Hi there ! . I have tried to reinstall your product. But it dousn`t work :(

My Version of Vbulletin was in English. But i have used a German Language pack to translate all in German. I dont know if the Database is translated too, or just some Phrases. But i have many other Addons, and they are working too, so i dont know if thats the cause :(

I dont know what is going on :(

In my other post above, i have posted some pictures.

try to uninstall first product-e360_font_face.xml then reinstall product-e360_font_face.xml

Silverrain
12-12-2012, 04:10 PM
i have done this step , but nothing change :(

Elite_360_
12-12-2012, 04:20 PM
i have done this step , but nothing change :(

working on fix now im having that problem too will update asap

Elite_360_
12-12-2012, 04:47 PM
i have done this step , but nothing change :(
download the update v1.0.1
thanks for pointing out that the bbcode was not installing the install code was missing a comma in the code

Elite_360_
12-12-2012, 04:49 PM
Update to v1.0.1 fix bug bbcode was not installing

Silverrain
12-12-2012, 05:01 PM
Hello Elite 360!

Thank you for your efforts! and many thanks for this product :)

I will use it, if it works properly

Elite_360_
12-12-2012, 05:03 PM
Hello Elite 360!

Thank you for your efforts! and many thanks for this product :)

I will use it, if it works properly

yeah the update should fix your problem let me know if it fixies your problem

Silverrain
12-12-2012, 05:11 PM
ok i downloaded the newest version 1.0.1

but there arent any BB-Codes.

First i have uninstalled Version 1.0.0

Than i have installed Version 1.0.1

Fonts are working, but no Custom BB-codes.

Elite_360_
12-12-2012, 05:27 PM
ok i downloaded the newest version 1.0.1

but there arent any BB-Codes.

First i have uninstalled Version 1.0.0

Than i have installed Version 1.0.1

Fonts are working, but no Custom BB-codes.

did you Upload e360mods folder there new code in one of the php file

Silverrain
12-12-2012, 05:45 PM
ok now it is working :) but the BBcode seems not to work perfectly. But i will report later with screenshots.

But i am happy now that it works better :)

da prez
12-12-2012, 06:27 PM
Works good, just takes a few times to figure out each one, after that smooth sailin.

Thanks

Silverrain
12-15-2012, 02:10 AM
i have tested. and all works fine now! many Thanks ;)

Silverrain
12-17-2012, 09:10 PM
you can add as many fonts as you want as long as you upload the 4 font files for that font (eot,woff,ttf,svg) so it can work with all the different browser out there
you dont really even need this mod to upload new fonts you could just add the CSS to additional.css and it wil work just as the same you would need your CSS to point to the font file


Admincp > Styles & Templates > Style Manager > Your Style > Toolbar Men? Optionen (Wird in dem Dropdown BE) > um verf?gbare Fonts hinzuzuf?gen


Hello ! :)

Now all works fine, but i have a Question.

I wanted to install some new Fonts. I uploaded the eot,woff,ttf,svg and so on files into the folder Fonts and Custom Fonts. I have edited my Style and in CKeditor the Font is avaible. But if i want to write with this font... he dousnt show me the real font :(

Elite_360_
12-17-2012, 09:14 PM
Hello ! :)

Now all works fine, but i have a Question.

I wanted to install some new Fonts. I uploaded the eot,woff,ttf,svg and so on files into the folder Fonts and Custom Fonts. I have edited my Style and in CKeditor the Font is avaible. But if i want to write with this font... he dousnt show me the real font :(



@font-face {
font-family: 'Your Font Name';
src: url('e360mods/@font_face/custom_fonts/Your Font File Name.eot');
src: url('e360mods/@font_face/custom_fonts/Your Font File Name.eot?#iefix') format('embedded-opentype'),
url('e360mods/@font_face/custom_fonts/Your Font File Name.woff') format('woff'),
url('e360mods/@font_face/custom_fonts/Your Font File Name.ttf') format('truetype'),
url('e360mods/@font_face/custom_fonts/Your Font File Name.svg#Your Font File Name') format('svg');
font-weight: normal;
font-style: normal;
}

and add the CSS code above to the e360_at-ff-kf-additional.css template
(NOTE THIS IS AN EXAMPLE)

Silverrain
12-17-2012, 09:24 PM
i have discovered something.

If i have installed the font on my Computer... i can see the font in the Forum. But if i havent installed the font on my computer i can see the font only in Arial-like-font.

Edit: Did you know where to find the CSS?

Elite_360_
12-17-2012, 09:31 PM
i have discovered something.

If i have installed the font on my Computer... i can see the font in the Forum. But if i havent installed the font on my computer i can see the font only in Arial-like-font.

well if you write it like the Example i give you will not need the font(s) on your computer.

Elite_360_
12-17-2012, 09:33 PM
Edit: Did you know where to find the CSS?

e360_at-ff-kf-additional.css Template

Silverrain
12-17-2012, 09:33 PM
Pardon... i have edited my post. Thank you :)


I have found it... but it is like this!

http://s1.directupload.net/images/121217/f9tprm2x.png

Elite_360_
12-17-2012, 09:39 PM
Pardon... i have edited my post. Thank you :)


I have found it... but it is like this!

http://s1.directupload.net/images/121217/f9tprm2x.png

did you read post #27
https://vborg.vbsupport.ru/showpost.php?p=2391359&postcount=27

Silverrain
12-17-2012, 09:51 PM
I just wanted to know, if my CSS is ok, becouse it is near blank ^^

And yes i have read it :)

Elite_360_
12-17-2012, 09:53 PM
I just wanted to know, if my CSS is ok, becouse it is near blank ^^

that where your add your custom CSS for your @font-face (FONTS) and @keyframes (CSS3)

Silverrain
12-17-2012, 09:56 PM
yes i have done that. And all work well with the font. :)

Many thanks for your fast help!

Barbara1
01-21-2013, 10:52 PM
few questions i would like to make:
at first, everything is working fine, and no problems appeared. 4.2.0 pl3 here.

1) when posting, there is a big difference in size appearence between the default fonts of the editor and the sizes of the extra fonts.
size 7 arial for example is huge, but size 7 of the extra fonts provided by elite_360 as the customs fonts i added too, appear like size 4.
any ideas how to fix that?

2) at admincp > settings > user profile: customization options
should i enter something there also, or i leave it as it is?

thank you for your time guys.

Elite_360, your hack is amazing :)

Elite_360_
01-22-2013, 03:22 AM
few questions i would like to make:
at first, everything is working fine, and no problems appeared. 4.2.0 pl3 here.

1) when posting, there is a big difference in size appearence between the default fonts of the editor and the sizes of the extra fonts.
size 7 arial for example is huge, but size 7 of the extra fonts provided by elite_360 as the customs fonts i added too, appear like size 4.
any ideas how to fix that?

2) at admincp > settings > user profile: customization options
should i enter something there also, or i leave it as it is?

thank you for your time guys.

Elite_360, your hack is amazing :)

So the custom font's look smaller? Are you just using the font's without the bbcode's? Because i know some of the custom bbcode font Effect's i made a default size for them. i will have to look into it

Barbara1
01-23-2013, 06:36 AM
i am moving my old dbs to a 4.2.0 forum.
after using maintenance, the problem was fixed. i dont know if it has to do with that.
the thing is that everything looks ok now. strange...
but thank you for checking it out.

edit:
i would like also to ask you Elite_360 something else.
i am using for my users, the mgc chatbox evo >> https://vborg.vbsupport.ru/showthread.php?t=168992&highlight=mgc+chatbox+evo
your bbcode works perfectly. what i miss are the bbcode icons at the mgc bbcode icons area.
is there a posibility to add this maybe in a future release?

XGC Paravain
10-27-2013, 05:30 PM
When using NEONFX a small window pops up for NEONFX option?

XGC Paravain
10-27-2013, 06:05 PM
Not sure whats going on but some thing is not showing up right what did I do wrong on the Neon there is no outer glow and the rest are not showing the FX, But Flame FX seems to be fine

Elite_360_
10-27-2013, 08:30 PM
Not sure whats going on but some thing is not showing up right what did I do wrong on the Neon there is no outer glow and the rest are not showing the FX, But Flame FX seems to be fine

maybe you have an old version of "Comodo IceDragon" never heard of that browers just downloaded it and it work fine on my website

try a popular browser like IE10, Firefox, Chrome, Safari or Opera

XGC Paravain
10-27-2013, 08:35 PM
My desk top I have google Chrome and same thing here is the URL

http://armorgaming.com/showthread.php?627-6-New-Font-FX

XGC Paravain
10-27-2013, 08:52 PM
What are you doing to get the outer glow on the neon

also what is the small window that pops up "FX Options" What do I put in there?

XGC Paravain
10-27-2013, 08:55 PM
Oh I see what you did =red =5

Elite_360_
10-27-2013, 09:10 PM
Oh I see what you did =red =5

check your Posting Permissions and click on "BB code" is On
that will show you want options to use for the BB codes i world change some style vars in e360_FontFace

e360_outline_color to white

e360_neon_font_color i wold [Revert] back to white

XGC Paravain
10-27-2013, 09:28 PM
check your Posting Permissions and click on "BB code" is On
that will show you want options to use for the BB codes i world change some style vars in e360_FontFace

e360_outline_color to white

e360_neon_font_color i wold [Revert] back to white

Ok will do I switched them when it had no outer glow

XGC Paravain
10-27-2013, 09:33 PM
Yeah that looks better :D

justicechick
11-22-2013, 07:00 AM
Works well in 4.2.2 also ...Thanks bunches