CINXE.COM

bavotasan.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, 05 Jan 2011 14:28:15 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.0.4</generator> <item> <title>WordPress 3.1: The New Admin Bar</title> <link>http://bavotasan.com/tutorials/wordpress-3-1-the-new-admin-bar/</link> <comments>http://bavotasan.com/tutorials/wordpress-3-1-the-new-admin-bar/#comments</comments> <pubDate>Tue, 04 Jan 2011 17:50:58 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[admin bar]]></category> <category><![CDATA[features]]></category> <category><![CDATA[WordPress]]></category> <category><![CDATA[wordpress 3.1]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=3069</guid> <description><![CDATA[I have been playing around with the latest release candidate for WordPress 3.1 and some of the new features are pretty cool. I really like the admin bar and I spent a bit of time yesterday figuring out how I could take advantage of it for my themes. All I really wanted to do was [...]]]></description> <content:encoded><![CDATA[<p>I have been playing around with the latest release candidate for WordPress 3.1 and some of the new features are pretty cool. I really like the admin bar and I spent a bit of time yesterday figuring out how I could take advantage of it for my themes. All I really wanted to do was add my theme options pages so that they can be easily accessible. Luckily, there is a new action I could hook into called <code>admin_bar_menu()</code>.</p> <p><img src="http://bavotasan.com/wp-content/uploads/2011/01/adminbar.jpg" alt="Admin Bar" title="adminbar" width="550" height="302" class="aligncenter size-full wp-image-3071" /></p> <p>First we need to add an action to our function.php file.</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">add_action<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'admin_bar_menu'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'add_menu_admin_bar'</span> <span style="color: #339933;">,</span> <span style="color: #cc66cc;">70</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div> <p>The <code>70</code> at the end indicates where the new menu will appear. If you want it to appear first on the left, you can leave that parameter blank or set it to <code>10</code>. The number needs to be in increments of ten to set where the menu will appear. <code>70</code> will make it appear after the Appearance menu items.</p> <p>Now we need to create our function which will use the global variable <code>$wp_admin_bar</code> to add the new menu items to the admin bar.</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> add_menu_admin_bar<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$wp_admin_bar</span><span style="color: #339933;">;</span> &nbsp; <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>is_super_admin<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #339933;">!</span>is_admin_bar_showing<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #990000;">exit</span><span style="color: #339933;">;</span> &nbsp; <span style="color: #000088;">$wp_admin_bar</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">add_menu</span><span style="color: #009900;">&#40;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'id'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'theme_options'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'title'</span> <span style="color: #339933;">=&gt;</span>__<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'Magazine Basic'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'magazine-basic'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'href'</span> <span style="color: #339933;">=&gt;</span> admin_url<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'admin.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;?page=magazine-basic&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000088;">$wp_admin_bar</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">add_menu</span><span style="color: #009900;">&#40;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'parent'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'theme_options'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'title'</span> <span style="color: #339933;">=&gt;</span> __<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'Layout Options'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'magazine-basic'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'href'</span> <span style="color: #339933;">=&gt;</span> admin_url<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'admin.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;?page=magazine-basic&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span></pre></div></td></tr></table></div> <p>The <code>add_menu()</code> function accepts the following parameters:</p> <dl> <dt>title</dt> <dd>default false</dd> <dt>href</dt> <dd>default false</dd> <dt>parent</dt> <dd>default false &#8211; pass the ID value for a submenu of that menu</dd> <dt>id</dt> <dd>defaults to a sanitized title value</dd> <dt>meta</dt> <dd>default false &#8211; array of any of the following options: array( &#8216;html&#8217; => &#8221;, &#8216;class&#8217; => &#8221;, &#8216;onclick&#8217; => &#8221;, target => &#8221; );</dd> </dl> <p>Putting it all together into the function.php file would look like this.</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> add_menu_admin_bar<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$wp_admin_bar</span><span style="color: #339933;">;</span> &nbsp; <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>is_super_admin<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #339933;">!</span>is_admin_bar_showing<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #990000;">exit</span><span style="color: #339933;">;</span> &nbsp; <span style="color: #000088;">$wp_admin_bar</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">add_menu</span><span style="color: #009900;">&#40;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'id'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'theme_options'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'title'</span> <span style="color: #339933;">=&gt;</span>__<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'Magazine Basic'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'magazine-basic'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'href'</span> <span style="color: #339933;">=&gt;</span> admin_url<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'admin.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;?page=magazine-basic&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000088;">$wp_admin_bar</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">add_menu</span><span style="color: #009900;">&#40;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'parent'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'theme_options'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'title'</span> <span style="color: #339933;">=&gt;</span> __<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'Layout Options'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'magazine-basic'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'href'</span> <span style="color: #339933;">=&gt;</span> admin_url<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'admin.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;?page=magazine-basic&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> add_action<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'admin_bar_menu'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'add_menu_admin_bar'</span> <span style="color: #339933;">,</span> <span style="color: #cc66cc;">70</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div> <p>Just make sure it is between the PHP tags.</p> <p>I&#8217;ll be messing around with WP 3.1 for the rest of the week and posting about my discoveries so keep checking in.</p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/wordpress-3-1-the-new-admin-bar/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item> <title>The Last Day of 2010</title> <link>http://bavotasan.com/articles/the-last-day-of-2010/</link> <comments>http://bavotasan.com/articles/the-last-day-of-2010/#comments</comments> <pubDate>Fri, 31 Dec 2010 19:17:05 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[2010]]></category> <category><![CDATA[2011]]></category> <category><![CDATA[articles]]></category> <category><![CDATA[c.bavota]]></category> <category><![CDATA[features]]></category> <category><![CDATA[happy new year]]></category> <category><![CDATA[tutorial]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=3063</guid> <description><![CDATA[I just wanted to thank everyone for help making 2010 an extremely successful and rewarding year here at bavotasan.com. I&#8217;m hoping to keep up the momentum in 2011 with more tutorials and articles so be sure to keep coming back, and let me know if there are any specific subjects you would like to see [...]]]></description> <content:encoded><![CDATA[<p><img src="http://bavotasan.com/wp-content/uploads/2010/12/bluetree.jpg" alt="" title="bluetree" width="200" height="150" class="alignright size-full wp-image-3064" />I just wanted to thank everyone for help making 2010 an extremely successful and rewarding year here at bavotasan.com. I&#8217;m hoping to keep up the momentum in 2011 with more tutorials and articles so be sure to keep coming back, and let me know if there are any specific subjects you would like to see featured.</p> <p>All the best,</p> <p>c.bavota</p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/the-last-day-of-2010/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item> <title>Creating a Sticky Footer for your Site</title> <link>http://bavotasan.com/tutorials/creating-a-sticky-footer-for-your-site/</link> <comments>http://bavotasan.com/tutorials/creating-a-sticky-footer-for-your-site/#comments</comments> <pubDate>Mon, 20 Dec 2010 20:40:35 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[css]]></category> <category><![CDATA[sticky footer]]></category> <category><![CDATA[WordPress]]></category> <category><![CDATA[wp-admin]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=3059</guid> <description><![CDATA[I was messing around with the WordPress admin and I somehow managed to break the footer. This made me pay a bit more attention to how it actually worked, and I realized that it used a pretty awesome CSS trick to make sure that no matter what size your browser window was, it stuck to [...]]]></description> <content:encoded><![CDATA[<p>I was messing around with the WordPress admin and I somehow managed to break the footer. This made me pay a bit more attention to how it actually worked, and I realized that it used a pretty awesome CSS trick to make sure that no matter what size your browser window was, it stuck to the bottom, unless of course your page was longer. But this is a pretty cool effect and I managed to get it working in my <a href="http://themes.bavotasan.com/support/">Support Forum</a> so I thought I would share it.</p> <p>Here is exactly how the HTML looks in the WordPress admin when it is broken down to its base components:</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>html<span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;</span>body<span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;wpwrap&quot;</span><span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;wpcontent&quot;</span><span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;footer&quot;</span><span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;/</span>body<span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;/</span>html<span style="color: #339933;">&gt;</span></pre></div></td></tr></table></div> <p>Here is the CSS that makes the footer sticky:</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">html<span style="color: #00AA00;">,</span> body <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #cc00cc;">#wpwrap</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">min-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #cc00cc;">#wpcontent</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">50px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #cc00cc;">#footer</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-50px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">50px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></div></td></tr></table></div> <p>Now your footer is forced to always stay &#8220;stuck&#8221; at the bottom of the browser window. Just make sure that the padding at the bottom of the main content (#wpcontent) is the same as the height and the negative top margin of the footer (#footer).</p> <p>This technique works in Firefox, Safari, Chrome and IE.</p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/creating-a-sticky-footer-for-your-site/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item> <title>Arturo Framework for WordPress</title> <link>http://bavotasan.com/articles/arturo-framework-for-wordpress/</link> <comments>http://bavotasan.com/articles/arturo-framework-for-wordpress/#comments</comments> <pubDate>Thu, 16 Dec 2010 22:52:45 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[custom theme]]></category> <category><![CDATA[framework]]></category> <category><![CDATA[premium theme]]></category> <category><![CDATA[WordPress]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=3055</guid> <description><![CDATA[It took a lot longer than I anticipated, but I think the wait was well worth it. The Arturo framework for WordPress is finally ready and I must say, it鈥檚 pretty awesome. For more information check out Themes by bavotasan.com.]]></description> <content:encoded><![CDATA[<p>It took a lot longer than I anticipated, but I think the wait was well worth it. The Arturo framework for WordPress is finally ready and I must say, it鈥檚 pretty awesome.</p> <p><img src="http://bavotasan.com/wp-content/uploads/2010/12/arturoframework.jpg" alt="Arturo Framework for WordPress" title="arturoframework" width="570" height="1146" class="aligncenter size-full wp-image-3056" /></p> <p>For more information check out <a href="http://themes.bavotasan.com/our-themes/premium-themes/arturo/">Themes by bavotasan.com</a>.</p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/arturo-framework-for-wordpress/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item> <title>Simple Text Shadow Effect using CSS3</title> <link>http://bavotasan.com/tutorials/simple-text-shadow-effect-using-css3/</link> <comments>http://bavotasan.com/tutorials/simple-text-shadow-effect-using-css3/#comments</comments> <pubDate>Mon, 06 Dec 2010 18:16:34 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[css]]></category> <category><![CDATA[css3]]></category> <category><![CDATA[shadow]]></category> <category><![CDATA[Style]]></category> <category><![CDATA[Stylesheet]]></category> <category><![CDATA[text-shadow]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=3014</guid> <description><![CDATA[Here are some cool and easy to implement text shadow effect that I have been using a lot recently. They don&#8217;t take much but they do add a lot more depth and detail to your text. Here is some black text on a grey background with a 1 pixel white text shadow. That one is [...]]]></description> <content:encoded><![CDATA[<p>Here are some cool and easy to implement text shadow effect that I have been using a lot recently. They don&#8217;t take much but they do add a lot more depth and detail to your text.</p> <div style="text-shadow: #fff 0 1px 0; background: #ddd; padding: 10px;">Here is some black text on a grey background with a 1 pixel white text shadow.</div> <p>That one is subtle but looks great. All it takes is this little bit of CSS.</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#fff</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">1px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span></pre></div></td></tr></table></div> <p>The text-shadow style accepts four different values:</p> <ul> <li>The color (hex code)</li> <li>The x-coordinate relative to the text (pixels)</li> <li>The y-coordinate relative to the text (pixels)</li> <li>The blur radius (pixels)</li> </ul> <p>For the code above, I have set the color to white (#fff) with no x-coordinate value, a 1 pixel y-coordinate value and no blur radius. So my white text-shadow appears as a white stroke 1 pixel below my text, giving it a bit of depth.</p> <p>You can also use a similar style to create a letterpress effect.</p> <div style="text-shadow: #777 0 2px 3px; background: #444; text-align: center; padding: 10px; font-size: 70px; line-height: normal;">LETTERPRESS</div> <p>This effect uses the following CSS:</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#777</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">2px</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span></pre></div></td></tr></table></div> <p>We could even take it a step further and add a second text-shadow.</p> <div style="text-shadow: -1px -1px 2px #333, #777 0 2px 3px; background: #444; text-align: center; padding: 10px; font-size: 70px; line-height: normal;">LETTERPRESS</div> <p>The text-shadow style also accepts multiple settings, separated by a comma.</p> <p>The above CSS looks like this:</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-1px</span> <span style="color: #933;">-1px</span> <span style="color: #933;">2px</span> <span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#777</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">2px</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span></pre></div></td></tr></table></div> <p>The difference is subtle but very effective.</p> <p>Here are some examples of other text shadows:</p> <div style="text-shadow: #444 1px 1px 1px; color: #dd0000;">Regular dark shadow on red text.</div> <p></p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#444</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span></pre></div></td></tr></table></div> <div style="text-shadow: #000 0 0 20px; color: #fff;">A lot of blur on white text.</div> <p></p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#000</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span></pre></div></td></tr></table></div> <div style="text-shadow: #222 1px 1px 0; color: #8c6239; font-weight: bold;">Block shadow</div> <p></p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#222</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc66cc;">0</span></pre></div></td></tr></table></div> <p>As it stands, the text-shadow style does not work in current releases of IE, though it is suppose to work in IE 9.</p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/simple-text-shadow-effect-using-css3/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item> <title>How to Set a Default Custom Background in WordPress 3.0</title> <link>http://bavotasan.com/tutorials/default-custom-background-wordpress-3/</link> <comments>http://bavotasan.com/tutorials/default-custom-background-wordpress-3/#comments</comments> <pubDate>Tue, 30 Nov 2010 16:44:36 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[Background]]></category> <category><![CDATA[background color]]></category> <category><![CDATA[background image]]></category> <category><![CDATA[bg]]></category> <category><![CDATA[custom background editor]]></category> <category><![CDATA[functions.php]]></category> <category><![CDATA[wordpress 3]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=3005</guid> <description><![CDATA[If you&#8217;re a theme developer and you want to allow users to set a custom background image or color, activating the feature in WordPress 3.0 is as simple as including one line of code in your functions.php file. If you want to have a default background image or color, it takes a bit more fiddling [...]]]></description> <content:encoded><![CDATA[<p><img src="http://bavotasan.com/wp-content/uploads/2010/11/bgpattern.jpg" alt="" title="bgpattern" width="200" height="150" class="alignright size-full wp-image-3007" />If you&#8217;re a theme developer and you want to allow users to set a custom background image or color, activating the feature in WordPress 3.0 is as simple as including one line of code in your <code>functions.php</code> file. If you want to have a default background image or color, it takes a bit more fiddling around to figure out exactly how to make it work. </p> <p>I was able to get it working in a couple of my themes so I thought I would share my findings.</p> <p>Setting up your theme just to use the custom background editor requires this in your <code>functions.php</code>:</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'add_custom_background'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> add_custom_background<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'set_theme_background'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span></pre></div></td></tr></table></div> <p>I like to use the if statement just in case people will be using your theme in an older version of WordPress. Without the if statement, the theme will break. Always think about backwards compatibility if that is important to your theme or to you.</p> <p>Now, to set a default background, it takes a few more steps. Take a look at the code below:</p> <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'add_custom_background'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> add_custom_background<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'set_theme_background'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> &nbsp; <span style="color: #000000; font-weight: bold;">function</span> set_theme_background<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000088;">$bgimage</span> <span style="color: #339933;">=</span> get_background_image<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000088;">$bgcolor</span> <span style="color: #339933;">=</span> get_background_color<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> &nbsp; <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;&lt;style type='text/css'&gt;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span> &nbsp; <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$bgimage</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000088;">$background_styles</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'background-image: url(\''</span> <span style="color: #339933;">.</span> get_theme_mod<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'background_image'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'\');'</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">' background-repeat: '</span> <span style="color: #339933;">.</span> get_theme_mod<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'background_repeat'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'repeat'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">';'</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">' background-position: top '</span> <span style="color: #339933;">.</span> get_theme_mod<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'background_position_x'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'left'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">';'</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'background-attachment: '</span><span style="color: #339933;">.</span> get_theme_mod<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'background_attachment'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'scroll'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;body { &quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$background_styles</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;); } <span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$bgcolor</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;body { background-color: #&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$bgcolor</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;; }; <span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$bgimage</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$bgcolor</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;body { background: url(&quot;</span><span style="color: #339933;">.</span>THEME_URL<span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;/images/bg.jpg); }<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;&lt;/style&gt;&quot;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#125;</span></pre></div></td></tr></table></div> <p>This seems a bit sloppy but there are no real functions to gather some of this information so I had to string a lot of things together. What this script is doing, is gathering all the information that could be added by the custom background editor if your user is adding an image or a color. If neither is set, then you can set the default.</p> <p>My default is an background image called <code>bg.jpg</code> that I have stored in my theme&#8217;s <code>/images</code> folder. You can also just set a color, or a large image with no reapeat. It&#8217;s totally up to you.</p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/default-custom-background-wordpress-3/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item> <title>Elemental Portfolio WordPress Theme</title> <link>http://bavotasan.com/articles/elemental-portfolio-wordpress-theme/</link> <comments>http://bavotasan.com/articles/elemental-portfolio-wordpress-theme/#comments</comments> <pubDate>Tue, 23 Nov 2010 21:33:32 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[css3]]></category> <category><![CDATA[portfolio]]></category> <category><![CDATA[premium theme]]></category> <category><![CDATA[theme]]></category> <category><![CDATA[WordPress]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2999</guid> <description><![CDATA[Elemental Portfolio began as an experiment to see if I could develop a unique way for people to show off their work, using only CSS3, jQuery and Ajax. The original layout and design idea came from the periodic table of elements. Each time the front page is reloaded, the layout will change completely, which I [...]]]></description> <content:encoded><![CDATA[<p>Elemental Portfolio began as an experiment to see if I could develop a unique way for people to show off their work, using only CSS3, jQuery and Ajax. The original layout and design idea came from the <a href="http://en.wikipedia.org/wiki/Periodic_table">periodic table of elements</a>. Each time the front page is reloaded, the layout will change completely, which I think is incredibly cool.</p> <p>Another awesome feature is that the theme is completely built in jQuery and Ajax, so there are no page reloads, since everything is loaded dynamically. What does that mean? It means that your visitors have a completely interactive experience while they peruse all of your work.</p> <p><img src="http://bavotasan.com/wp-content/uploads/2010/11/elemental-portfolio.jpg" alt="" title="elemental-portfolio" width="560" height="422" class="aligncenter size-full wp-image-3000" /></p> <p>Go to <a href="http://themes.bavotasan.com/our-themes/premium-themes/elemental-portfolio/">Themes by bavotasan.com</a> for more info.</p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/elemental-portfolio-wordpress-theme/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Magazine Flow WordPress Theme</title> <link>http://bavotasan.com/articles/magazine-flow-wordpress-theme/</link> <comments>http://bavotasan.com/articles/magazine-flow-wordpress-theme/#comments</comments> <pubDate>Sat, 20 Nov 2010 23:00:39 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[custom theme]]></category> <category><![CDATA[jquery]]></category> <category><![CDATA[magazine]]></category> <category><![CDATA[masonry]]></category> <category><![CDATA[premium theme]]></category> <category><![CDATA[theme]]></category> <category><![CDATA[WordPress]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2991</guid> <description><![CDATA[I just released a new theme called Magazine Flow. Check it out on Themes by bavotasan.com and take a look at the demo to see it in action.]]></description> <content:encoded><![CDATA[<p>I just released a new theme called Magazine Flow. Check it out on <a href="http://themes.bavotasan.com/our-themes/premium-themes/magazine-flow/">Themes by bavotasan.com</a> and take a look at the <a href="http://demos.bavotasan.com/magazine-flow/">demo</a> to see it in action.</p> <p><img src="http://bavotasan.com/wp-content/uploads/2010/11/magazine-flow.jpg" alt="Magazine Flow" title="magazine-flow" width="560" height="1327" class="aligncenter size-full wp-image-2993" /></p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/magazine-flow-wordpress-theme/feed/</wfw:commentRss> <slash:comments>11</slash:comments> </item> <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[<p>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>.</p> <p><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></p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/magazine-premium-is-out/feed/</wfw:commentRss> <slash:comments>11</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&#8217;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[<p>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&#8217;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&#8217;s what you get when you use inferior browsers (that right, I said it!).</p> <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" /><p class="wp-caption-text">The new look for Themes by bavotasan.com</p></div> <p>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. </p> <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" /><p class="wp-caption-text">The new forum powered by Vanilla </p></div> <p>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.</p> <p>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.</p> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/a-new-look-for-themes-by-bavotasan-com/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> </channel> </rss>

Pages: 1 2 3 4 5 6 7 8 9 10