Changing the default ‘required’ in cformsII to an image

I recently had a client request a red asterisk instead of the default (required) that comes with cformsII the wordpress plugin. As it was actually my first time using cformsII in any fashion I started with a quick search to see if there was a documented work around to make this happen. While I did find a way to change the default text to a * which I could then have applied a colour to I wondered further if I could do it with an image. I realize that an image was not required for my circumstance but since I was digging into the CSS a bit I figured I should find out if this was possible just incase it ever came up in the future.

If you’re going to do this start by copying the CSS from cformsII into the stylesheet for your site. I learned through a few trials that this is way easier especially if you’re using a code editor with a built in FTP client for editing remote files. Once you have picked through the CSS and styled the code how you like it we’re off to the races.

The (required) text is surrounded by a span and class as seen below:

Code Snippet
<span class="reqtxt">(required)</span>

In the stock CSS you will find that there are a few lines of CSS to display the look of the required text. I deleted all of them and combined the styles to simply:

Code Snippet
span.reqtxt, span.emailreqtxt {text-indent:-5000px; display:
inline-block; background: url(http://filepath/asterisk.gif)
 no-repeat; width:15px; height:15px;}

This is partly things I learned from the CSS Sprites technique (text-indent) and partly trial and error. I had actually tried the same code while I was trying to edit CSS from withing cformsII and it didn’t work inside there. I am not sure why but I assume that I made a typing error the first time. You have to set the display value to inline block or the images will collapse and not be seen. Also don’t forget to define the width and height of the images.

I also tried to set the font-size to 0px but found that in IE it rendered small lines that was the text. After I realized that I tried text-indent again and it worked. I did find that a negative text indent number was required as with a positive one the (valid email required) text did not indent.

This method will allow you to display any image in place of the (required) text on the page. If your client decides to add more (required) fields at a later date it will also continue to work with the new fields. The only thing I was unable to get client proof was the legend. I hand coded the legend at the bottom of the form. This means that if my client adds a new form it will not automatically show the legend at the bottom. I feel this is only a minor draw back as the symbol is widely used for the same meaning and the implementation of a legend at the bottom of the form is marginal in time taken.

You can see the technique in use here.If anyone else has better options for implementing an image replacement for the (required) field I would love to hear about it in the comments.

Bring on the New: CS4 is out

A few weeks ago Adobe announced that Sept. 23 was the release day for CS4. Well today was the big day in the design industry…Adobe announced and is shipping CS4 starting now. I had opportunity to watch the live showing off of some of the new features of CS4 and wow. I answered my own question from a few weeks ago with a resounding yes. I’ll have to check the graphics card on my PC but I will own CS4 in a few weeks.

Lets take a tour of some of the new features. The one that really gets me is the content aware scaling of photos. You have to see it to really get the idea of what this is capable of for designers. Imaging having a picture that is landscape orientation for a magazine and strecthing it to portrait without affecting the quality of the image in the areas that really matter. Photoshop CS4 also improves greatly on the dodge and burn tools, it now protects the highlights and shadows as you use the tools. Effectively this takes some of the responsibility off the designer while dodging and burning photos and puts it on photoshop to only effect the correct areas. One of the final big things for Photoshop is the use of the GPU for rendering photos. By leveraging the power in the GPU Photoshop is able to zoom smoothly in and out of photos as well as render objects crisply at odd zoom number (33.3%). This should also make better use of your system resources and allow 32bit systems that can’t have huge amounts of RAM run the apps with less of a slow down if they upgrade their video card.

I am a web designer so I am most excited about Dreamweaver CS4. I have been using it since they released a preview version a few months back. I have used is as my only editor (reluctantly switching

Dreamweaver CS4 Interface
Dreamweaver CS4 Interface

back to CS3 now) and have had no stability problems. The interface is beautiful and easy to work in. Now the design view uses webkit as a rendering engine so what you see in the design view should render like it does in Safari and Chrome. Remember though this is still no substitute for actually checking your code in native installs of the browser.

Dreamweaver also comes bundled now with the .air plugin for application development. This really excites me as I move forward with my own plans for a .air app.

Code hinting now works for AJAX and JavaScript and the design view has support for Photoshop smart objects.

Another thing I am super excited about is the fact that Fireworks is now being bundled in the Design Premium version of CS4. I used to have to do without Fireworks because I do some print work and need InDesign. Well no more I can have my cake and eat it too. For those not familiar with Fireworks it allows you to draw both pixel and vector based objects. You can create hotspots on pages and essentially build yourself a working prototype of a site with no coding. Clients can see the site and critique it while your still working in a drawing program. Very cool. There is a great video on Adobe TV using Fireworks to prototype an .air app.

There are so many more things that are cool about the new CS4 release. To finish off here are some links to videos and other cool things in CS4

News from around the Web

Lots of things are happening today most notably CS4 was released by Adobe. I’ll be writing another post later today going into more detail about the launch and rouding up resources for further reading, for now on we go.

There is another great post over at Design Reviver detailing 22 Firefox 3 Plugins for web developers. This list is fairly exhaustive and although I use many of the plugins I didn’t even know about some of them. Specifically Font Finder and iMarcos look very promising for saving me time everday.

Sitepoint also has a great article on Minimalist HTML documents that is a must read. Detailing efficient document layout all web coders should take a quick look through and check against their own coding practices.

Finally there are two great articles over at A List Apart. The first one deals with proper Progressive Enhancement of styling on the web. Using javascript to check for box model support you can serve different CSS to a browser based on its support of the box model. The second article takes on the topic of Web Standards and how they haven’t been the saviour of the web as was originally thought. The author details many of the problems that are plauging the implementation of standards in the web industry today.

That’s it for my round up for now. Check back tomorrow some some more in depth stuff on CS4

Search Engine Optimization for Small Business

I deal with many small business’ as a freelancer. One thing that they most often have in common is the knowledge that websites need some work to get good results in search engine rankings. What they often don’t know is the bit of work they can do to improve their search engine traffic.

1. Content Management
Use a content management system. If you are getting a new site built then insist on some sort of content management system. It will cost you more up front than an entirely static site. You will no longer have to run to the designer each time you need to change your hours of operation or your prices. That also means you won’t have to pay them for every little change. A content management system will also allow you more control over the SEO of your site.    

A good content management system will also have a number of SEO items built in. Look at the title of this post and then look in your url bar in your web browser. Notice that they match. Having a url that is readable and not full of question marks and = signs can make a big difference in the traffic that your site gets.

 

2. Take the time to do it right
Alt tags. Alt tags are the alternate tags found on images. If you don’t have alternate tags on your images search engines can’t tell what the picture is of. If the search engine can’t tell what the picture is of it just ignores it and you loose the possible boost that could be gained by the presence of an alt tag.

 

3. Figure out who you want to market to and write appropriately
If you are a Motel in a small town known for it’s fishing and want to get more fishermen to stay at your motel make sure you talk about the great fishing in the area. Yes I realize that you are a hotel and don’t actually offer fishing in your parking lot but with content written about fishing in the area you are more likely to appear in a search about fishing in the area. If they are searching for ‘fishing and motel’ you are even better positioned to be a primary hit in your area.

 

4. Get links from related business
Using the example of the motel again, you should network with related business’s. I know that other motel’s will not link to you as a competitor but what about a local fishing lodge? They may have a list of accomodations in the area, are you on it? If not consider asking the owner for a link in return for a link to their business as a provider of fishing trips. This link will help increase your page rank through google and make your site a more relevant search term for places to stay while fishing in the area.

&nbsp

News around the Blogoshpere

I thought today I would bring you up to speed with some of the neat things I found in my feedreader today.

Smashing Magazine is offering 67 free photoshop brushes today. They are free to use for any project but not to distribute.

Over at Niki’s DesignO’Blog there are some very cool tech coasters that you should check out.

If you have been following the NETTUTS tutorials on learning PHP like I have you’ll like to know that the second Learning PHP from Scratch tutorial is now out.

Finally Abduzeedo just put out the sites of the week post. There are a number of beautiful designs here that I have added to my inspiration folder.

Hope that give you enough reading for the weekend. I may not be posting this weekend as my internet connection is down and I have to get that fixed, so have a good one.

5 Blogs Beginning Web Designers Should Read

Boagworld
Boagworld was one of the first blogs I started to follow when getting into web design. Paul Boag and Marcu Lillington host this podcast for all of those people who are working with websites on a daily basis. Most of the blogging content is directly related to the audio podcast they also offer. I personally listen to the podcast and then read any articles that I feel need some more attention. Always a fun time listening to them baner.
A list Apart
While A List Apart doesn’t have as frequent a posting schedule as some other blogs all of the information provided is invaluable. From more theoretical discussions on the effectivness of zebra striping for tables technical topics on CSS Sprites2 there is always something to be gained from reading an article on A List Apart.
CSS-Tricks
Run by Chris Coyier, CSS-Tricks is an awesome resource for all those starting to tackle CSS. I know that CSS can feel overwhelming at times so the tools found here are very helpful for those starting to tackle it. CSS-Tricks contains not only a blog but also forums and screencasts. The forums are a great place to get help with code and the screencasts can even remind veterans of some of the simple shortcuts they forgot. For a great intoduction to WordPress check out the screencasts on Designing for WordPress.
NETTUTS
Another one of the envato family of sites run by Sian and Collis Taed this site bring you great coding tutorials each day. Topics range all over the web language spectrum so while you may not be really interested in the new Ruby developments you can always take a look back through the content and find something to learn or relearn.
i love typography
To many web designers today ignore typography on the web. At the very least it is often an after thought. With some of the new browser developments waiting in the wings though the days of ignoring beautiful typograpy are coming to an end. I Love Typography is a blog entirely about fonts and beautiful typography. An absolute must for those designer who need to beef up their knowledge of typography in general. Without a good knowledge it is much harder to judge what is worth doing for the web.

Freelancers Make yourself Accessible

A number of my readers are freelancers. We are always trying to find ways to get more work in the door with the least amount of effort. Often for freelancers that means using email.

I would often much rather talk to a client via email than over the phone. It’s quick and I can fit it into my schedule when I have the time. Emails don’t have to interrupt you when you are in the middle of some ‘flow’ for a design.

Is email always the best for your clients though? I don’t really think so. I am sure we have all had a long email conversation over a few days that still really didn’t resolve a problem. Did just keeping the conversation to email really save you any time. Better yet did it make your customer happy?

Could that same conversation have been had in 10 or 15 minutes and then been done. Yes it make have taken you more time but would you have been able to finish the project faster therefore get money into your pocket faster. If the answer was yes then why didn’t you just pick up the phone?

I think that freelancers today rely too much on email and online forms of communication that are ineffective for our clients. That’s not to say that there aren’t some good ways to use online communication more effectively.

Right now, really as I write this post, I am using google chat in ‘guest’ mode with another freelancer for some development work. I don’t have this set up he does. I didn’t even know you could do this but is it effective? Hell yes. I am able to send links and respond in near real time to his questions while I do other things. This is way more effective for us than emailing back and forth a number of times. Think there is usually a dely in replying to emails (or we’d never get any work done) but if you blocked out time each day and told clients that you are online for chat if they need anything then you may server your clients better.

Upgrade to CS4?

So many of us have heard that Adobe has announced Sept. 23rd as the product launch date for CS4. I personally have been using DW CS4 since the private beta came out a few months ago and while I love it I still wonder if it is worth the expense of the upgrade to CS4.

Do we really need to spend the cash each time the Creative Suite is updated by Adobe? I’m not totally convinced that we do. Some releases of the software have been amazing (I think CS2 – CS3 was a huge jump) but some are not that great.

Now the suite we buy at work is used by both myself (web guy) and our print designer so the improvements are gauged by the two of us. The reality for me is that there are some cool improvements in DW CS4 but I think that I could be completely happy with Coda 1.5 as a coding tool.  Coda is only $99 USD so it’s a whole lot cheaper than CS4.

Ultimately I think that we have to be intelligent with our funds both for our workplace and as freelancers. I will evaluate all of the Creative Suite and see if the improvements are worth the upgrade cost. What are you going to do?

Moving a WordPress Blog Part 2

So tonight was the time to really start the design of the blog. I logged back into the back end of wordpress only to notice that the build I was currently working on was not the current build. Sucks for me but ultimately better to find out now before I have any visual styling done (or any posts hosted over there).

With this new information I embarked on a quest to download WordPress 2.6.1. With that done I started to check out the documentation. To start I used FireFTP to download a local backup of all of the files on the WP blog I am working on.

The upgrade documentation also suggested a backup of the databases be done but since I have no posts on the site I figured I can skip this part.

With the download done all I really had to do was to follow the file handling instructions provided by wordpress and upload all of the files that need to be changed.

When I went back to the blog to log-in it did say that I need to upgrade my database and that it may take a while. Since I don’t currently have any posts over there it only took a few seconds.

That’s it for tonight. I have a wordpress blog upgraded to 2.6.1 and everything looks fine.

Google Chrome

The blogosphere is all abuzz with Google’s new entry into the browser market. I realize that I’m a little guy but I thought that I would share my impressions of the new browser. No screenshots here as many others have done it much better that I will have the time for.

My first irritation is when installing the app. I have to close Firefox (with which I am currently writing the post you are reading) for Chrome to import bookmarks…

So now that I shut down Firefox (and Thunderbird) Chrome imported all of my passwords and bookmarks or did it. I started off my test by heading over to the Freelance Switch Forums only to find that Chrome hadn’t brought over my passwords from Firefox. A minor irritation but an irritation all the same. It did bring in a current version of my bookmarks toolbar though which is pretty cool.

The second site I visted was my own portfolio and whew…a new browser didn’t break the design. That is a great reason that I code standard compliant XHTML/CSS. Chrome runs on Webkit, which also powers Safari, so I am safe (another win for the standard zealots).

Overall Chrome seems to be pretty cool. It has some very cool features (like only one tab crashing not the whole browser). I do wonder if we really need this new browser though?

Any one else with opinions please pass them on.