CSS3 Gradient Generator Tool

For my next project I am working on achieving a web 2.0 look/feel and wanted to include shadows and gradients. I came across a css gradient generator tool that I absolutely love and made my life easier so I thought I would post it here really quick. You can find it here: http://www.colorzilla.com/gradient-editor/

Do more – Write less

Something occurred to me today that is likely quite obvious to seasoned professionals but I really never gave it much thought. Over the past few years I have started numerous website projects. They usually are a significant undertaking and require lots of time to complete(seems like I rarely finish them). The thing I realized is that on each one I always start from scratch. When I have an idea to make a website I will create a brand new text document and start from building from there. I never save a template or code snippets to reuse. I have to reinvent the wheel every time and it is taking me a lot of time.

My Idea is that I need to start reusing some of my code and writing/developing it in such a way that my work can be useful for other projects. I think it may take a bit more effort initially to do this, however in the long run it could save me countless hours. I am positive that as soon as my current project is completed (hopefully I will finish it someday)I will just come up with yet another one to start. If I already have some of the building blocks ready to go this greatly increase the odds of me finishing and decrease the amount of time it will take. In the end I hope this will enhance my ability to monetize my various online efforts. I think the best place to archive some of these snippets is right here on my blog. I am almost positive that closely follows this blog yet, but if there is or when you do come (hopefully) you can expect to see some of my templates and code snippets coming. Best of all is I intend to release them all free to use for any reason.

Remove Extra Line after Smiley Faces in WordPress

So I noticed in one of the wordpress blogs I am working on that while the emoticon (smiley faces) I was using were properly being converted into images, they all had an extra line spacing after all of them. Needless to say this was quite annoying and screwed up the paragraphs in my posts. Getting rid of the extra spacing around the smiles was quite easy once I knew the correct search terms (display emoticon inline). After a bit of digging and fooling around with the styles in chromes Developer Tools I figured out my smiles were inheriting the “display: block” from another class. To solve the problem I included the following line into the style sheets and all the extra spacing was removed.

img.wp-smiley {display: inline;}

Source: http://lorelle.wordpress.com/2007/09/30/the-art-of-smilies-in-wordpress-blogs/

NextGen Gallery & NextGen GalleryView Plugin Problems

I have been working on another blog that I intend to include a lot of pictures in. The default wordpress gallery was not meeting my needs so I decided to try some free gallery plugins to see if I could get any of those to work for me. The NextGen Gallery plug-in seemed to fit the bill, and then after a bit more digging I found a plug-in extension called the NextGen GalleryView (yeah I know names are very similar) which did exactly what I wanted.

 After installing and uploading a gallery and adding “[galleryview id=1]” it to one of my posts, the filmstrip / carousel at the bottom of the gallery (the single feature that I was most interested in) was not working properly. The thumbnail images showed up on two different lines which messed up the whole filmstrip. Also, there was a strange black box in between each one of the thumbnails.

 In the dashboard under the NextGen GalleryView options when I would view the example / preview it appeared the whole thing was working just fine. However when I paste in the short code and try to view the blog post itself the filmstrip would be all messed up. I am not a word press expert, but I am assuming that if the gallery preview is working in the dashboard but not your posts, then it is likely a theme conflict you are dealing with.

 To me it seemed like the spacing between each image was off and a HTML bullet was being added into the list between each picture. I troubleshooted (is that a word?) the problem in the Chrome developer tools by disabling the different styles one by one to help me narrow down what was causing the problem. I tried to disable anything that had to do with spacing, margins, padding etc until the filmstrip looked like it should. I eventually found that my chosen theme (Adventure Journal Theme) was adding a margin-left to everything as well as adding a stylized bullet to all the list items on the page.

To solve the spacing problem and get all the thumbnail images on to the same line I set margin to 0px in the “frame” class which is found at about line 63 in wordpress-nextgen-galleryview/GalleryView/css/galleryview.css file

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {}


/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {margin:0px}

To get rid of the square bullet that was being inserted between each thumbnails I had to edit the style sheet for the theme. For my theme it was located at wp-content/themes/adventure-journal/style.css. I changed

