Rollover effects with jQuery

Well laura wanted to do some roll over effects on one of her sites so I had to figure out how to do that.  Well after lots of searching this was the solution I came up with.

First download jquery.js and upload it to the server

Second add these lines of code to your header.php or scripts section of your site:

<script type='text/javascript' src='location of jquery script'></script>


<script type='text/javascript'>
 $(document).ready(function(){
 $("img.a").hover(
 function() {
 $(this).stop().animate({"opacity": "0"}, "slow");
 },
 function() {
 $(this).stop().animate({"opacity": "1"}, "slow");
 });
 });
 </script>

Then edit the CSS of your site and add these classes (styling may vary!):

div.fadehover {
 position: relative;
 height: 238px; /*this is to space your images*/
 width: 360px;
 }

img.a {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 10;
 border: 2px;
 border-style:solid;
 border-color: black;
 padding: 5px 5px 5px 5px;
 }

img.b {
 position: absolute;
 left: 0;
 top: 0;
 border: 2px;
 border-style:solid;
 border-color: black;
 padding: 5px 5px 5px 5px;
 }

Then you will just need to add these lines to your page:

<div class="fadehover">
 <img src="startimage.jpg" class="a" alt="" />
 <img src="endimage.jpg" class="b" alt="" />
 </div>

After doing that you should have your achieved effect of the roll over and image swap

Firebug – Firefox CSS Analyzer

2009-04-03_084118So last night I was bored and decided to redo my entire website (again). I just changed the theme about a week ago, but the more I dug into it the less I liked it and decided I would spend a little more time redoing my blog. After picking a theme I put it on a local copy of WordPress and started banging away. I started changing header images and fixing CSS issues with AJAX overlaps and image overlaps and fixing up a few other issues I noticed.  This is usually pretty typical for themes I have found in the past.  You get what you paid for and because all these themes are free I guess that would make sense.

One of my co-workers turned me onto Firebug which is a Firefox plugin that reads the CSS and breaks it out into a tree structure so you can see what is really going on behind the scenes with formatting.  This application saved me probably about 2 days of frustration searching through the CSS and the PHP files trying to find the correct classes and div’s to edit to make it look how I want it to.  The program allows you to edit the CSS on the spot so you can see if what you thinking works…this is great for things like spacing or overflow or text size.  This application is a must have for any web developer or anyone who likes to tweak their WordPress themes to get the most out of them.

Change Default Uploader in WordPress

2009-03-16_154225For some reason some of my sites always freeze with the flash uploader, and chances are if I am bulk uploading I will just upload via FTP.  I searched around for a long time for a plugin that would control the default uploader for WordPress and finally found it.  You can change it via the plugin WP-CMS Post Control it does a little more than just change the default uploader but it does work.

Cforms II – WordPress Contact Form

2009-02-02_091012I wanted to wait until someone actually submitted a form using this plugin before I wrote about it.  This plugin allows you to create contact forms, or any forms really, inside WordPress.  It allows you to choose all the basic stuff like checkboxes, input fields, radio buttons and has a nice little CAPTCHA addon.  To create the forms it is more or less drag and drop onto a new form.  It also allows you to control the messages that come back when required fields are missing or if the form went through successfully.  Then inside WordPress Admin you can view all submitted forms in a nice little table and export all form submissions.  You also have the ability to push the submitted form to an email address and you can specify an SMTP server to use or you can just rely on sendMail function of PHP.  I would suggest using the SMTP settings as this will insure that your email does not hit spam filters of the receiving email box.  So far this plugin has worked out great for my ARP website as it has cut down on all spam by 100% and we are now getting more complete information thanks to the form validation features and it is all contained inside WordPress.

The homepage for the plugin is sort of interesting as it is a food website but if you read the content you will notice you are in the right place.  I would highly suggest this plugin for anyone who needs a form inside their WordPress Blog.

Cforms

WordPress Role Manager

2009-01-27_211815Well now that I have converted ARP’s website to use WordPress as the CMS I wanted to create users that could edit and write pages and do nothing with the rest of the website.  The default roles that WordPress comes with do not allow for this type of customization out of the box.  Well after some searching I found a Plug-in to do the management for me.

This plug-in is ajax controlled so as you click it to check the box it happens automatically.  I was able to create a new role and assign the privileges as needed and I think that it is going to work.

I have attached the plug-in to this post for reference.

Role Manager 2.2.3

NextGen Gallery Short Codes

Looks like NextGen Gallery is changing their short codes to display their galleries and such.  I think that this is probably one of the best plugins for WordPress that I use.  See the change of the codes below.  Looks like the old codes will still be valid but you should switch to the new ones as new functionality will be based on these shortcodes.  Sounds to me like there might need to be a SQL statement to update those codes I need to write.

[ gallery=x ]  => [ nggallery id=x ]
[ album=x,compact ] => [ album id=x template=compact ]
[ singlepic=x ] => [ singlepic id=x w=width h=height ]
[ imagebrowser=x ] => [ imagebrowser id=x ]
[ tags=abc,def,… ] => [ nggtags gallery=abc,def,… ]
[ albumtags=abc,def,… ] => [ nggtags album=abc,def,… ]

WordPress Cleanup – Categories and Tags

So this past weekend I decided that I had way too many categories and my tags were not correctly distributed or representative of all my posts.  After reaching about 350+ posts it has become a little bit of a bear to manage these two things in a bulk fashion.  So being a database kind of guy figured I would go directly against the database to just write some update statements to change this.  Well, the data model is not that easy to understand and I was not able to really decipher how the relations are kept.  So I looked in the direction of plugins for WordPress.  Well luckily after a few tries I found a few things to help manage everything very effectively.

Bulk Merge/Rename Categories – This application allows you to merge and rename categories

Simple Tags – This is the killer app, this one allows you to bulk update your tags, delete tags, merge tags, duplicate tags, also it adds a new widget for tags that is more configurable and easier to use.  The bulk update tags feature is great because it is a super easy way to manage your tags on existing posts.

I also found a few plugins that are pretty helpful:

Extended Category Widget – This allows you to add things like counts next to your category list widget

Yet Another Related Posts Plugin -This adds a little section on your posts the relates back to previous posts, you can set and determine how it makes these cross references

WP-Cumulus – This adds a little flash 3D tag cloud which I have added to my website.  This is just kinda fun to play with

Another New Admin Theme for WP 2.5

image I found another WP Admin Theme that I am a big fan of because for some reason Fluency kept causing me a couple of issues as I found a few pages were dead and in all honesty I wasn’t too keen on the color usage.  Baltic Amber Admin Themes and Schemes is the name of the plugin.  I like this plugin because it works directly with WP’s new color scheme options for each user.  After installing the plugin you just go to users then click on your user and then change the theme color.  It also allows you to easily customize to use any color scheme you want so you are not limited in any way.  I haven’t played around with the CSS sheets too much yet but chances are I will change the fonts around and probably the sizes as I usually like to be different

Since I do all my blogging from Windows Live Writer I am not too worried about the Admin interface as I use it more to just manage and maintain my site. But this plugin makes for some nice effects and colors, currently I am using the Asphalt Color scheme.

New NextGen Gallery View Modes

Using a new plugin from the NextGen development group I now have a few more ways to display a slide show. You can check out their plugin for WordPress here it is an easy install and adds some nice effects.