I am learning Drupal finally.

As a person who learns by doing, I have three separate Drupal installs going at once and I expect to have two working websites out of the deal within a month.

Don’t worry, I’ll keep you updated.

I am using Drupal 6.16.

First thing I ran into is the register_globals is enabled issue. To correct this, you need to add a line of code to the php.ini file. You might not have one of those. You can create one if you are feeling especially creative. I tried. It broke my site. I am using Hostgator hosting which I highly recommend [affiliate link]. To get a php.ini file that works, just hop onto the Hostgator chat and request one.

Once you have that php.ini file, just add this to the end of the php.ini file:

php_flag register_globals 0

I usually use Coda for code editing. I know there are better apps out there for this, but I really like the ftp editing abilities. I save, the file is uploaded and done. No download and change, upload, etc. It’s easy and I like it.

The point is, you can’t use Coda for this. You have to log in to the cpanel and select FILE MANAGER. Select the newly added php.ini and edit.

Add that one line of code to the end and save. Problem solved.

Note: this works for Hostgator hosting. If you are on another web host there are other options available. Here are a few: http://drupal.org/node/216882

                          

(from http://www.w3.org/TR/CSS21/cascade.html#specificity)

A selector’s specificity is calculated as follows:

* count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
* count the number of ID attributes in the selector (= b)
* count the number of other attributes and pseudo-classes in the selector (= c)
* count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Example(s):

Some examples:

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=”" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

In the above example, the color of the P element would be green. The declaration in the “style” attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.

                          

The thing I love about web design is getting to learn something new everyday. There are a few lessons this past year that stand out. Maybe you can relate.

1. Do not buy software that does not have a manual or help files.
   If a company doesn’t take time to write out a FAQ or help page, how well do you think the software is written?
2. Do not deal with Hostway.
   There is no nice way to say that. Hostway has perfected the art of pissing people off.
3. Do not buy web design from a pawn shop.
   Seriously. Don’t. They use Hostway.
4. Always get the user manual and read it from cover to cover.
   Even if it’s an eBook. I know it hurts to read a book sized PDF, but sometimes it’s worth it.
5. Say no to jobs that are outside of your business plan.
   Sometimes even long time customers have to be cut loose if the project will take time away from reaching your goals.
6. If someone wants flash drive graphics, refer them to your least favorite competitor.
   They also probably want a one page website that just shows different things when you click. They might also want 40 high res graphics that load fast and look exactly the same on every monitor. They also probably know everything about websites so they don’t need to listen to you.
7. Test new software for at least a month before paying for it.
   See also #1.
8. Accomplish something every day.
   Taking on large projects means a project will not be finished or checked off the list every day. Try to have a few small projects that can be checked off because finishing a project feels like progress and progress = happy.
9. Help someone everyday and expect nothing in return.
   It’s good for your Karma. Check twitter. There are always people asking for help on something or other.
   
10. Clients do not make the rules.
    Just because a client really, really wants this website live ASAP does not mean you have to spend every day and night working on it. One client is not worth burning yourself out on. Steady pace wins the race.

What have you learned this year?

                          

I have a new server now, so I am in the process of transferring all of my sites and my customer’s sites from the old hosting account to the new server. The old Dreamweaver sites all went smoothly as expected. The newer WordPress sites on the other hand, have been a little more challenging.

What I learned is there is a proper order for transferring WordPress sites to a new hosting account. It goes like this:

- Clean up existing Blog
- Use EXPORT tool from old wordpress
- Apply for new hosting (transfer existing domain)
- Propagate DNS nameservers
- Fresh install of WordPress (via Fantastico/Simplescripts/Independent) on new hosting
- Adjust permalinks on new hosting
- Use IMPORT tool in new wordpress
- Transfer via FTP images from wp_content/uploads
- Upload/Transfer current theme to new hosting
- Install new plugins to new hosting
- If necessary, meddle with .htaccess on new hosting

Thanks to Pigduck over at wordpress.org for that information.

Even if you do everything right and in the correct order, sometimes the themes cannot transfer correctly. Notice Custom Design Tool’s new design? It’s not the only site that is looking a tad bare today. This is my own custom child theme based on the Hybrid Theme framework.

Another thing I learned is that if you and tech support are having communication problems of any sort, get off the line with tech support immediately. It is just not worth the headache to try to work through it.

                          

Why do some fields in the online form have an ugly yellow background?

The culprit is the the Google toolbar that people often install in their browser. Part of the AutoFill feature is to highlight in yellow, #FFFF80, the fields that AutoFill can fill. These are form fields with names like “Name” and “Email”.

How do I get rid of the yellow?

You can specify a background color to the form field. Not just specify, but really, really specify with the !important css hack.

Add this code to your css:

/* non-yellow autocomplete */
input { background-color: #ffffff !important; }

                          

Assuming you have basic HTML/CSS skills, you can find everything you need on the web available at no cost to design a nice looking, professional website.

First we will start with some web design tutorials.

Next you need a grid system to hold up your site structure. Try the 960 Grid. Very good, very free.

960 Grid

Then you need a color palate. For the best custom color palates that always look good, use the Color Scheme Designer.

Color Scheme Designer

Now some graphics. Now that you have an awesome color theme, find some graphics to match. Some free stock photo resources are listed here.

Maybe you want a drop down menu. Try the suckerfish family. It has been built on and improved so many times, you should easily find something suitable. Here is a link to Son of Suckerfish.

How about some cute icons? RSS, twitter birds, download, etc. can all be found by the hundreds from any graphic or web designer that is trying to get web traffic. Smashing Magazine has a post with some really high quality free icons. Here is another good resource for free icons.

Free Icons

If your graphics and icons are looking a little clunky next to each other, you can edit them with Gimp.  Gimp is a free image editing program along the lines of Photoshop.

Gimp

At this point, you have everything you need to be able to put together a reasonable looking, valid xhtml/css-based website.

W3C Validation Service

                          

Your favicon should be viewable across multiple browsers. Different browsers read things differently, so using two separate favicon images will assure the graphic will have a transparent background in all of them.

Create a new 16×16 pixel document with a transparent background in Photoshop. Draw or paste a graphic into the space. Part of a logo or image that carries the brand is best.

Save the file as Windows .ico format into the images folder of the website. In Photoshop CS4, the save as .ico format option is built in. CS3 and below requires an additional free plugin to have .ico as an available format.

Next, use the same imge and save for web. This time use a .png 8 format and 16 colors. Put it in the images folder again.

Put this code in the between the head tags of each page you want the favicon to show up on. If you are using a template or include file, better yet. You only have to do this once.

<link rel="shortcut icon" href="/http://yourdomain.com/images/favicon.png" 
type="image/x-icon" />
<link rel="shortcut icon" href="http://yourdomain.com/images/favicon.ico" />

That’s it! You have a new transparent favicon. If it isn’t working, make sure you uploaded all of the images and the pages.

                          

A link which shows the full URL of the page being linked at. Some links only show relative link paths instead of having the entire reference URL within the a href tag. Due to canonicalization and hijacking related issues it is typically preferred to use absolute links over relative links.

Example absolute link

<a href=”http://customdesigntools.com/folder/filename.html”>Cool Stuff</a>

Example relative link

<a href=”../folder/filename.html”>Cool Stuff</a>

                          

These classes are available through the Skills and Technology Training Center in Fargo, ND. Check the STTC schedule for class availability.

Dreamweaver
Photoshop Web Production

Web Design Links

These should help with learning web design.

W3

• Browser Usage
• World Wide Web Consortium
• Validate your site
• Metatag Analyzer
• HTML Techniques for Web Content Accessibility Guidelines 1.0
• CSS Techniques for Web Content Accessibility Guidelines 1.0
• Techniques for Web Content Accessibility Guidelines 1.0
• Web Content Accessibility Guidelines 1.0

Dreamweaver Extensions

• Adobe Exchange
• http://massimocorner.com

Browsers

• Download Firefox
• Firefox Web Developer Toolbar
• 35 More Firefox Plugins

CSS

• CSS three column layout
• Recommended books on CSS
• CSS flyout menu (untested)
• CSS footer stick
• CSS Zen Garden
• Little boxes – multi-browser CSS hacks

Additional Resources

• A List Apart
• Test your web site in different browsers

Suggestions?

If you know of a good resource that should be listed here, email me.