Wordpress fan's blog

All-In-One Cufon plugin allows you easy replacement of standard fonts with beautiful catchy fonts.
The plugin implements Simo Kinnunen’s Cufón script which aspires to become a worthy alternative to sIFR.

Latest version 1.0

Download

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

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.
• The first you have to generate JavaScript file of your font .otf, .ttf etc. font file. To generate this you have to go the Cufon generator.
  Make sure the fonts EULA of the font allow web embedding.
• Create folder /cufon-fonts/ in wp-content/plugins/ where you have to upload your generated font .js files.
• When done, just go the admin panel: Settings–>All-In-One Cufon
• There you should see fonts that were detected in your \wp-content\plugins\cufon-fonts\ folder.
• Enable fonts you want to use.
• The last step is adding Cufón code.

Adding Cufon code

You add Cufon code to the Cufon 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 gradient and shadow in 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 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 your questions regarding Cufón.

Buy me a beer

With Youtube Videobox plugin you can add unlimited number of videos to your site in a painless way. All you need is to copy and paste code of the video into the Youtube Videobox widget.
The original video code from Youtube doesn’t pass W3C validation. My filtered video code will keep your site XHTML valid. Of course only in case the site was valid beforehand .

Latest version 0.9.1

Download

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.
  

  In the your youtube.com, click the wheel and play around with the colors of the player.

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>

Buy me a beer

This site is a sequel of SramekDesign.com blog.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>
            <?php bloginfo('name'); ?>
            <?php wp_title(); ?>
        </title>
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <meta name="robots" content="all" />
        <!-- leave this for stats please -->
        <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
        <meta name="keywords" content="<?php bloginfo('name'); /* use  your own keywords  */ ?>" />
        <meta name="description" content="<?php bloginfo('description'); ?>" />
        <meta name="language" content="en>" />

        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
        <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
        <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />