So ... here you go, this is what I've got so far ...
As for the photo, I did what you suggested - reverted back to the default WP theme, and it seems the problem is with the theme I'm using now. Since it's a paid theme, I know you can't tinker with it and try it out yourself, but since you said it happens quite often, would you have any idea how I would go about fixing this? Again, I'm quite a newbie with all of this so kindly excuse me.
As you rightly point out, I can't tinker with the theme itself, but I can look at the CSS in detail using either Firebug in Firefox or Developer Tools in Safari. From doing this, I can see that the theme defines specific CSS for the image that get_avatar() returns and it's this CSS that is not playing well with WP Biographia. While in Safari's Developer Tools I've been able to modify the theme's CSS on the fly to get the image to centre correctly; have a look at this Gist to see what you'll need to do.
The next question will probably be "how do I get the new CSS into my theme/site?". Take a look at Hacking WP Biographia's Appearance With CSS here. The section towards the end of the post shows how to create a custom.css file for, err, custom CSS. While the post is WP Biographia specific, the custom CSS technique will work for all cases, including yours.
1. I viewed the plugin under Chrome and the social media icon links look nice and clean. Under IE and Firefox (both latest versions), however, the icons look jagged and pixellated. That being said, how exactly do I go about changing them to icons with a bit more color? I see the "Alerternate Icon Set URL" field under the "Content" tab of the WP Biographia settings, but I don't really know how to use it. Do I just Google "alternate icon sets for social media icons" for example? And then just copy/paste a search result's URL in that field?
The plugin and its icon set have been tested under Chrome, Firefox and Safari (Mac and Windows) and under IE (IE 8 IIRC) and I haven't seen any pixellation of the icons. I develop on a Mac but later today I'll fire up my Windows Virtual Machine and take another look.
For alternate icons sets, there's a FAQ for this; take a look here (there's a FAQ for quite a lot of things and the list grows with each release of the plugin!).
2. Is there any way to change the color of the thin box around the author box to match my theme's primary color of maroon?
Absolutely. Take another look at Hacking WP Biographia's Appearance With CSS here. The key piece of information for you is this ...
The main container is styled by wp-biographia-container-xxx, where xxx is one of top, around or none depending on your chosen Biography Box border option.
From looking at your site, you'll need to change the CSS for the .wp-biographia-container-around class, in the same way as I've written about above.
3. If you don't mind taking a second look at my page that I gave you a link to, you'll notice that there is an ad above my author box. The plugin I use for that is Ad Injection (v1.2.0.12). I have that bottom ad set to be placed at the bottom of every post just as WP Biographia is set to do the same. However, I would like the author box to be placed right above that ad instead of below it. I'd like our readers to be able to read a post and see who wrote it immediately before being interrupted by an ad. (Though I know I could just have the author box appear at the beginning of a post, but as you can see, that would cost us. Also the same reason why I can't just remove that bottom ad). If there was any way to make this possible, I would be supremely grateful.
Both WP Biographia and Ad Injection use the WordPress the_content filter hook to append their content (Biography Box and ads respectively) to the end of the post content. From looking at the source of the Ad Injection plugin here and here, I can see that both plugins use the same filter hook priority (10) when the filters are enqueued. In this sort of circumstance, which filter gets called first depends on the order they were originally enqueued, which isn't usually something you're in control of. Luckily, the Ad Injection plugin looks to have an admin setting that allows you to change the default priority (it's called the_content_filter_priority in the plugin's settings, I'm not sure what the setting itself is called in the admin screen for the plugin), so if you increase the priority, it should make the Ad Injection plugin's filter for the_content be fired later than WP Biographia's filter (a higher priority fires later). You might have to play around with this a bit, but from what I can see it should work.
Actually, the notion of a configurable filter priority is an excellent one, I'll be building this into the next version of WP Biographia to allow for just this sort of use case.
OK. I think that this is everything you've asked for covered, apart from the IE icon set thing, which I'll look at later today and report back.
-Gary
