CINXE.COM

<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>bavotasan.com</title> <atom:link href="http://bavotasan.com/feed/" rel="self" type="application/rss+xml" /> <link>http://bavotasan.com</link> <description>by c.bavota</description> <lastBuildDate>Wed, 17 Nov 2010 16:33:01 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.0.1</generator> <item> <title>Magazine Premium v1.1.5 is Out!</title> <link>http://bavotasan.com/articles/magazine-premium-is-out/</link> <comments>http://bavotasan.com/articles/magazine-premium-is-out/#comments</comments> <pubDate>Wed, 17 Nov 2010 14:02:12 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[action]]></category> <category><![CDATA[Forum]]></category> <category><![CDATA[look]]></category> <category><![CDATA[magazine]]></category> <category><![CDATA[point]]></category> <category><![CDATA[premium]]></category> <category><![CDATA[support]]></category> <category><![CDATA[Support Forum]]></category> <category><![CDATA[WordPress]]></category> <category><![CDATA[Wordpress Theme]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=1692</guid> <description><![CDATA[Just finished with some major updates to Magazine Premium. Check out the changelog to see exactly what you can expect. Or take a look at the demo to see it in action. If you have any questions, please ask them in the Support Forum.]]></description> <content:encoded><![CDATA[Just finished with some major updates to <a href="http://themes.bavotasan.com/our-themes/premium-themes/magazine-premium">Magazine Premium</a>. Check out the changelog to see exactly what you can expect. Or take a look at the <a href="http://demos.bavotasan.com/?wptheme=Magazine%20Premium">demo</a> to see it in action. If you have any questions, please ask them in the <a href="http://themes.bavotasan.com/support/">Support Forum</a>. <a href="http://themes.bavotasan.com/our-themes/premium-themes/magazine-premium"><img src="http://bavotasan.com/wp-content/uploads/2010/01/magpremfinal-464x1023.jpg" alt="" title="magpremfinal" width="464" height="1023" class="aligncenter size-large wp-image-1693" /></a> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/magazine-premium-is-out/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item> <title>A New Look for Themes by bavotasan.com</title> <link>http://bavotasan.com/articles/a-new-look-for-themes-by-bavotasan-com/</link> <comments>http://bavotasan.com/articles/a-new-look-for-themes-by-bavotasan-com/#comments</comments> <pubDate>Mon, 15 Nov 2010 16:08:27 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[css3]]></category> <category><![CDATA[Forum]]></category> <category><![CDATA[premium themes]]></category> <category><![CDATA[redesign]]></category> <category><![CDATA[Support Forum]]></category> <category><![CDATA[themes by bavotasan.com]]></category> <category><![CDATA[vanilla]]></category> <category><![CDATA[WordPress]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2982</guid> <description><![CDATA[It took a while but I finally completed the new look for Themes by bavotasan.com. I felt like the old design wasn’t up to snuff and wanted to include as much CSS3 as I could to show off just how cool your site can look in a modern browser. Sadly, those using IE will not [...]]]></description> <content:encoded><![CDATA[It took a while but I finally completed the new look for <a href="http://themes.bavotasan.com">Themes by bavotasan.com</a>. I felt like the old design wasn’t up to snuff and wanted to include as much CSS3 as I could to show off just how cool your site can look in a modern browser. Sadly, those using IE will not be able to experience all the shadows and rounded corners, but that’s what you get when you use inferior browsers (that right, I said it!). <div id="attachment_2983" class="wp-caption aligncenter" style="width: 560px"><img src="http://bavotasan.com/wp-content/uploads/2010/11/themesby.jpg" alt="" title="themesby" width="550" height="1047" class="size-full wp-image-2983" />The new look for Themes by bavotasan.com</div> I think the most important improvement with this new design is a whole new forum. I started to fiddle around with the idea of using a new software for my forum after meeting the guys from Vanilla at WordCamp Montreal this past summer. They seemed very keen on WordPress integration and their software looked amazing. <div id="attachment_2984" class="wp-caption aligncenter" style="width: 560px"><img src="http://bavotasan.com/wp-content/uploads/2010/11/supportforum.jpg" alt="" title="supportforum" width="550" height="815" class="size-full wp-image-2984" />The new forum powered by Vanilla </div> It took a little bit of time for me to crack the inner workings of Vanilla but I was able to get it working the way I wanted it to and so far I really like it. Hopefully all of my forum members will like it as well. As always, I am totally open to any feedback you might have in regards to the new design and forum so feel free to send some emails my way. ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/a-new-look-for-themes-by-bavotasan-com/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>My First Vanilla Plugin</title> <link>http://bavotasan.com/downloads/my-first-vanilla-plugin/</link> <comments>http://bavotasan.com/downloads/my-first-vanilla-plugin/#comments</comments> <pubDate>Tue, 09 Nov 2010 19:22:42 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Downloads]]></category> <category><![CDATA[download]]></category> <category><![CDATA[Forum]]></category> <category><![CDATA[jquery]]></category> <category><![CDATA[plugin]]></category> <category><![CDATA[support]]></category> <category><![CDATA[Support Forum]]></category> <category><![CDATA[vanilla]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2969</guid> <description><![CDATA[I have been fiddling around with Vanilla lately to prepare my support forum for a migrating over from bbPress. Vanilla is great and it offers tons of useful options that blow bbPress out of the water. Plus, it’s based in Montreal and I recently got to know the people behind it and they are totally [...]]]></description> <content:encoded><![CDATA[<img src="http://bavotasan.com/wp-content/uploads/2010/11/Vanilla.jpg" alt="" title="Vanilla" width="200" height="150" class="alignright size-full wp-image-2970" />I have been fiddling around with <a href="http://vanillaforums.org/">Vanilla</a> lately to prepare my support forum for a migrating over from <a href="http://bbpress.org/">bbPress</a>. Vanilla is great and it offers tons of useful options that blow bbPress out of the water. Plus, it’s based in Montreal and I recently got to know the people behind it and they are totally awesome. The learning curve on Vanilla is a little steep compared to bbPress, especially if you are unfamiliar with object oriented programming, but it is worth diving into. It took me a bit of time to wrap my head around it all but I managed to put together my first plugin to contribute back to the community. In my support forum, I am often including code snippets to show exactly how to mod a file, and I like to have these snippets formatted a certain way. I prefer to use <a href="http://qbnz.com/highlighter/">GeSHi</a> to highlight my code so that it is easier to read and I don’t have to rely on a lot of extra JavaScript files. My first plugin allows Vanilla users to input code snippets using GeSHi by including their code between <pre> </pre> tag. Here’s a screenshot to show you how it looks when you hover over a code snippet. <div id="attachment_2971" class="wp-caption aligncenter" style="width: 560px"><img src="http://bavotasan.com/wp-content/uploads/2010/11/geshitest.jpg" alt="" title="geshitest" width="550" height="318" class="size-full wp-image-2971" />A sign of things to come in the Support Forum</div> I’ve included a small piece of jQuery to expand the code box, similar to how it functions on this site. I’ve just uploaded the plugin to Vanilla so you can download it from there. Let me know if you have any questions or commeents. ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/downloads/my-first-vanilla-plugin/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item> <title>Add a Copyright Notice to Copied Text</title> <link>http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/</link> <comments>http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/#comments</comments> <pubDate>Mon, 01 Nov 2010 19:17:47 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[clipboard]]></category> <category><![CDATA[copy]]></category> <category><![CDATA[copyright]]></category> <category><![CDATA[getSelection]]></category> <category><![CDATA[Javascript]]></category> <category><![CDATA[paste]]></category> <category><![CDATA[text]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2943</guid> <description><![CDATA[I was checking out the CBC website and I noticed that if you copy and paste any text from the site a reference link appears at the bottom, indicating the source. I thought that was kind of neat and tried to figure out how to do it. Turns out, they use a service called Tynt. [...]]]></description> <content:encoded><![CDATA[I was checking out the <a href="http://cbc.ca/">CBC</a> website and I noticed that if you copy and paste any text from the site a reference link appears at the bottom, indicating the source. I thought that was kind of neat and tried to figure out how to do it. Turns out, they use a service called <a href="http://www.tynt.com/">Tynt</a>. That’s cool and all, but I wanted to see if I could make it happen using JavaScript. All I needed my function to do was grab the copied selection, tack on a copyright notice and then add the two to the clipboard. It took a lot of messing around and I was finally able to put something together that worked in most browsers. Sorry IE people, this one won’t work for you, though if anyone figures out a fix for IE let me know. Then the function will work for all major browsers. Here is the JavaScript: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><script type="text/javascript"> function addLink() { var body_element = document.getElementsByTagName('body')[0]; var selection; selection = window.getSelection(); var pagelink = " Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a> Copyright &copy; c.bavota"; // change this if you want var copytext = selection + pagelink; var newdiv = document.createElement('div'); newdiv.style.position='absolute'; newdiv.style.left='-99999px'; body_element.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv); window.setTimeout(function() { body_element.removeChild(newdiv); },0); } document.oncopy = addLink; </script></pre></div></td></tr></table></div> Just add this between your page’s head tags, and change the copyright notice to whatever you want. <h3>Demo</h3> To test it out, copy something from the paragraph below and paste it into your favorite text editor. <div id="testp" style="padding: 10px; background: #eee; border: 1px solid #ccc; font-size: 12px; line-height: 16px;"> Aenean vel massa tellus. Aliquam imperdiet ante a justo luctus et bibendum erat porta. Morbi varius, erat et cursus ornare, elit augue bibendum leo, sed imperdiet nulla risus ut ipsum. Maecenas laoreet neque vitae magna porta sed euismod urna ornare. Nulla facilisi. Maecenas congue ligula eu arcu rhoncus volutpat. Etiam pretium pulvinar sapien, et ultrices augue euismod sagittis. Pellentesque sodales, velit tempor pharetra ultricies, lacus odio mattis ligula, vel sollicitudin erat nisl sed nisi. Pellentesque vestibulum suscipit libero, sit amet scelerisque purus aliquam vulputate. Etiam semper mauris ac felis convallis volutpat dictum ante placerat. Proin tempus elementum nisl ac eleifend. In hac habitasse platea dictumst. Duis et neque at mi lacinia luctus non ut neque. Praesent mollis metus at quam ornare bibendum. Cras augue tortor, tempor vitae adipiscing at, pulvinar vel massa. Curabitur et orci massa, sit amet malesuada diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae orci id lectus convallis tempus vel quis mauris. </div> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/feed/</wfw:commentRss> <slash:comments>8</slash:comments> </item> <item> <title>Meta Descriptions for WordPress</title> <link>http://bavotasan.com/tutorials/meta-descriptions-wordpress/</link> <comments>http://bavotasan.com/tutorials/meta-descriptions-wordpress/#comments</comments> <pubDate>Sat, 30 Oct 2010 05:30:44 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[header]]></category> <category><![CDATA[Meta]]></category> <category><![CDATA[meta description]]></category> <category><![CDATA[meta tags]]></category> <category><![CDATA[posts]]></category> <category><![CDATA[search engine]]></category> <category><![CDATA[seo]]></category> <category><![CDATA[WordPress]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2931</guid> <description><![CDATA[A very important thing to pay attention to when optimizing your site for search engine ranking is creating unique pages meta descriptions for all of the pages on your website that you want to have indexed. If you take a look on Google, or any search engine, you will see a blurb about your page [...]]]></description> <content:encoded><![CDATA[A very important thing to pay attention to when optimizing your site for search engine ranking is creating unique pages meta descriptions for all of the pages on your website that you want to have indexed. If you take a look on Google, or any search engine, you will see a blurb about your page beneath the page title. This little bit of text is taken for the text your page has in the meta description tag. No text, no blurb on Google, and possibly no indexing whatsoever. <div id="attachment_2932" class="wp-caption aligncenter" style="width: 574px"><img src="http://bavotasan.com/wp-content/uploads/2010/10/googledesc.png" alt="Google Example" title="googledesc" width="564" height="90" class="size-full wp-image-2932" />Page description in Google</div> Having a unique title for each page is important, but what is more important is making sure that the description for your page is just as unique and relevant. The great thing about WordPress is that you can use some basic functions to put together a little script that would create a meta description dynamically for each of your pages. I encountered a few issues trying to put this script together due to the fact that some plugins actually hook into <code>the_content()</code> or <code>the_excerpt()</code> and this causes a lot of issues. The final solution I came up with is below. Just add the following to your <code>functions.php</code> file within the PHP tags: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">function dynamic_meta_description() { $rawcontent = get_the_content(); if(empty($rawcontent)) { $rawcontent = htmlentities(bloginfo('description')); } else { $rawcontent = apply_filters('the_content_rss', strip_tags($rawcontent)); $rawcontent = preg_replace('/\[.+\]/','', $rawcontent); $chars = array("", "\n", "\r", "chr(13)", "\t", "\0", "\x0B"); $rawcontent = htmlentities(str_replace($chars, " ", $rawcontent)); } if (strlen($rawcontent) < 155) { echo $rawcontent; } else { $desc = substr($rawcontent,0,155); return $desc; } }</pre></div></td></tr></table></div> This little script grabs the raw content using <code>get_the_content()</code>, then it applies some filters and removes shortcodes, tags and line breaks. Once that is done, it limits the description to 155 characters if it is too long. Finally it returns the description, formatted exactly how you need it to be. Next all we need to do is add a line to the <code>header.php</code> between the head tags. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><meta name="description" content="<?php echo dynamic_meta_description(); ?>" /></pre></div></td></tr></table></div> If a meta description line already exists, you can replace it with this. Now all of your pages will have a unique meta description, and those that don’t will have your default site description, which you set up in your wp-admin under your General Settings. ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/meta-descriptions-wordpress/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item> <title>Delete Duplicate Posts Pro WordPress Plugin</title> <link>http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/</link> <comments>http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/#comments</comments> <pubDate>Wed, 27 Oct 2010 16:43:25 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Downloads]]></category> <category><![CDATA[dashboard widget]]></category> <category><![CDATA[delete duplicates]]></category> <category><![CDATA[duplicate posts]]></category> <category><![CDATA[plugin]]></category> <category><![CDATA[premium plugin]]></category> <category><![CDATA[WordPress plugin]]></category> <category><![CDATA[wpdb]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=685</guid> <description><![CDATA[I just updated this plugin for WordPress 3.0. I also simplified the manual cron process. If you have any questions post them in the support forum. What exactly does this plugin do? Let’s say, hypothetically, you have a website that gathers news from RSS feeds with some sort of parser. Sometimes, for whatever reason, you [...]]]></description> <content:encoded><![CDATA[I just updated this plugin for WordPress 3.0. I also simplified the manual cron process. If you have any questions post them in the support forum. <h3>What exactly does this plugin do?</h3> Let’s say, hypothetically, you have a website that gathers news from RSS feeds with some sort of parser. Sometimes, for whatever reason, you might get multiple versions of the same post. Delete Duplicate Posts Pro WordPress plugin to the rescue. This plugin offers the ability to manually list all dupes and then delete them. Or you can activate a daily WordPress cron to make it happen automatically. Advanced users even have the ability to setup their own cron, for more control. <a class="highslide" href="http://bavotasan.com/wp-content/uploads/2009/06/Picture-11.png"><img src="http://bavotasan.com/wp-content/uploads/2009/06/Picture-11-200x149.png" alt="Picture-1" title="Picture-1" width="200" height="149" class="alignleft size-thumbnail wp-image-763" /></a><a class="highslide" href="http://bavotasan.com/wp-content/uploads/2009/06/Picture-21.png"><img src="http://bavotasan.com/wp-content/uploads/2009/06/Picture-21-200x182.png" alt="Picture-2" title="Picture-2" width="200" height="182" class="alignleft size-thumbnail wp-image-764" /></a> <hr style="height:0;border:0;width:100%;clear:both;float;left;" /> This plugin can really help you out if you are using auto-blogging plugins like Wp-O-Matic, FeedWordPress and Autoblogged. A single site license costs only $19.77 for lifetime use. All updates are yours for free. Delete Duplicate Posts Pro is designed for WordPress 3.0. It has been tested on older versions and does work but many extra features, like the Dashboard widget, might not function properly. Click the “Buy” button below to purchase a single site license. Be sure to click back after completing the purchase to download the plugin and get your activation code. NOTE: You don’t need a PayPal account to make a purchase. Just look near the bottom left after you click the “Buy” button for the “Don’t Have a PayPal account” link. You will not need to create an account, you will just need to enter your CC info. No refunds available. ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/feed/</wfw:commentRss> <slash:comments>80</slash:comments> </item> <item> <title>Turning On PHP Errors</title> <link>http://bavotasan.com/tutorials/turning-on-php-errors/</link> <comments>http://bavotasan.com/tutorials/turning-on-php-errors/#comments</comments> <pubDate>Mon, 18 Oct 2010 22:40:08 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[.htaccess]]></category> <category><![CDATA[Php]]></category> <category><![CDATA[php errors]]></category> <category><![CDATA[php.ini]]></category> <category><![CDATA[testing]]></category> <category><![CDATA[testing environment]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2913</guid> <description><![CDATA[For security reasons, most web servers have PHP errors turned off. This makes sense on live sites since you really wouldn’t want people to see all your root paths if something went wrong. But what if you want to create a testing environment, then turning on PHP errors would be invaluable. If you have access [...]]]></description> <content:encoded><![CDATA[<img src="http://bavotasan.com/wp-content/uploads/2010/10/phperror.jpg" alt="PHP Errors" title="phperror" width="200" height="150" class="alignright size-full wp-image-2922" />For security reasons, most web servers have PHP errors turned off. This makes sense on live sites since you really wouldn’t want people to see all your root paths if something went wrong. But what if you want to create a testing environment, then turning on PHP errors would be invaluable. If you have access to your <code>php.ini</code> file, turning on PHP errors is as simple as opening up the file in your favorite code editor (I use Dreamweaver) and looking for the <code>display_errors</code> directive. The block of code should look something like this: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="ini" style="font-family:monospace;">; With this directive set to off, errors that occur during the execution of ; scripts will no longer be displayed as a part of the script output, and thus, ; will no longer be exposed to remote users. With some errors, the error message ; content may expose information about your script, web server, or database ; server that may be exploitable for hacking. Production sites should have this ; directive set to off.   ; Print out errors (as a part of the output). For production web sites, ; you're strongly encouraged to turn this feature off, and use error logging ; instead (see below). Keeping display_errors enabled on a production web site ; may reveal security information to end users, such as file paths on your Web ; server, your database schema or other information. display_errors = Off</pre></div></td></tr></table></div> Set <code>display_errors</code> to “On”, save and upload your <code>php.ini</code> file and your testing environment is ready. If you are on a shared server, you might not be able to access the <code>php.ini</code>, but you can still turn PHP errors on by adding these lines to your <code>.htaccess</code> file. If you don’t have an <code>.htaccess</code> file, just create one and add it to your site’s root directory. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="ini" style="font-family:monospace;"># display php errors php_flag display_startup_errors on php_flag display_errors on php_flag html_errors on</pre></div></td></tr></table></div> If the two methods above are not in the realm of possibilities for you, your last chance is to add a few lines of PHP directly to the file you’re testing. At the top of your PHP file, include the following: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><?php ini_set('display_errors', 1); error_reporting(E_ALL); ?></pre></div></td></tr></table></div> I have found that this won’t always work on server’s with high level security settings, but it is worth trying if the other two options are not available to you. <div class="imgprov"> Image provided by <a href="http://www.pixmac.com#cbavota">Pixmac</a>. </div> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/turning-on-php-errors/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Using CSS Resets</title> <link>http://bavotasan.com/tutorials/using-css-resets/</link> <comments>http://bavotasan.com/tutorials/using-css-resets/#comments</comments> <pubDate>Tue, 12 Oct 2010 16:26:49 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[css]]></category> <category><![CDATA[design]]></category> <category><![CDATA[dev]]></category> <category><![CDATA[html]]></category> <category><![CDATA[Stylesheet]]></category> <category><![CDATA[web]]></category> <category><![CDATA[website]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2908</guid> <description><![CDATA[Before you start building a new site, one important decision you need to make is whether or not you want certain elements of your design to rely on the default settings of your user’s browser. The problem with this is that not all browsers use the same default settings. A perfect example is with the [...]]]></description> <content:encoded><![CDATA[<img src="http://bavotasan.com/wp-content/uploads/2010/10/cssreset.jpg" alt="CSS" title="cssreset" width="200" height="150" class="alignright size-full wp-image-2910" />Before you start building a new site, one important decision you need to make is whether or not you want certain elements of your design to rely on the default settings of your user’s browser. The problem with this is that not all browsers use the same default settings. A perfect example is with the header tags. The default font size for the h1 tag in IE is 24px, while most other browsers set it at 32px. The margins can range anywhere from about 14px to 20px. That’s a big difference that can throw your design off quite a bit. The way to get around this is to use a CSS reset. A CSS reset does exactly what it states, it resets your CSS so that you can then style your elements exactly how you want, without having to worry about any default settings screwing things up. If you do a quick Google search for CSS reset, the first result will be <a href="http://meyerweb.com/eric/tools/css/reset/">Eric Meyer’s Reset CSS Tool</a>. This is the one that I like to use. All you need to do is add this to the top of your style sheet. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }   /* remember to define focus styles! */ :focus { outline: 0; }   /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; }   /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }</pre></div></td></tr></table></div> The one thing you need to remember when using a CSS reset, is that it resets everything. So now your paragraph tags won’t have any margins, nor will your unordered lists and so on. That means you need to start setting some styles for these elements. Here is what I like to add immediately after the reset to get things started. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">h1, h2, h3, h4, h5, h6, p { margin: 12px 0; } ul, ol { padding: 0 0 0 20px; list-style: disc; } ol { list-style: decimal; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 16px; }</pre></div></td></tr></table></div> That sets up most of the common tags that I use. Some things might look strange as you start to put together your site, so just remember that now you need to set all the default CSS for any element you use. Another popular reset is <a href="http://www.yahooapis.com/yui/3/cssreset/">YUI Reset CSS by Yahoo</a>. It does things a little bit differently. Take a look at the <a href="http://www.yahooapis.com/yui/3/cssreset/">YUI homepage</a> to see some examples of how it is used and you may decide that this reset is the right one for you. The reset I have seen used the most on other people’s sites is the Global Reset. I don’t like to use it because it pretty much just resets the margin and padding for every element but that might be all you really want. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">* { margin: 0; padding: 0; }</pre></div></td></tr></table></div> Whichever reset you choose is totally up to you, but you should consider including a reset as your starting point when creating the stylesheet for your site to guarantee your design looks the way you intended it to across all browsers. ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/using-css-resets/feed/</wfw:commentRss> <slash:comments>4</slash:comments> </item> <item> <title>A Sleek Navigation Menu with CSS3</title> <link>http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/</link> <comments>http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/#comments</comments> <pubDate>Mon, 27 Sep 2010 18:04:34 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[css]]></category> <category><![CDATA[css3]]></category> <category><![CDATA[horizontal menu]]></category> <category><![CDATA[menu]]></category> <category><![CDATA[nav menu]]></category> <category><![CDATA[navigation menu]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2893</guid> <description><![CDATA[I’m in the middle of working on a new layout and design for Themes by bavotasan.com and I have been tossing around a few ideas for my main navigation menu. I don’t want anything too elaborate and I feel that jQuery would be better used elsewhere, so I decided to go with only CSS3. I [...]]]></description> <content:encoded><![CDATA[I’m in the middle of working on a new layout and design for <a href="http://themes.bavotasan.com/">Themes by bavotasan.com</a> and I have been tossing around a few ideas for my main navigation menu. I don’t want anything too elaborate and I feel that jQuery would be better used elsewhere, so I decided to go with only CSS3. I plan on using rounded corners, a background gradient and a simple hover effect. All together it works quite nicely, but of course it only works on modern browsers that support CSS3 so IE users will be missing out once again. First we need to put together a simple menu as an unordered list: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><ul id="main-navigation"> <li class="first><a href="http://themes.bavotasan.com">Home</a></li> <li><a href="http://themes.bavotasan.com/category/our-themes">Themes</a></li> <li><a href="http://demos.bavotasan.com/">Demos</a></li> <li><a href="http://bavotasan.com/">Blog</a></li> </ul></pre></div></td></tr></table></div> We’ll give our unordered list the ID <code>main-navigation</code> and our first list items the class <code>first</code>. You’ll see why in a second. Next comes the CSS: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">#main-navigation { width: 100%; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666)); background: -moz-linear-gradient(top, #444444, #666666); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666'); border: 1px solid #444; list-style: none; padding: 0; margin: 0; float: left; }   #main-navigation li { float: left; border-right: 1px solid #777; }   #main-navigation li a { font: 13px Georgia, "Times New Roman", Times, serif; letter-spacing: 1px; padding: 12px 20px; border-right: 1px solid #333; display: block; color: #fff; }</pre></div></td></tr></table></div> The above CSS will give us a menu that looks like this: <ul id="demo-nav"> <li class="first"><a href="http://themes.bavotasan.com">Home</a></li> <li><a href="http://themes.bavotasan.com/category/our-themes">Themes</a></li> <li><a href="http://demos.bavotasan.com/">Demos</a></li> <li><a href="http://bavotasan.com/">Blog</a></li> </ul> A simple underline for the hover doesn’t quite cut it, so let’s add a cool hover effect: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">#main-navigation li a:hover { background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444)); background: -moz-linear-gradient(top, #666666, #444444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444'); text-decoration: none; }</pre></div></td></tr></table></div> Hover over a link below to see it in action. <ul id="demo-nav" class="nav2"> <li class="first"><a href="http://themes.bavotasan.com">Home</a></li> <li><a href="http://themes.bavotasan.com/category/our-themes">Themes</a></li> <li><a href="http://demos.bavotasan.com/">Demos</a></li> <li class="last"><a href="http://bavotasan.com/">Blog</a></li> </ul> All we did was reverse the gradient and it adds a cool effect. The only problem is that hovering over the first item gives us some strange squared corners. Fixing that requires some CSS styles for the list item with the classname <code>first</code>. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">#main-navigation li.first a { -moz-border-radius: 8px 0 0 8px; -khtml-border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; }</pre></div></td></tr></table></div> Now our final menu looks and functions exactly how we want it to. <ul id="demo-nav" class="nav3"> <li class="first"><a href="http://themes.bavotasan.com">Home</a></li> <li><a href="http://themes.bavotasan.com/category/our-themes">Themes</a></li> <li><a href="http://demos.bavotasan.com/">Demos</a></li> <li class="last"><a href="http://bavotasan.com/">Blog</a></li> </ul> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item> <title>A Basic jQuery Slideshow</title> <link>http://bavotasan.com/tutorials/a-basic-jquery-slideshow/</link> <comments>http://bavotasan.com/tutorials/a-basic-jquery-slideshow/#comments</comments> <pubDate>Tue, 21 Sep 2010 14:34:42 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[content slider]]></category> <category><![CDATA[Images]]></category> <category><![CDATA[Javascript]]></category> <category><![CDATA[jquery]]></category> <category><![CDATA[slider]]></category> <category><![CDATA[Slideshow]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2875</guid> <description><![CDATA[Most sites you will visit nowadays will have some sort of slideshow or content slider. Check out Themes by bavotasan.com and you will see my Sliderota jQuery plugin in action. I was visiting a site recently that had a very basic slideshow and I wanted to try to recreated it. It wasn’t anything fancy, just [...]]]></description> <content:encoded><![CDATA[Most sites you will visit nowadays will have some sort of slideshow or content slider. Check out <a href="http://themes.bavotasan.com/">Themes by bavotasan.com</a> and you will see my <a href="http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery plugin</a> in action. I was visiting a site recently that had a very basic slideshow and I wanted to try to recreated it. It wasn’t anything fancy, just two controls that would switch between image/text slides. It took some jQuery, CSS and HTML to get it all working. First, let’s put together some HTML. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><div id="slideshow"> <div id="controls"><a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a></div> <ul> <li> <img src="img1.jpg" width="387" height="258" alt="" /> <p>Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et. Duis vitae diam et magna bibendum dictum. </p> </li> <li> <img src="img2.jpg" width="387" height="258" alt="" /> <p>Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </p> </li> <li> <img src="img3.jpg" width="387" height="258" alt="" /> <p>Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie.</p> </li> <li> <img src="img4.jpg" width="387" height="258" alt="" /> <p>In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </p> </li> </ul> </div></pre></div></td></tr></table></div> Each slide is a list item that contains an image and a paragraph. Let’s style it to get it looking the way we want. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">#slideshow { border: 1px solid #ccc; padding: 10px; width: 600px; height: 280px; }   #slideshow ul { position: relative; list-style: none; padding: 0; margin: 0; }   #slideshow ul li { position: absolute; top: 0; left: 0; display: none; }   #slideshow ul li.current { display: block; }   #slideshow li img { float: left; margin-right: 20px; }     #slideshow #controls { width: 100%; text-align: right; }</pre></div></td></tr></table></div> Our CSS will add some simple styles. It will also make sure that our unordered list has a relative position so that all of our list items can be aligned directly on top of one another. That will give the illusion that we are switching between slides, when really all we are doing is making one slide display while all the other slides are hidden. That will be done with a little bit of jQuery. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">(function($) { var len = $("#slideshow li").length; var x = 0; $("#slideshow #total").text(len); $("#slideshow li:eq(0)").addClass("current"); $("#slideshow li").each(function() { $(this).attr('rel', x); x++ }); $("#next").click(function() { var current = $("#slideshow .current"); var next = parseFloat(current.attr('rel'))+1; if(next==len) { return false; } $("#num").text(parseFloat(next)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==next) { $(this).addClass('current'); } }); }); $("#prev").click(function() { var current = $("#slideshow .current"); var prev = parseFloat(current.attr('rel'))-1; if(prev<0) { return false; } $("#num").text(parseFloat(prev)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==prev) { $(this).addClass('current'); } }); }); })(jQuery)</pre></div></td></tr></table></div> This code will count the number of list items and display that number in our counter. It will also cycle through each list item and give it a reference number, which is how we can control which slide will appear. Next, it sets up our controls to scroll forward and backward through the slides. Put it all together and you get this: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>A Basic Slideshow</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> #slideshow { border: 1px solid #ccc; padding: 10px; width: 600px; height: 280px; }   #slideshow ul { position: relative; list-style: none; padding: 0; margin: 0; }   #slideshow ul li { position: absolute; top: 0; left: 0; display: none; }   #slideshow ul li.current { display: block; }   #slideshow li img { float: left; margin-right: 20px; }     #slideshow #controls { width: 100%; text-align: right; }   </style> </head>   <div id="slideshow"> <div id="controls"><a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a></div> <ul> <li> <img src="img1.jpg" width="387" height="258" alt="" /> <p>Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et. Duis vitae diam et magna bibendum dictum. </p> </li> <li> <img src="img2.jpg" width="387" height="258" alt="" /> <p>Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </p> </li> <li> <img src="img3.jpg" width="387" height="258" alt="" /> <p>Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie.</p> </li> <li> <img src="img4.jpg" width="387" height="258" alt="" /> <p>In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </p> </li> </ul> </div> <script type="text/javascript"> (function($) { var len = $("#slideshow li").length; var x = 0; $("#slideshow #total").text(len); $("#slideshow li:eq(0)").addClass("current"); $("#slideshow li").each(function() { $(this).attr('rel', x); x++ }); $("#next").click(function() { var current = $("#slideshow .current"); var next = parseFloat(current.attr('rel'))+1; if(next==len) { return false; } $("#num").text(parseFloat(next)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==next) { $(this).addClass('current'); } }); }); $("#prev").click(function() { var current = $("#slideshow .current"); var prev = parseFloat(current.attr('rel'))-1; if(prev<0) { return false; } $("#num").text(parseFloat(prev)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==prev) { $(this).addClass('current'); } }); }); })(jQuery) </script> </body> </html></pre></div></td></tr></table></div> Here is a demo: <div id="slideshow"> <div id="controls"><a href="javascript:void(0)" id="prev">«</a> 1 of <a href="javascript:void(0)" id="next">»</a></div> <ul> <li> <img src="http://bavotasan.com/wp-content/uploads/2010/09/img1.jpg" width="387" height="258" alt="" /> Phasellus in ligula enim, at pellentesque eros. Sed vehicula, diam vitae scelerisque consectetur, urna lectus fermentum dui, ac dictum tellus ligula at turpis. Integer feugiat dictum augue, cursus ultrices nibh iaculis et. Duis vitae diam et magna bibendum dictum. </li> <li> <img src="http://bavotasan.com/wp-content/uploads/2010/09/img2.jpg" width="387" height="258" alt="" /> Fusce libero quam, sollicitudin vel interdum nec, porttitor eu lectus. Quisque non rhoncus nunc. Aliquam mi mi, fermentum non feugiat vel, semper eu erat. In tempus pharetra feugiat. </li> <li> <img src="http://bavotasan.com/wp-content/uploads/2010/09/img3.jpg" width="387" height="258" alt="" /> Aliquam at semper nisi. Donec at vulputate velit. Donec eros risus, aliquam at laoreet sit amet, tempor at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies mi in nisl venenatis molestie. </li> <li> <img src="http://bavotasan.com/wp-content/uploads/2010/09/img4.jpg" width="387" height="258" alt="" /> In eleifend consequat dolor ut vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. </li> </ul> </div> <script type="text/javascript"> (function($) { var len = $("#slideshow li").length; var x = 0; $("#slideshow #total").text(len); $("#slideshow li:eq(0)").addClass("current"); $("#slideshow li").each(function() { $(this).attr('rel', x); x++ }); $("#next").click(function() { var current = $("#slideshow .current"); var next = parseFloat(current.attr('rel'))+1; if(next==len) { return false; } $("#num").text(parseFloat(next)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==next) { $(this).addClass('current'); } }); }); $("#prev").click(function() { var current = $("#slideshow .current"); var prev = parseFloat(current.attr('rel'))-1; if(prev<0) { return false; } $("#num").text(parseFloat(prev)+1); current.removeClass('current'); $("#slideshow li").each(function() { if($(this).attr('rel')==prev) { $(this).addClass('current'); } }); }); })(jQuery) </script> <div class="imgprov"> Slideshow images provided by <a href="http://www.pixmac.com#cbavota">Pixmac</a>. </div> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/a-basic-jquery-slideshow/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> </channel> </rss>