function wpcufon_settings_page() { ?> <!-- Messages --> <?php if (!empty($_POST)) { ?> <div id="message" class="updated fade"><p><strong><?php _e('Options saved.'); ?> </strong></p></div> <?php } ?> <?php if (!is_dir(WP_PLUGIN_DIR . "/fonts")) { ?> <div id="message" class="updated fade"><p><strong>Please create the /fonts/ Directory in /wp-content/plugins/</strong></p></div> <?php } ?> <div class="wrap"> <h2>Cufón Administration</h2> <div class="narrow"> This Plugin enables Cufón in your WordPress Blog. (<a href="http://wiki.github.com/sorccu/cufon" target="_blank">More Info</a>)<br /> </p> <p> </p> <h3>How to generate & activate the fonts</h3> <ul> <li><small>First you have to convert your font-file (.ttf, .otf) into a Cufón compatible format.<br />You can do this by using Cufón's own generator at <a href="http://cufon.shoqolate.com/generate/" target="_blank">http://cufon.shoqolate.com/generate/</a></small></li> <li><small>In the next step you must create the directory /fonts/ in /wp-content/plugins </small></li> <li><small>Then upload your <em>.font.js</em> font-files to <span class="code">/wp-content/plugins/fonts/</span><br />The Plugin will recognize your uploaded fonts and activate them.</small> </li> <li><small>You can move the "Vegur" Fontfile from /examples/ to your new ../fonts/ directory for testing!</small></li> <li><small>If your font doesn't get recognized check the exact font-family FontName in your fontfile and set it right in your replacement code!<br />Check the first line in your font.js file to get the fontName (see <b>bold</b> example below).</small></li> <li><small>Example: (in a font.js file) <span class="code">Cufon.registerFont({"w":205,"face":{"font-family":"<b>Vegur Bold</b>", ...</span></li> </ul> <p> </p> <h3>Your Fonts</h3> <?php wpcufon_set_font(); ?> <p> </p> <h3>Set the font-replacements</h3> <small> <b>Easy Example:</b><br /> <span class="code"> Cufon.replace('h1', { fontFamily: 'Vegur' }); </span> <br /><br /> <b>Replace with different fonts:</b><br /> <span class="code"> Cufon.replace('h1', { fontFamily: 'Vegur' });<br /> Cufon.replace('h2', { fontFamily: 'Vollkorn Heavy Condensed' }); </span> <br /><br /> <b>Access via JavaScript frameworks: (e.g. jQuery needs to be enabled)</b><br /> <span class="code"> Cufon.replace('#your_div_id > h1:first-child', { fontFamily: 'FontName With Spaces' });<br /> Cufon.replace('#your_div_id a', { fontFamily: 'FontName' });<br /> Cufon.replace('#your_div_id', { fontFamily: 'FontName-Medium' }); </span> <br /><br /> <b>Another Example now with Cufon.set fontFamily</b><br /> <span class="code"> Cufon.set('fontFamily', 'Vegur');<br /> Cufon.replace('#blog-title a', { hover: true });<br /> Cufon.replace('.menu a', { hover: true, fontWeight: '800' });<br /> Cufon.replace('.aside h3');<br /> Cufon.replace('h1.page-title' , { fontWeight: '400' });<br /> Cufon.replace('h1.entry-title', { fontWeight: '400' });<br /> Cufon.replace('h2.entry-title', { fontWeight: '400', hover: true });<br /> </span> » <a href="http://wiki.github.com/sorccu/cufon/styling" target="_blank">Get more styling hints</a> </small> <br /><br /> <?php wpcufon_set_font_replacements(); ?> </div><!-- narrow --> </div><!-- wrap --> <?php }
function wpcufon_settings_page() { ?> <!-- Messages --> <?php if (!empty($_POST)) { ?> <div id="message" class="updated fade"><p><strong><?php _e('Options saved.'); ?> </strong></p></div> <?php } ?> <?php if (!is_dir(WP_PLUGIN_DIR . "/fonts")) { ?> <div id="message" class="updated fade"><p><strong>Please create the /fonts/ Directory in /wp-content/plugins/</strong></p></div> <?php } ?> <div class="wrap"> <h2>Cufón Administration</h2> <div class="narrow"> This Plugin enables <a href="http://wiki.github.com/sorccu/cufon" target="_blank">Cufón</a> in your WordPress Blog.<br /> </p> <h3>--<br />Tutorial</h3> <img src="<?php echo WP_PLUGIN_URL; ?> /wp-cufon/help.png" align="bottom" /> <a href="javascript:void(0);" id="tutorial_button">Show Tutorial</a><br /><br /> <div id="tutorial"> <h3>How to generate & activate the fonts</h3> <ul style="list-style:outside; list-style-type:disc;padding-left:15px;"> <li><small>First you have to convert your font-file (.ttf, .otf) into a Cufón compatible format.<br />You can do this by using Cufón's own generator at <a href="http://cufon.shoqolate.com/generate/" target="_blank">http://cufon.shoqolate.com/generate/</a></small></li> <li><small>In the next step you must create the directory /fonts/ in /wp-content/plugins </small></li> <li><small>Then upload your <em>.font.js</em> font-files to <span class="code">/wp-content/plugins/fonts/</span><br />The Plugin will recognize your uploaded fonts and activate them.</small> </li> <li><small>You can move the "Vegur" Fontfile from /examples/ to your new ../fonts/ directory for testing!</small></li> <li><small>If your font doesn't get recognized check the exact font-family FontName in your fontfile and set it right in your replacement code!<br />Check the first line in your font.js file to get the fontName (see <b>bold</b> example below).</small></li> <li><small>Example: (in a font.js file) <span class="code">Cufon.registerFont({"w":205,"face":{"font-family":"<b>Vegur Bold</b>", ...</span></small></li> </ul> <p> </p> <h3>Set the font-replacements</h3> <small> <b>Easy Example:</b><br /> <span class="code"> Cufon.set('fontFamily', 'Amaze').replace('h1')('h2'); </span> <br /><br /> <b>Replace with different fonts:</b><br /> <span class="code"> Cufon.set('fontFamily', 'NiftyFont');<br /><br /> Cufon.replace('#welcome');<br /> Cufon.replace('#sidebar h2');<br /> Cufon.replace('#content .title');<br /><br /> Cufon.set('fontFamily', 'AnotherNiceFont');<br /> Cufon.replace('h4');<br /> Cufon.replace('.quote');<br /> Cufon.replace('#message'); </span> <br /><br /> <b>Access via JavaScript frameworks: (e.g. jQuery needs to be enabled)</b><br /> <span class="code"> Cufon.replace('#your_div_id > h1:first-child', { fontFamily: 'FontName With Spaces' });<br /> Cufon.replace('#your_div_id a', { fontFamily: 'FontName' });<br /> Cufon.replace('#your_div_id', { fontFamily: 'FontName-Medium' }); </span> <br /><br /> <b>Other Examples:</b><br /> <span class="code"> Cufon.set('fontFamily', 'Vegur');<br /> Cufon.replace('#blog-title a', { hover: true });<br /> Cufon.replace('.menu a', { hover: true, fontWeight: '800' });<br /> Cufon.replace('.aside h3');<br /> Cufon.replace('h1.page-title' , { fontWeight: '400' });<br /> Cufon.replace('h1.entry-title', { fontWeight: '400' });<br /> Cufon.replace('h2.entry-title', { fontWeight: '400', hover: true });<br /> </span> » <a href="http://wiki.github.com/sorccu/cufon/styling" target="_blank">Get more styling hints</a> <br /> <br /> <span style="color:red;">» If nothing works try to rename your font.js file and your font-family string to the same name and don't use any blanks!</span> <br /> » For questions about Cufón please visit the <a href="http://groups.google.com/group/cufon" target="_blank">Google Group!</a> <br /><br /> » Please do not use copyrighted fonts! <br /> » Cufón is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License" target="_blank">MIT license</a> by Simo Kinnunen. </small> </div> <!-- /tutorial --> <h3>--<br />Your Fonts</h3> <?php wpcufon_get_fonts(); ?> <p> </p> <?php wpcufon_set_font_replacements(); ?> </div><!-- narrow --> </div><!-- wrap --> <?php }