HaggardHosting

Easiest way to create Favicon

Glenn Haggard — Sun, 17 May 2009 03:32:24 +0000

Also known as favorite icon, website icon, shortcut icon, url icon, bookmark icon.

The power of marketing is amazing. Humans get accustomed to seeing certain things (like logos) and immediately recognize and have a sense of comfort with that household product. The favicon is an excellent branding tool. Not only does it show up next to the address bar in your browser, but it also is displayed on each tab (assuming you are using a browser that supports tabs), and also in your favorites. The human eye will focus on the icon as soon as it’s recognized and disregard the text.

To create a favicon you must first have an image that will be your logo. The image has to be in either 16×16px or 32×32px size and either 8-bit or 24-bit color. Once your image is selected to easiest way to get it to the proper size/format is to use a website the creates it for you. Google for the word "favicon" and you will get many hits that will allow you to just upload your image and then you can download the finished result. Here are a couple of examples:

http://www.favicon.cc/
http://www.html-kit.com/favicon/

Once you have your image upload it to your webserver. Then, modify the your code between the and of your website with the following text:

If you are using Wordpress this will be in the header.php file within your theme.

How to test your website with a different browser

Glenn Haggard — Mon, 05 Jan 2009 14:00:40 +0000

Who’s running Ineternet Explorer 6 anymore? Or even Windows XP? Well, I guess some people are. So, if you’re developing a website and you need to know how your website looks using different browsers on different operating systems, you’ve got a challenge. You could load a virtual machine and then install the version of browser that you want to test, but there are so many different combinations. That’s a lot of work!

I found a free tool that will save you so much time.

http://www.crossbrowsertesting.com/

This website offers several different browser/operating system combinations. I used this to find out that Internet Explorer 6 doesn’t support transparent background in PNG files.

Removing IMG (image) border using CSS

Glenn Haggard — Mon, 29 Dec 2008 14:00:38 +0000

Most people use an editor when creating blogging or creating their website. Adding an image to the website and/or blog entry is simple because most editors have a button that prompts for the source of the image and then creates the code with the proper alignment. For example:

Well, if you want your users to be able to click that image as a link to open another website or document it might put a blue hyperlink border around the image. Most website images are designed that most people understand that it’s a link without the link border. In fact, most people would consider it a bit old fashioned to see a link border around an image. You might be using a theme for a CMS like Wordpress or Jumla that has already taken this into consideration. If not, there are a couple of ways to remove it.

First, you can modify the HTML code directly. Using the previous example it would look like this:

style="border-style: none" src=http://www.yourdomain.com/your-image.jpg />

Second, you can modify the CSS (Content Style Sheet) which is a much more efficient way. Using an external CSS allows for all pages to be updated at once. To use an external CSS you must call it out in the of your HTML. If you’re using wordpress this is most likely located in the header.php file of your theme. An example would be:

In Wordpress header.php:

In HTML website:

Then, once you have an external style sheet just add the following as a new line:

img a border:0;

Refresh your website and the border around all images should be gone.

How to change MySQL root password

Glenn Haggard — Mon, 22 Dec 2008 22:00:27 +0000

I read a great blog today about SQL tricks for Wordpress and thought I would create an additional SQL blog about an issue a co-worker and I ran into a while ago…”How to change MySQL root password”. This blog assumes that you have shell access to the server that is running your MySQL database. If you only have C-panel access then you will just have to contact your provider. Also, it’s important to understand that the root user for the operating system is not the same as the root user for MySQL. They are completely separate accounts.

First you must SSH/Telnet to the host that is running MySQL and then type the following command:

$ mysqladmin -u root password NEWPASSWORD

Wordpress 2.7 is released

Glenn Haggard — Thu, 11 Dec 2008 21:52:09 +0000

The long anticipated Wordpress 2.7 was released. It has a great new design to it’s admin page and lot of great new features which you can read about here. Also, below is a video that you can watch that illustrates some of the new benefits.

5 easy steps to create a Web 2.0 icon using Gimp

Glenn Haggard — Thu, 11 Dec 2008 11:00:04 +0000

This blog will teach you how to create a button for your website that has a nice look and feel to it. The contents of this post were created using Gimp version 2.6.2. So, the screens might look a little different than your version. You can get the latest version and documentation from the Gimp website. Please leave a message with your feedback about this blog, I’m curious to get others opinions.

Step 1 – create the canvas to work with

Create a new image that is the size of the button that you wish to create by clicking on File from the drop-down menu and then select New. For this example I’ve chosen 200px by 100px. I recommend a tranparent background so that your button with seamlessly integrate with whatever color website you place it on. To set the backgroug transparent click on the “Advanced Options” and choose transparent from the “Fill with” field. The default “Fill with” is background color (white) which will make your button have a white background even if you put it on a website that has a different color.

Step 2 – create the shell of the button

