The Arcive of Official vBulletin Modifications Site.

@font-face & @keyframes · **Released**: 12-06-2012

Mark As Installed = Support
will be compatible with
e360 - Username Html MarkUp 4.x.x Version 1.2.0
and e360 - Username Prefix with Html MarkUp (Clan Tags) 4.x.x Version 1.2.0

For Version Information And Features for Next Version: Go to Post #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

HTML Code:

<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

HTML Code:

<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

HTML Code:

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

You Can Read more about Google Chrome Frame Here

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) 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)

PHP Code:


			
/* 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)

PHP Code:


			


@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_ · #32 12-17-2012, 09:33 PM

Quote:

Originally Posted by Silverrain

Edit: Did you know where to find the CSS?

e360_at-ff-kf-additional.css Template

Elite_360_ · #33 12-17-2012, 09:39 PM

Quote:

Originally Posted by Silverrain

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....9&postcount=27

Silverrain · #34 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_ · #35 12-17-2012, 09:53 PM

Quote:

Originally Posted by Silverrain

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 · #36 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 · #37 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_ · #38 01-22-2013, 03:22 AM

Quote:

Originally Posted by Barbara1

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 · #39 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/showthrea...gc+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 · #40 10-27-2013, 05:30 PM

When using NEONFX a small window pops up for NEONFX option?

XGC Paravain · #41 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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05074 seconds Memory Usage 2,380KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (3)bbcode_html (2)bbcode_php (4)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (3)pagenav_pagelink (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (9)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!