WP Garage » Design http://wpgarage.com wordpress tricks, hacks, and tips Thu, 08 Jul 2010 15:11:31 +0000 http://wordpress.org/?v=2.9.2 en hourly 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 User Interface Icons in three different sizes http://wpgarage.com/design/user-interface-icons-in-three-different-sizes/ http://wpgarage.com/design/user-interface-icons-in-three-different-sizes/#comments Mon, 12 Nov 2007 13:17:13 +0000 http://wordpressgarage.com/design/user-interface-icons-in-three-different-sizes/ User Interface Icons.com has released 140 very pretty icons in .png format, and in 3 different sizes: 48×48 pixels, 32×32 pixels, and 24×24 pixels. Definitely worth adding to your icon arsenal.

User Interface Icons.com

]]> http://wpgarage.com/design/user-interface-icons-in-three-different-sizes/feed/ 1 More feed icons http://wpgarage.com/design/more-feed-icons/ http://wpgarage.com/design/more-feed-icons/#comments Mon, 29 Oct 2007 22:24:07 +0000 http://wordpressgarage.com/design/more-feed-icons/ iLemoned points us to Zeusbox Studio’s update to their Feedicons icon pack.

feedicons2.jpg

]]> http://wpgarage.com/design/more-feed-icons/feed/ 1 Case study: How blog design contributed to Blogsolid’s success http://wpgarage.com/design/case-study-how-blog-design-contributed-to-blogsolids-success/ http://wpgarage.com/design/case-study-how-blog-design-contributed-to-blogsolids-success/#comments Mon, 10 Sep 2007 09:00:14 +0000 http://wordpressgarage.com/design/case-study-how-blog-design-contributed-to-blogsolids-success/ Blogging seems to be all about content. It’s about what you write, how you write it, who you link to, etc. So how does design come into play? Most people say that design is important, and that you should have a professional design that is easy on the eyes, and simple to navigate. It is generally agreed that a bad blog design may have a negative impact on your blog readership.

But I’ve rarely heard people say that a fantastic blog design will be the key to blogging success. Well, Blogsolid is a good case study of how a unique and beautiful design can bring in torrents of readers.

Blogsolid officially launched on July 31st. The content on the site is pretty good, but not anything out of the ordinary. By August 9, the blog was picked up by a bunch of web design galleries. The onslaught of visitors crashed the poor guy’s servers for 12 hours.

Blogsolid’s design and architecture are brilliant. The blog has three categories, which appear on the home page as options for entering the blog. You can also enter the general blog by clicking on the header (this should probably be made clearer somehow – I think there should be four options for entering the blog, i.e. the three categories plus the blog with everything).

Blogsolid homepage

Of course, the guy/gal behind Blogsolid is a graphic designer, and it shows. As we’re not all graphic designers, we can theoretically pay someone for a unique design. However, blogging is not always the most profitable of activities, so this is often not viable. But this case study just goes to show how significant design can be in the success of your blog. So try to make sure your blog is presentable and professional, either by creating your own design, or carefully selecting and customizing an existing theme.

(I am working on customizing a new theme for WordPressGarage as we speak – even I can’t stand the way this blog looks anymore!)

]]> http://wpgarage.com/design/case-study-how-blog-design-contributed-to-blogsolids-success/feed/ 8 Crystal icon set – free beautiful icons http://wpgarage.com/design/crystal-icon-set-free-beautiful-icons/ http://wpgarage.com/design/crystal-icon-set-free-beautiful-icons/#comments Mon, 16 Jul 2007 10:42:19 +0000 http://wordpressgarage.com/design/crystal-icon-set-free-beautiful-icons/ Everaldo has a few icon sets available for download. They are really beautiful:

Crystal icon set - free beautiful icons

Download the Crystal Icon Set>>

]]> http://wpgarage.com/design/crystal-icon-set-free-beautiful-icons/feed/ 0 Iconlet – the icon search engine http://wpgarage.com/design/iconlet-the-icon-search-engine/ http://wpgarage.com/design/iconlet-the-icon-search-engine/#comments Sun, 10 Jun 2007 11:43:45 +0000 http://wordpressgarage.com/design/iconlet-the-icon-search-engine/ I love icons. They’re just so…cute. I also find that, when used in the right places, they really add a nice touch to blogs.

Iconlet is an icon search engine. It’s minimalist home page has a search field, and you enter the type of icon you are looking for. I did some test searches for “save,” “search,” “rss,” and “emoticons, with great results.

Iconlet>>

]]> http://wpgarage.com/design/iconlet-the-icon-search-engine/feed/ 1 More CSS Layouts http://wpgarage.com/design/more-css-layouts/ http://wpgarage.com/design/more-css-layouts/#comments Mon, 09 Apr 2007 21:45:58 +0000 http://www.wordpressgarage.com/design/more-css-layouts/ If you are looking for CSS layouts to use as a foundation for your blog or site, you can find a whole range of layouts here. You’ve got 750px width, 950px, 100%, and under each width you have 56 different layouts, with 1, 2, 3 and four columns, all with different widths and in different places.

CSS Layouts>> 

]]> http://wpgarage.com/design/more-css-layouts/feed/ 0 If you want to be inspired, you have to see this site! http://wpgarage.com/design/if-you-want-to-be-inspired-you-have-to-see-this-site/ http://wpgarage.com/design/if-you-want-to-be-inspired-you-have-to-see-this-site/#comments Tue, 20 Mar 2007 09:36:26 +0000 http://www.wordpressgarage.com/news-views/if-you-want-to-be-inspired-you-have-to-see-this-site/ CSS Import’s latest entry in its gallery is one of the most amazing sites I’ve seen. It is the online CV and portfolio of Danny Blackman, a 3rd year BA Communications & New Media student at University of Leeds, UK and a freelance designer & developer. This is a one page site that has amazing design elements and scrolls down for you where required. I’d hire this guy…if I could afford to…and I lived in England…

Danny Blackman>>

]]> http://wpgarage.com/design/if-you-want-to-be-inspired-you-have-to-see-this-site/feed/ 2 Another CSS gallery – CSS Impress http://wpgarage.com/design/another-css-gallery-css-impress/ http://wpgarage.com/design/another-css-gallery-css-impress/#comments Sat, 17 Mar 2007 21:46:17 +0000 http://www.wordpressgarage.com/design/another-css-gallery-css-impress/ Waynne sent in a comment recommending CSS Impress as another CSS gallery worth checking out. Thanks Waynne!

CSS Impress>> 

]]> http://wpgarage.com/design/another-css-gallery-css-impress/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