Latest version 1.0.0

Download the latest version

Features

• Choose from more than 90 fonts
• Load only fonts you want to display
• Choose fonts directly from your admin panel
• Let your creativity run wild with Google fonts code tips

You can choose from more than 90 open source fonts.

How-to

IMPORTANT:
Please, do not forget to save settings each time you change them!

Installation

• Download the plugin from WordPress repository.
• Unzip and upload it to \wp-content\plugins\. Or you can go to the admin panel:
  • Plugins –> Add New
  • Type “ultimate google fonts” into the search field.
  • Install.
  • Go to the admin panel Settings->Utlimate Google Fonts.
  • That’s it. Now you can choose from more than 90 fonts directly from your admin panel!
  • Type in the field “Your CSS” your CSS code.

Examples of CSS text effects

Note, all texts are selectable.

1. This is a simple shadow.

CSS code for a simple shadow effect:

h4.ug-simpleshadow {
 font-family: 'Lobster', arial, serif;
 text-shadow: 2px 2px 2px #000; }

2. Burning letters…

CSS code for burning letter effect:

h4.ug-fire {
text-align: center;
background: #000;
color: #fff;
font-family: 'Lobster', arial, serif;
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200; }

3. Beautiful white text

CSS code for beautiful white text effect:

h4.ug-white {
 font-family: 'Lobster', arial, serif;
 text-shadow: 2px 2px 7px #111;
 color: #f5f5f5; }

4. Embossed text

CSS code for embossed text effect:

h4.ug-emboss {
font-family: 'Lobster', arial, serif;
text-align: center;
background: #ccc;
color: #ccc;
text-shadow: -1px -1px white, 1px 1px #333; }

5. Blurry text

CSS code for blurry text effect:

h4.ug-blurry {
text-align: center;
background: #000;
font-family: 'Lobster', arial, serif;
color: transparent;
text-shadow: #fff 0 0 5px; }

6. Stroked text

CSS code for stroked text effect:

h4.ug-stroked {
font-family: 'Lobster', arial, serif;
color:#00CCFF;
font-weight: bold;
text-shadow: 1px 1px 0px #000, -1px -1px 0px #000; }

7. 3D text

CSS code for 3D text effect:

h4.ug-threedee {
font-family: 'Lobster', arial, serif;
color:rgba(255,255,0,.7) ;
font-weight: bold;
text-shadow: 1px 1px rgba(255,128,0,.7), 2px 2px rgba(255,128,0,.7), 3px 3px rgba(255,128,0,.7), 4px 4px rgba(255,128,0,.7), 5px 5px rgba(255,128,0,.7); }

If you have any comments, suggestions or found a bug, please let me know. Share your customization of the fonts with us!

Plugin versions

1.0.0 2010/11/29 Initial release
Did you find this plugin useful?
Please, consider a small donation.
Thank you very much!

Latest version 1.3.1

Since version 1.3.0

I added 3 new options into the “general” section of the plugin options:

• Show slideshow on these single posts
• Show slideshow on these pages
• Show on archive pages

• If you need to load slideshow scripts on all pages, leave the input field empty.
• IMPORTANT:
  If you do NOT want to load slideshow scripts on any page at all, type in an unused page ID like 999999 or so. The same you can do with single posts.
• If you need to load slideshow scripts only on pages with IDs 10,20 and 35, you just have to type these values separated by comma into the input field of “Show slideshow on these pages”. So you should type in the values like:

  10,20,35
  

• The same you have to do if you want to load slideshow scripts only on certain single posts. Of course this time you have to type the values into the “Show slideshow on these single posts” input field.
• If you need to load slideshow scripts on the archive pages keep the option “Show on archive pages” checked.
• One more “Save settings” button was added below the options.

Features

• Upload images via plugin’s options panel
• Option to set loading of the slideshow scripts/styles only when you need them (since 1.3.0)
• Add title to each image
• Add destination URL to each image
• Choose from 27 transition effects
• Choose from 8 easing effects
• Set delay and length of the effect
• Set image dimensions
• Set CSS ID of the slideshow
• Choose Cufon font
• Easily add your own Cufon fonts
• Display arrow navigation
• Display numbered navigation
• Set position of the text
• Set color, gradient, shadow and background of the text.
• Implement your own CSS via admin panel
• XHTML valid

TODO

• Load scripts only on chosen pages/posts since 1.3.0
• Transparency fix for IE
• One more save button below settings since 1.3.0
• Random images loading option

How-to

IMPORTANT:
Please, do not forget to save settings each time you change them!

Installation

• Download the plugin from WordPress repository.
• Unzip and upload it to \wp-content\plugins\. Or you can go to the admin panel:
  • Plugins –> Add New
  • Type “all-in-one slideshow” into the search field.
  • Install.
  • Go to the admin panel Settings->All-In-One Slideshow.
  • That’s it. Now you can start playing with your new slideshow.

Widget and Code

There are 3 ways how to implement the slideshow on your page. You can use only one per page.
1. Widget

• Go to admin panel->appearance->widgets
• Drag All-In-One Slideshow widget to a widgetized area.

2. Shortcode
This is how the shortcode looks (without spaces!):

[ aio_slideshow ]

Simply add it to your post.
3. PHP function
This is how the function looks:

<?php aio_slideshow(); ?>

Images

• The image should be not smaller than the dimension you set in the admin panel. (The default dimensions of the image is 400×200 pixels.)
• Upload and delete your images via plugin’s option panel.
• In the same place you can set destination URL and title of the image
• If you have a problem with uploading of the images, please read carefully this post.

Adding new Cufon fonts

By default you can choose from 8 Cufonized fonts. If you want to add new fonts, please follow these steps:

• First you have to generate JavaScript file of your .otf, .ttf etc. font file. To generate this you have to go the Cufon generator.
• Upload the font into the /wp-content/plugins/all-in-one-slideshow/cufon/fonts folder.
• The file and fontFamily parameter will be automatically detected.
• Now you can choose your font in the option general->font.

If you have any comments, suggestions or found a bug, please let me know. I’ll be more than happy if you share your All-In-One slideshow with us!
P.S. Don’t be afraid to experiment. In worst case you can use “Reset Settings” button at the left bottom corner.

Plugin versions

1.0.0 2010/11/29 Initial release
1.1.0 2010/11/29 minor fix
1.2.0 2010/12/01 conflict with custom menus solved.
1.2.1 2010/12/02 identifier #nav changed to #aio-nav, added upload tutorial.

Did you find this plugin useful?
Please, consider a small donation.
Thank you very much!

Latest version 1.0.1

Download the latest version

Features

• Web 2.0 graphics
• Plugin outputs XHTML valid code
• Change sizes of the video comfortably through widget panel
• Easily customizable CSS
• Add up to 20 videos

You can add up to 20 videos. Music, tutorials, ads or whatever you want.

How-to

• Download plugin from WordPress repository.
• Unzip and upload it to \wp-content\plugins\. Or you can go to the admin panel:
  • Plugins –> Add New
  • Type “advanced videobox” into the search field.
  • Install.
• Drag the widget instance to the widget panel of your choice
• Choose number of videos and SAVE widget to see correct number of the input fields.
• Add width and height of the videos
• Add title and code for each video
• If you want to display customized video player, you have to check “Enable parameters”. Don’t do that if you want to keep code of the video XHTML valid.

Did you find this plugin useful?
Please, consider a small donation.
Thank you very much!

Latest version 1.1.1

Download the latest version

Features

• Easy to use
• Automatic detection of the uploaded fonts
• Preview of the uploaded fonts
• Automatic detection of the fontFamily parameter
• Option to enable only font you really want to use
• Code tips

All-In-One Cufon admin panel with code tips, fonts preview and field where you set your font.

TODO

• Display size of .js file
• Display one test line with all fonts together

How-to

• Download plugin from WordPress repository.
• Unzip and upload it to \wp-content\plugins\. Or you can go to the admin panel:
  • Plugins –> Add New
  • Type “all-in-one cufon” into the search field.
  • Install.
  • First you have to generate JavaScript file of your .otf, .ttf etc. font file. To generate this you have to go the Cufon generator.
    Make sure the EULA of the font permits web embedding.
• Create a folder called /cufon-fonts/ in the wp-content/plugins/ directory, where you need to upload your generated font .js files.
• When you’re done, just go the admin panel: Settings–>All-In-One Cufon
• There you will instantly see fonts that were detected in your \wp-content\plugins\cufon-fonts\ folder.
• Enable fonts you wish to use.
• The last step is adding the Cufón code.

Adding Cufon code

Add Cufon code to the Cufon’s code field. Basic code for replacing h2 element looks like this:

Cufon.replace('h2');

For more complex element you can use code like this:

Cufon.replace('#top-menu.menu');

1. Add gradient to the font:

Cufon.replace('.cufon-gradient', {
                	color: '-linear-gradient(red, blue)'
                    });

2. Add shadow to the font:

Cufon.replace('.cufon-shadow', {
                    textShadow: '2px 2px red'
                    });

3. Add gradient and shadow to the font:

Cufon.replace('.cufon-gradient-shadow', {
                	color: '-linear-gradient(blue, yellow)',
                        textShadow: '2px 2px #C0C0C0'
                    });

4. Add gradient and shadow to a link:

Cufon.replace('a.cufon-gradient-shadow-link', {
                	color: '-linear-gradient(#FF9900, #000000)',
                    textShadow: '2px 2px #C0C0C0',
                    hover: {
		textShadow: '2px 2px #C0C0C0',
		color: '-linear-gradient(#99CC00, #000000)'
	}
                    });

Cufon can apply gradient and shadow to links.

5. Set font, gradient and hover.

Cufon.replace('a.cufon-easy', {
                    fontFamily: 'Sketch Rockwell',
                    color: '-linear-gradient(#FF6600, #33CCCC)',
                    hover: {
            		textShadow: '2px 2px red',
            		color: '-linear-gradient(black, white)'
	}

Cufon is easy to set up.

6. Add gradient, shadow and transparency to a shadow:

Cufon.replace('a.cufon-transparent', {
                	color: '-linear-gradient(#FFFFFF, #99CCFF)',
                    textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
                    hover: {
		textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
		color: '-linear-gradient(#FFFFFF, #969696)'
	}
                    });

CSS code

.cufon-transparent { display: block; font-size: 40px; background: url(images/cufon-bg.jpg) repeat; }

Cufon can work with transparency in links.

You can find much more info on this amazing script on the official Cufón’s pages.
They also have active forum, where you can ask all your questions regarding Cufón.

Did you find this plugin useful?
Please, consider a small donation.
Thank you very much!

Latest version 0.9.1

Download the latest version

Features

• Plugin outputs XHTML valid code
• Change sizes of the video comfortably through widget panel
• Due to WP widget architecture you can add unlimited number of the widget instances

How-to

• Download plugin from WordPress repository.
• Unzip and upload it to \wp-content\plugins\. Or you can go to the admin panel:
  • Plugins –> Add New
  • Type “youtube videobox” into the search field.
  • Install.
• Drag the widget instance to the widget panel of your choice
• Add width, height and code of the video
• If you want to display customized video player, you have to tick “Enable parameters”. Don’t do that if you want to keep code of the video XHTML valid.

Create widgets and put your videos anywhere

Adding widgets is not limited only to sidebar. You can widgetize any part of your site. It’s incredibly easy!
This is CSS of the widget. Note that width of the widget is set to auto. This allows using setting different sizes of the video without setting new sizes of the widget in CSS.

.widget            { width: auto; margin: 0px 0 10px 0; }
.widget p          { padding: 10px 10px 10px 10px; }

In functions.php you have to register your sidebar:

<?php
if (function_exists('register_sidebar')) {
//Video widget 1
    register_sidebar(array(
    'before_widget' => '<div id="%1$s" class="%2$s widget">',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
    'after_widget' => '</div>',
    'name' => Video widget 1));
//Video widget 2
    register_sidebar(array(
    'before_widget' => '<div id="%1$s" class="%2$s widget">',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
    'after_widget' => '</div>',
    'name' => Video widget 2));
}
?>

The last thing we have to do is add widgets to our code.
Video widget 1 in the footer:

<div id="footer">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Video widget 1')): else : ?>
<!-- some code -->
<?php endif; ?>
</div>

..and Video widget 2 in the sidebar:

<div id="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Video widget 2')): else : ?>
<!-- some code -->
<?php endif; ?>
</div>

Did you find this plugin useful?
Please, consider a small donation.
Thank you very much!