WPforSale

I have to thank Carlos at MediaCoreStudios for the nice post regarding WPforSale.com.

It’s so cool how people can come into your life at just the right time and Carlos is one of those people. Carlos initially contacted me a couple of weeks ago to make me aware of his CelebrityPress Theme. I thought his theme was beautiful so I was happy to share it with all of you. We were emailing each other back and forth about some different things (like using e-junkie) and just hit it off. Since then we have become friends and are actually now collaborating on a new WordPress Theme together. You will hear more about this very soon - I promise.

Again, thank you Carlos for the kind words. Very appreciated!

Wondering if you can help me out on this one.

I found a seemingly cool product called WordPress on Crack. Read more

WooHoo

I have been working the last couple of days on this new release. It’s still in BETA, but I wanted to share this with you as soon as I could.

What the heck is it?

Well, it is kinda like an RSS reader for WordPress Designers, but not quite. The best thing you can do is just check it out and experience it for yourself.

Why does this kickass?

I have implemented SimplePie , RSS technology, and the ShadowBox technology, which is like lightbox, but much more robust. This allows you to surf all the links (RSS feeds) and remain on this site. It also allows you to navigate from one link to the next using the lower right-hand corner nav buttons too.

Ways you can help - because helping feels good

• Let me know of any other feeds that would work well here
• Notify me of any bugs (already found the more/less doesn’t work in IE so I am hiding it using conditional CSS
• Anything I can do to improve your experience?
• If you don’t want your feed posted, let me know that too (who doesn’t want traffic?)
• Buy your premium WP products from our site so we can keep the lights on

Here’s the link - hope you like it: WordPress Feeds

How to create dazzling image overlay effects with minimal effort.

Web Designer Wall has a posted a great article on adding image overlay effects to your images using CSS. The author does a great job of explaining how this works, so I am only going to explain how to get this working in WordPress.

I just introduced this effect to my category listings pages (archives.php template) - see sample. I have created my own variation of the ‘Tape’ style (even though I removed the tape

Here is what I have done.

1. Read how this technique works at Web Designer Wall
2. Download the sample files from Web Designer Wall
3. First thing I learned is you need to alter / create your own overlay images if your files dimensions differ from those in the downloads. I just opened up FireWorks and modified the tape.png image to the same dimensions as the images on my site. Make sure the images you are applying this effect to all have the same dimensions or your effect will not be applied properly. Extra Note: My layout is probably different than yours, in that I have included my images in the archive.php template in a DIV container with a fixed height of 225px and set overflow:hidden using CSS. The reason I do this is so that all of my thumb images (created using Viva Thumbs) in the left column appear to have the same proportions. The truth is, however, that them images themselves vary in height, though all have the same width of 400px. This overlay technique is even more advantages to me, because I can give my images a finished, polished look, whereas before I could not apply any styling to the bottom of the images because they were longer than the 225px height of its parent DIV, and the bottom effect was always hidden due to the overflow:hidden assignment.
4. Once you have your image created, upload it into your images folder within your active Theme. Note it’s name as you will have to add this to your CSS file (See #6). My image is named tape.png.
5. Open up the decorative-gallery-index.html file in your favorite text editor.
6. Locate the CSS code for your favorite style, and add it to your Theme’s Stylesheet (Style.CSS). Edit the span portion of your CSS to include your image name. Here is the code I am using:.photo {
   margin: 0px;
   position: relative;
   width: 400px;
   height: 225px;
   float: left;
   }
   .photo img {
   background: #fff;
   border: solid 1px #ccc;
   padding: 4px;
   }

   .photo a {
   text-decoration: none;
   }
   .photo span {
   width: 400px;
   height: 250px;
   display: block;
   position: absolute;
   top: 0px;
   left: 5px;
   background: url(images/tape.png) no-repeat;

7. OK. Now we need to make some quick changes to our Template so the image(s) we want to effect receive the CSS styling we’ve prepared. Open up your Theme Editor in WordPress and navigate to your respective file. For me, I opened up the (Archives) Archive.php file. Here is my code, before and after adding the needed code:
   Before:
   <a href=”<?php the_permalink() ?>” rel=”bookmark”><img class=”imgarchive” src=”<?php viva(’template’,”); ?> “/></a>
   After:
   <div class=”photo”>
   <a href=”<?php the_permalink() ?>” rel=”bookmark”><span></span><img class=”imgarchive” src=”<?php viva(’template’,”); ?> “/></a></div>Changes have been highlighted in bold.
8. As you can see I manually added the <span> tags into my template, and did not use the JQuery technique.
9. As far as the PNG fix for IE, you can just upload the iepngfix.htc to the root of your theme.
10. Open up your Header.php in the Theme Editor and add this line just above the </head> tag:

    <!--[if lt IE 7]>
    <style type=”text/css”>
    .photo span { behavior: url(<?php bloginfo(’template_url’); ?>/iepngfix.htc); } </style>
    <![endif]–>

11. I also had to add the following IE6 fix to my page to get it to work properly due to my setup as described in the #3 extra note. Here is the code I added after the .photo span style above:.photo {height:225px;overflow:hidden;width:410px;}

That’s it. I hope you find this helpful.

Here is a great post showcasing some of the reusable snippets of code we all need from time to time. Read more

Found this cool color scheme collection through the welovewp.com gallery.

It’s a nice collection of colors to inspire any project. Thank you Tim for sharing!

Color Scheme Collection

*Addition:

One more thing. Just discovered this little color tool on Tim’s site as well. Take a peek.

Looking for a way to spice up your unordered lists?

Check out this smattering of free bullet points.

Free Website Bullet Points

How I Built This Site

If you are new to WordPress or just curious, you may be wondering how I built this site - wpforsale.com.

It’s not rocket science, but I wanted to share my experience with you so that you may find the tools and resources I am using helpful in your next project or website.
Read more