WP Garage » rounded corners http://wpgarage.com wordpress tricks, hacks, and tips Mon, 30 Aug 2010 10:34:49 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Add SWFir to WordPress for nice rounded corners, shadows and other effects http://wpgarage.com/design/add-swfir-to-wordpress-for-nice-rounded-corners-shadows-and-other-effects/ http://wpgarage.com/design/add-swfir-to-wordpress-for-nice-rounded-corners-shadows-and-other-effects/#comments Sun, 14 Feb 2010 09:42:16 +0000 Rebecca Markowitz http://wpgarage.com/?p=623 While collaborating with our colleagues at Red Door on a project, we came across SWFir,  an amazing way to add some nice subtle effects to WordPress site images. SWFir automatically adds a flash layer on top of images that can round the corners, add a shadow, rotate, or add a border.  I found the directions on their site a little skimpy for WordPress users so I thought I’d share how to integrate SWFir for WordPress users.

CSS3 is also great for rounded corners and shadows, but unfortunately we still need to keep in mind people using all different versions of Internet Explorer.

  1. Download SWFir
  2. Upload swfir.js and swfir.swf into a folder called swfir into  your theme directory
  3. Include the swfIR JavaScript file in the <head> of your document like this:
    <script type="text/javascript" src="swfir.js"></script>
  4. Add this to footer.php just before the closing body tag<script type=”text/javascript”>
    // swfIR
    window.onload = function() {
    var sir = new swfir();
    sir.specify(“border-radius”, “15″);
    sir.specify(“src”, “<?php bloginfo(‘stylesheet_directory’); ?>/swfir/swfir.swf”);
    sir.swap(“.latest-posts-center img”);
    sir.swap(“.latest-posts-center a img”);
    sir.swap(“img.rounded”);
    </script>

    You may choose from any of these parameters:

    • border-radius
    • border-width
    • border-color
    • shadow-offset
    • shadow-angle
    • shadow-alpha
    • shadow-blur
    • shadow-blur-x
    • shadow-blur-y
    • shadow-strength
    • shadow-color
    • shadow-quality
    • shadow-inner
    • shadow-knockout
    • shadow-hide
    • rotate
    • overflow
    • link
    • elasticity
  5. Add this in the loop somewhere Note: this is assuming that your images are not organized by month and day under Settings > Miscellaneous – the box is unchecked.
    Also, you can change the width to whatever you want and it will resize automatically

    <?php if ( get_post_meta($post->ID, ’rounded_img’, true) ) {
    $postimg = get_post_meta($post->ID, ’rounded_img’, $single = true);
    if((stristr($postimg,’http’)===FALSE) && (stristr($postimg,’wp-content’)===FALSE)) {
    $postimg = get_bloginfo(‘siteurl’).”/wp-content/uploads/”.$postimg;
    } ?>
    <div>
    <a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>
    <img src=”<?php echo $postimg; ?>” alt=”" width=”140″  /></a>
    </div>
    <?php } ?>

  6. When you create a post, upload an image and copy the Link URL. Create a custom fields key rounded_img and paste the Link URL in the Value Box.
]]> http://wpgarage.com/design/add-swfir-to-wordpress-for-nice-rounded-corners-shadows-and-other-effects/feed/ 0 Free XHTML/CSS Templates For Web Design http://wpgarage.com/css-templates/free-xhtmlcss-templates-for-web-design/ http://wpgarage.com/css-templates/free-xhtmlcss-templates-for-web-design/#comments Wed, 18 Apr 2007 19:42:01 +0000 http://www.wordpressgarage.com/templates/free-xhtmlcss-templates-for-web-design/ Template World has some really nice Web 2.0ish templates available for free. It’s worth checking out.

Free XHTML/CSS Templates For Web Design>>

]]> http://wpgarage.com/css-templates/free-xhtmlcss-templates-for-web-design/feed/ 0 25 Code Snippets for Web Designers http://wpgarage.com/design/25-code-snippets-for-web-designers/ http://wpgarage.com/design/25-code-snippets-for-web-designers/#comments Tue, 13 Mar 2007 21:10:37 +0000 http://www.wordpressgarage.com/tips/25-code-snippets-for-web-designers/ This is a really amazing collection of links to code snippets for creating the following:

  • Bubble tool tips
  • Box-over tool tips
  • Star rating systems
  • Forms
  • Rounded corners
  • Speech bubbles (like those used in comments)
  • Bar graphs
  • Gallery lightboxes
  • CSS image maps
  • Tabbed navigation

25 Code Snippets for Web Designers (Part1)>>

]]> http://wpgarage.com/design/25-code-snippets-for-web-designers/feed/ 0