ul li{




ul li{



And viola…I now have a working image gallery with an awesome filmstrip at the bottom.  I imagine using this plugin with other themes you might have similar problems which can be solved in similar ways.

Centering A Div – Quick Reference Guide

I have been designing web pages using CSS for years now I have to admit, I still have to regularly look up how to center a div. It seems simple enough (maybe I am too used to the old HTML <center> tags), but I as am constantly struggling with it I decided to write a quick reference guide.

Center a Relatively Positioned Div

.centeredDiv {
width: 500 px;
margin-left: auto;
margin-right: auto;

Note: You must set a width for this to work

Center Absolutely Positioned Div

.centeredDiv {
width: 100px;
left: 50%;
margin-left: -50px; /*half of the width*/

Note: This will center the div relative to the first parent element that is not positioned static or the <html> block if no element is found.

As I was figuring all this out (again) to write it down, I think I am realizing the reason why I always seem to get it wrong. You have to employ different strategies depending on whether or not the element you are trying to center is absolutely position or relatively positioned.


Source: http://www.thesitewizard.com/css/center-div-block.shtml
Source: http://www.sitepoint.com/css-center-position-absolute-div/
Source: http://www.w3schools.com/css/css_positioning.asp

WordPress captcha problems

On the web one of the most useful tools to combat spam and reduce abuse is a captcha. For this blog I felt that a captcha system was a “must have” as I intend on letting users input comments. I found a free wordpress captcha plug-in made by bestwebsoft (http://wordpress.org/extend/plugins/captcha/)that looked very promising. However to my dismay after installing and activating the captcha plugin, the system did not work. I tried installing other captcha plugins, but they all required API keys and this was unacceptable to me. So I decided to try and get the bestwebsoft plugin to work.

I could tell that the captcha system was activated because it would give me an error if I tried to submit a comment, however the catcha form itself was not showing up in the comments section. To trouble shoot I reactivated the default theme that came with wordpress and the captcha form worked perfectly, so I knew it was a theme issue. It appears that whoever designed the theme I am using didn’t use the default wordpress “comments form” and was manually creating the form from scratch. In order to get the form to show up all I needed to do was include the following line of code in themes comments.php file where I wanted the form to show up.

<?php echo cptch_comment_form();?>

The next problem was that a mysterious “1” was being generated after the captcha form. To solve this problem I had to edit the function “cptch_comment_form()” in the captcha.php plugin file to not return anything. (i.e. from “return true;” to just “return;”). To be truthful I am not entirely certain what all the implications of doing this will be, but the captcha system appears to be working fine.

I imagine other wordpress themes will also be designed this way and will require a similar work-around to get the captcha plugin working.


It appears this problem has been fixed in the most recent version, so if you are still having this issue try updating the plugin

Customizing WordPress Headers

Word press is simply amazing…I’m constantly amazed by the quality of open source software, but that is another topic for another day

As I was setting up my installation for this blog I wanted to customize the header image and style.  I turns out this tasked proved to be a bit more tricky than I had first imagined.  I spent more time then I care to admit trying to edit the header div and image using the appearance editor tool in the admin area.  What took me so long to figure out was that there are multiple css files and the properties I was trying to change were in a different css file altogether.  Even more tricky was that this file was not available in the appearance editor tool.  I found it  in the  “wp-content/themes/” folder.

Now I know that this may be a no-brainer for some, but for me it was a bit tricky because it was not what I was expecting. Here is a trick I learned that might make this easier in the future to help identify the location of the correct css file. In many modern web-browsers you can right click and choose to inspect the element.  This will give you a run down of all the css properties that are currently being applied to that element along with the name/location of the css file (In Chrome you have to mouse over the file name to get the location).

So, if you want the customize the header for your word-press blog just right click on the header somewhere and select “inspect element”.  From here it is simple to figure out the location of the files with the properties you want changed.  After that use your favorite FTP program to download the file and make the desired changes.


Unwanted Border around an Image Link

Turns out I am having a harder time customizing this wordpress installation than I imagined. The theme I chose has a default css mouse rollover effect applied to all the anchor tags. I like the effect for the text, but this same effect was applied to the border image and it looked awful. I tried setting the border to 0 with the HTML but this did not work. What I had to do was create a completely new class setting all the attributes to none and then apply this class to the anchor tag around the header image. Like this…

a.headerImage {color: none;border: none;}
a.headerImage:hover {color: none;background: none;border: none;}

and then use the following html to assign the class to your anchor tag

<a href=’http://yoursitehere.com’ class=’headerImage’>


Source: http://www.ssi-developer.net/css/link-colours.shtml