Before we get started with the button you need to create a new transparent layer and call it “Button”. From the drop-down menu Layer select “New Layer” and change the name to Button.

This will be for applying a shadow later. Without this first additional layer the shadow affect will apply to the full canvas instead of just your button. Now using the rectangle tool () create a rectangle. Then, select the rounded corners option . The higher the radius the larger the rounded corners will be. You can move the slide bar left and right and watch the results on the canvas. Now pick a color to fill your button with. For this example I chose the color #FCAF3E which is the color of the banner of Gimp’s home page. Choose the fill tool () and then click on the foreground () and set the color that you want by either pasting the HTML code or just picking from the color palet. Now, just click in the center of your rectangle and it should look like this:

Step 3 – create glossy affect

Select the rectagle tool again and this time create a rectangle inside the rectangle that you already have. Make the bottom of this new rectangle start around the middle of the existing rectangle and draw upwards leaving a little bit of room at the top like this:

Now select the gradient tool () and draw a line from the bottom of this new rectangle to the top. This will create a fading affect from the colors that are in your foreground/background (). It will fade from the foreground (orange in my case) to white (in my case). Now your image should look like this:

Step 4 – Add some text

Select the text tool () and draw a rectangle where you want your text. This should be centered vertically and horizontally. Don’t worry worry if you draw it wrong, it can be moved. Now, type the text you want in your button. There are several text options on the left panel that I’m not going to go into. They are your typical MS word-like tools (font, colors, size, bold, italics, etc.) that allow you to put some pizaz in the text. Now your button should look like this:

Step 5 – add shadow

Select the layer that you created in the beginning called “Button”. From the filters drop-down menu select “Light and Shadow”, then “Drop shadow…”.

Now your button should look like this:

Here is an example of the button after saving as PNG and putting it to use on a website .

Here is a copy of my XCF file that I used to create this button. You can download it and manipulate it within Gimp if you wish.

How to install Wordpress

Glenn Haggard — Mon, 08 Dec 2008 08:00:43 +0000

I have seen many people asking for help on the internet on how to install Wordpress so I thought that I would create a post that would hopefully be a good enough explanation for first timers. This blog assumes that you already have hosting and a domain name setup. If you don’t, we can help with that. Just send us a request for hosting and/or domain name and we can set one up for you. Before we get started there are a few tools that you need.

FTP client – I recommend FileZilla. It’s best feature is how easy it is to use. It works on multiple platforms (Windows, Linux, BSD, Mac OS X). Also, it’s FREE!!!
Text editor – I recommend Notepad++ for this. It understands many programming languages and can help with syntax highlighting. Also, it’s FREE!!!
Zip extractor – I recommend 7-Zip. Also, it’s FREE!!!

There are 3 main steps to setting up your Wordpress site:

Step 1 – Create a database

Login to the control panel of you hosting provider and select the option to create a new MySQL database. Setup a userid to have full access to this new database. Depending on the provider your web server may be able to access the database by the host name of “localhost” or it may have to use the full name like “mysql123.hostingcompany.com” (this will be important during the next step). Make sure to take note of the Database Name, username that you gave full access to, password of the DB user, and the hostname of the DB server because this information will be used in step 2.

Step 2 – Upload the Wordpress code

You can get a copy of the latest version of Wordpress here. You will need to download this to your local computer and then unzip the contents to it’s own folder using 7-Zip mentioned above. Once 7-Zip is installed you can just right-click on the zip file and there will be a new 7-Zip option, then choose ‘extract here’.

Next, find the wp-config-sample.php file and rename it to wp-config.php. Edit this file with Notepad++ mentioned above and modify the following lines:

define(’DB_NAME’, ‘dbname‘); // The name of the database
define(’DB_USER’, ‘dbusername‘); // Your MySQL username
define(’DB_PASSWORD’, ‘dbpassword‘); // …and password
define(’DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this value

Replace the variables ‘dbname‘ with the name of the database, ‘dbusername‘ with the username that you gave full access to the database, ‘dbpassword‘ with the password of the DB userid you created, and ‘localhost’ only if your web server needs to access the database remotely (you might have to ask your provider). Note: do not replace the tics ‘ marks on either side of the variable.

Now your ready to upload the files, but where you put them depends on whether you are planning on using Wordpress for your entire website (http://www.example.com) or install Wordpress as a subsection (http://www.example.com/wordpress). Most people just use Wordpress for their entire site, which I also recommend. If you want Wordpress to be your main site just upload the content to the root of your domain. So, the directories in your root should be wp-admin, wp-content, wp-includes, along with other numerous files and any other files/folders that were provided by default by your hosting provider.

Step 3 – Finish the install

Hang in there, you’re almost done. Now, you need to open the browser of your choice (Internet Explorer, Firefox, Safari, Chrome) and go to http://www.yourdomain.com/wp-admin/install.php. Of course, replace “yourdomain.com” with the name of the domain where you are installing Wordpress. It’s amazing, but that’s all there is to the install. Make sure that you write down the password that presented at the end of the install so because that’s the only id/password to manage the install. If, for some reason, you didn’t write it down or lose it later you can always go into the MySQL database and change the password. I wrote a blog How to recover lost Wordpress Admin password or E-mail.

Post setup steps

I have written a few blogs about some additional steps that most installations will need after the first login. I will list some of them below. I will also be adding more to the list over time.

How to add PHP code to a Wordpress widget

Glenn Haggard — Fri, 05 Dec 2008 03:41:00 +0000

It wasn’t until recently that I have ever had a need to put PHP code into a Wordpress widget. This was due to a plugin that I downloaded called Flashfader. This plugin provides the ability to put a Flash on your Wordpress blog that will rotate pictures. The only way to use this is with PHP code which doesn’t work in a Wordpress widget by default. In order to use PHP code in a widget you need the Executable PHP Widget.

How Executable PHP Widget works

This is a very simple plugin and installs just like any other plugin.

Download the zip file and unzip.
Upload the folder that it creates to the /wp-content/plugins folder
Login your Wordpress admin panel and enable the plugin
Click Design, Widget, and drag the PHP Code: widget to your sidebar
Insert the code into this widget and you’re done

Easiest way to backup your desktop

Glenn Haggard — Mon, 01 Dec 2008 04:49:19 +0000

Have you ever stopped to think about what might happen if you lost your all the data on your hard drive? All of those E-mails, music you’ve downloaded, pictures of the kids, documents that you’ve written, school work you’ve created, etc. How much time and money would be lost?

Depending on the scenario, sometimes data can be recovered by taking your hard drive to a specialist (ie. Sector Logics, Fields Data Recovery, etc.) and they can take the platters from inside your hard drive and re-mount them which enables them to bypass the problem if it was a hardware failure. This scenario is relatively expensive compared to backing up your data proactively and having a readily available restore handy.

To accomplish this most people are purchasing external USB hard drives that you can find at Best Buy, Office Max, Walmart, etc. These usually start around $80 and can go all the way to $1,000 depending on the size of disk that you want and/or need. This requires a little bit of technical knowlege to get it setup.

I found Carbonite.com and it has saved my life! This program is easy to install and the only configuration that you have to give it is what to backup. That’s it! No more info than that! It’s realy that easy. It has several great features above the rest:

Unlimited storage – no matter how many mp3’s or iTunes music you download, no matter how many E-mails you have, no matter how many pictures you’ve taken, it’s all the same price.
Completely automated – it starts backing up files that are created or changed as soon as a file is created (assuming that it’s in a folder that you told Carbonite to backup).
Files are encrypted – As Carbonite backs up your files they are encrypted.
Easy restore – Carbonite offers a very user friendly interface for restores
Off-site backups – all of your files are backed up over the internet. This provides for protection against natural disasters like tornados, hurricanes, floods, etc.

This has saved me several times when my wife has accidentally deleted files. Within minutes I was able to restore the data. All of this for only $49.95/yr.

Please let me know if you have any experience with this product? Thanks!

Using permalinks to make your posts SEO friendly

Glenn Haggard — Sun, 30 Nov 2008 16:53:14 +0000

Have you ever looked at your Wordpress URL and wondered, “who came up with that?” I would like to introduce you to Permalinks. Wordpress permalinks give you the flexibility to have a clear, easy to read, consistent look and feel to your URL’s.

The default permalink settings for Wordpress is “domain.com/?p=123“, who wants that? How would you like to try to explain that URL to someone. It’s definately not Search Engine friendly.

I’m one of those people that doesn’t read the owners manual for something new. I typically fumble around pushing buttons to figure out what it can do. It’s usually only when I get stuck that I resort to the owners manual.

Well, with permalinks I had to break out the manual. There are 4 default settings available from Wordpress on the admin page: Default (example above), Day and Name, Month and Name, or Numeric. I didn’t want any of these choices and found out that there really aren’t a lot of options, but I found one that I liked better than the default offerings. If you don’t like the default 4 that are offered you can choose the custom structure and put any combination of the 10 variables available. I’m currently using /%category%/%postname%/.

Below are the 10 variables from Wordpress:

%year%
The year of the post, four digits, for example 2004
%monthnum%
Month of the year, for example 05
%day%
Day of the month, for example 28
%hour%
Hour of the day, for example 15
%minute%
Minute of the hour, for example 43
%second%
Second of the minute, for example 33
%postname%
A sanitized version of the title of the post (post slug field on Edit Post/Page panel). So “This Is A Great Post!” becomes this-is-a-great-post in the URI (see Using only %postname%)
%post_id%
The unique ID # of the post, for example 423
%category%
A sanitized version of the category name (category slug field on New/Edit Category panel). Nested sub-categories appear as nested directories in the URI.
%author%
A sanitized version of the author name.