Weekly garden update

I’m really wishing for Spring and this is a bad time because I tend to plant to early hoping I can force it to come sooner. I planted some mild jalepeno seeds  in some starter pots in doors. According to my calculations though it should be about right to get a head start on the growing season! I even have a bin all ready for it!!! I’ve learned that when you chop them up and fry them you can then freeze them. They make great addition to dishes all year round that way so no need to worry about having too much and having them go to waste!

I also bought a rose bush today at Costco. I’ve been wanting to replace the climbing rose I had that never really did well and finnally died. The only trouble is the wild root stock that it was grafted on to didn’t die and I have these ugly little wild roses. They aren’t really that ugly but in comparison to the hybred roses they just don’t measure up. I sure hope these are as pretty as what’s pictured but first I need to figure out where to put them. That wild rose as a LOT of thorns!

Here is a snap shot of my tomatoes starting to bush out in the aerogarden!

Making off-site link icon

I’m currently putting together a fairly large site for a college that has “mega list”. I will post more about that in another posts but basically mega lists allows you to see columns of information all at once. It’s different from an old style drop down menu in that items are broken up into categories of content much like you would see categories in a supermarket. It helps people to scan the categories in a store and think about which isle they might find something.

off-site link example
off-site link example

Another helper in making websites more usable is to standardize icons and visual cues to let readers know what will happen when they click on a link. What I have been seeing more and more of lately is icons that let a reader know they are going somewhere else other than your website to get the information they need. The importance of this is that your navigation and style may be drastically different than where you are sending them. For example in the sliced view of the mega list to the right I am working on you can see as I hover over the words “human resources” there is a little square icon to the right of the words. This gives a visual cue that information for this topic is not housed on this site. In this case it’s housed at the district office where information can be somewhat buried. The user can make a mental note before they click the link that they are going to be sent off somewhere else to look for the information they seek.

So far there is no one standard icon that web developers use that I have found but what does seem to be consistent is that it’s a little square the size of your font with a little arrow that points up and to the right to signify off-site. The more this icon is used by web developers the more the general public will know what the meaning of this image is.

Some examples that you may download and use: 

You could just add this to any link that is off-site manually but with a little CSS you can add it automatically.

#main a[href^=”http://”] {
background: url(external.png) center right no-repeat;
padding-right: 13px;
}

What this says above the any HREF tag in the main area of the website that begins with http should use this external icon to the right of the link and the pixel width of the icon plus a little space.

This is fine if all my links are relative where one links points to this file name and that file name however sometimes for various reasons the full URL is inserted and therefor anything with the full absolute URL – even to your own site is going to show the off-site link. How pointless!

So to make it so not every absolute link shows you need to add this after the above code to get rid of the icon for anything that has your domain in the URL.

#main a[href^=”http://www.yourdomain.com”]  {
background: none;
padding-right: 0;
}

I have tested this in all the major browsers on both Mac and PC but noticed that it does not work on IE 6. The only thing that happens is that it doesn’t show. So they loose that extra nice thing of the modern age but if they are still using IE 6 I guess they know the limitations.

Please comment if anything is unclear!

My weekly garden update

I’ve have had a garden hobby for several years now and had a blog devoted to it however maintaining that became too much with other things. I still love to garden and spend just as much time out there escaping from the chain of the computer.

Over time I’ve learned what works and what doesn’t for my area of rural California in zone 9 with hard rusty well water and hard clay soil. I don’t think you stop learning though.

I have two “houses” for gardening. One I call my flower/fern house with flowers, vines and other green things. It’s purpose is a little retreat to sit and watch the humming birds and other critters fight for territory. Read more

A little Dreamweaver selection trick

It never ceases to amaze me that I can work in the Adobe products day in and day out and still learn little tricks. Forgive me if you are already know this but just learning this helps to save me time and to save my eyes so I need to share it with you.

Have you ever wanted to select a portion of code from one page and paste it into another? Have you ever tried to scan the code with your eyes finding it difficult especially if you didn’t comment your code out or space it out very well? The easiest way for me has always been to scan the design view for the section that I want in the layout and then see what dreamweaver is highlighting in the code. Then I would touch the code view and select the text. The only problem then is that I would loose my selection and invariably I would miss a character or some angle bracket and I would have to figure out what went wrong. It wasn’t until the other day that I discovered that you must touch the center scroll bar between the code view and the design view to switch the active window that has the selection. Your selection will remain in tact but the focus will be different.

In the example above I selected the listed items on the right side that is the design view and it highlighted the code on the left that made this text. If I were to then touch the middle of the code view on the left I would loose my selection and would have to reselect. If instead I touch the scroller in between I can now copy the contents of the code view to the clipboard. If I touch the scroller to the right of the design view I shift my focus back again in design view and I can copy that.

Whew! It’s the little things in the day that can make it for ya huh?!!

Floating in the clouds

Floating in the clouds

Ever want to put type in a cloud in photoshop?

In this tutorial I am going to show you how to make your text float in a cloud but really you could do this with any object.

  1. Start with a good photo of some clouds or download the source files at the end of this post to try it for yourself. Make sure there are areas of the clouds that are very white so you can get it to wrap around better. I played with the level in the photo to adjust for this slightly.
  2. Make sure that your clouds are on the bottom layer in photoshop. This will work with CS4 as well at CS5. I am not sure about CS3.
  3. Click the T tool and type something. This will make a new layer of type but you won’t see any clouds around it yet. 🙂
  4. The next step is to couple click on the type layer to bring up the layer styles. Make sure the settings looks follows with slight adjustments on the slider for the effect.
  5. The most important thing is the area I have circled above to blend the underlying layer if. You’ll need to split that white point slider by holding down the option key on a Mac or the Alt key on the PC and you can split the slider. Notice as you slide the lighter areas of the cloud will waft around the type.
  6. Perhaps you like the effect but some portion is covered up more than you would like. Your not done then so you can do a little more adjusting by duplicating your type layer and making a mask of only what you want to show through.
  7. After duplicating the layer and making sure it’s selected click the “layer mask” icon in the layers palette.
  8. Fill the layer mask with black and then select a soft brush that has white as the foreground color and paint on the mask the parts of the type that you would like to reappear.
    Download the source file here. (3.4 mb)