WP Garage » Design http://wpgarage.com wordpress tricks, hacks, and tips Wed, 16 Nov 2011 14:36:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 How to add images and styles to the WordPress custom menu http://wpgarage.com/css/how-to-add-images-and-styles-to-the-wordpress-custom-menu/ http://wpgarage.com/css/how-to-add-images-and-styles-to-the-wordpress-custom-menu/#comments Tue, 24 May 2011 09:59:06 +0000 Rebecca Markowitz http://?p=978 There are lots of good plugins out there for displaying social media profiles on your site, but what if you want to use your own icons? And you want your client to be able to easily manage the links to these social profiles? The solution is to create a custom menu in WordPress with unique [...]

This post was originally published at How to add images and styles to the WordPress custom menu on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

There are lots of good plugins out there for displaying social media profiles on your site, but what if you want to use your own icons? And you want your client to be able to easily manage the links to these social profiles? The solution is to create a custom menu in WordPress with unique CSS styles assigned to each of those menu items. But how?

Here’s what we worked on: A custom menu with unique icons for Twitter, YouTube and Facebook:

 

After searching the web for how to add images to the WordPress custom menu, we tried the Custom Menu Images plugin with no success. We even tried some crazy workarounds like trying to put the image path inside the navigation label! WTW?! Crazy, but true. And it didn’t even work in the end. It printed out the character tag < reading the HTML instead of rendering it.

And then, we saw the light! In the form of the Screen Options pull down tab right there in the Custom Menu screen in front of our faces! Well, actually the light came from this post that told us where to look. How did we ever miss it? It was so obvious! Once you know where to look, that is. So here’s what to do:

  1. Go into your Custom Menu (functionality added in WordPress 3.0) under Appearance > Menus
  2. Click on Screen Options in the top right corner of your screen
  3. Check the checkbox next to CSS Styles in the Show Advanced Menu Properties
  4. Create your menu
  5. In your menu item, in the CSS Classes field, enter the name of the CSS style you want to associate with that menu item. Just the name of the class without the period. Ex. “twitterstyle”
  6. Go into your CSS file and add the style and add images and/or styles as you see fit.

 

That’s it. More coolness that Screen Options can do, Show more pages in your WordPress Dashboard.

This post was originally published at How to add images and styles to the WordPress custom menu on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> http://wpgarage.com/css/how-to-add-images-and-styles-to-the-wordpress-custom-menu/feed/ 3 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 ?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 [...]

This post was originally published at Add SWFir to WordPress for nice rounded corners, shadows and other effects on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

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.

This post was originally published at Add SWFir to WordPress for nice rounded corners, shadows and other effects on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> 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.

This post was originally published at User Interface Icons in three different sizes on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

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

This post was originally published at User Interface Icons in three different sizes on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> 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.

This post was originally published at More feed icons on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

iLemoned points us to Zeusbox Studio’s update to their Feedicons icon pack.

feedicons2.jpg

This post was originally published at More feed icons on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> 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 [...]

This post was originally published at Case study: How blog design contributed to Blogsolid’s success on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

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!)

This post was originally published at Case study: How blog design contributed to Blogsolid’s success on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> 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: Download the Crystal Icon Set>>

This post was originally published at Crystal icon set – free beautiful icons on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

Everaldo has a few icon sets available for download. They are really beautiful:

Crystal icon set - free beautiful icons

Download the Crystal Icon Set>>

This post was originally published at Crystal icon set – free beautiful icons on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> 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 [...]

This post was originally published at Iconlet – the icon search engine on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

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>>

This post was originally published at Iconlet – the icon search engine on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> 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 [...]

This post was originally published at More CSS Layouts on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

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>> 

This post was originally published at More CSS Layouts on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> 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 [...]

This post was originally published at If you want to be inspired, you have to see this site! on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

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>>

This post was originally published at If you want to be inspired, you have to see this site! on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> 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>> 

This post was originally published at Another CSS gallery – CSS Impress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]>

Waynne sent in a comment recommending CSS Impress as another CSS gallery worth checking out. Thanks Waynne!

CSS Impress>> 

This post was originally published at Another CSS gallery – CSS Impress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

]]> http://wpgarage.com/design/another-css-gallery-css-impress/feed/ 0