Whit's Working

Facebook - What size profile image?

2011-07-12T07:55:00.001-07:00

Image Size for Facebook pages: 180x540 (leave a white border around to look more "centered")...

Facebook - User Names

2011-07-12T07:52:00.001-07:00

Go here http://www.facebook.com/username/

For PAGES, must have 25 fans to register. :)

Facebook - Adding a welcome screen to my page

2011-07-09T07:39:00.000-07:00

I wanted to add a welcome screen to my facebook page (http://www.facebook.com/what.we.did.in.mutual). I created an image in Photoshop (500 pixels x 1000 pixels) and uploaded it using the facebook app here. It was very simple. The app puts an ad up, but my image is technically only 500x500 and I added 500 pixels of white space below it so the ad is unnoticeable. Worked like a charm. :)

Get rid of TITLES in Blogger

2011-07-08T17:07:00.000-07:00

Remove Title & Description From Blogger Header

Log into your blogger profile and go to Dashboard.
Navigate to Layout & Edit HTML.
Search for #Header h1 in your HTML code. If you don’t find this code, you may search for another piece of code #Header .description.
Now insert display:none; at the end of the above code.
Look at the below code to get the idea.

#header .description { /*-- this is header description css*/
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
display:none; /*--Insert this line*/ }

How do I do tables in Blogger???

2009-09-22T16:47:00.001-07:00

Okay, when you do tables in Blogger it adds a bunch of white space. To get around that you need to put this line at the top of the message (in edit html):

< style type="text/css" >.nobr br { display: none }< /style >

Then you need to put a div around the table with this line in front of the table:

< div class="nobr" >

and, of course, close the div after the table!

(And, make sure to take out the spaces!)

Adding Favicons to your blog...

2009-09-01T11:08:00.000-07:00

Do this...

Create favicon
Upload to a place online (your own server or a hosted site for images)
In your Blogger profile, go to layout and click ‘Edit HTML’. Then, just before the closing head tag, paste this code:

< href="'http://your-icon-url.png'" rel="'shortcut">
< href="'http://your-icon-url.png'" rel="'icon'/">

On adding this script, please replace the Your Icon URL with the correct URL of your favicon.

Save the template and check the website, your favicon should be loading fine.
If you do multi sizes and want to combine them into one icon, go here and download the software and then go here to read how to use the software. :)

Creating Favicons

2009-09-01T10:35:00.000-07:00

To create a favicon in Photoshop use this link. Or, you can...Download The Plugin
You'll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit "XP" icons (with 8-bit alpha channel). Make sure to install the plugin before you begin this tutorial.

Let's Begin
Because 16 x 16 is such a small canvas area, it can be very difficult to be creative. So instead start your project with a canvas set at 64 x 64 (always use even multiples when you plan on resizing files). Do this by selecting File>New, and opening a new canvas that is 64 x 64 pixels in size.

The Design
If you already have a logo you should reduce it to the 16 x 16 size to see if it holds up. If it doesn't look good at this size, work with the 64 x 64 canvas and try creating a simple design that incorporates colors from your website's palette.

When you're ready to test the design select Image>Image Size menu and enter 16 x 16. Click on Resample Image and choose "Bicubic Sharper" from the drop-down menu (CS only for this step). This is the best setting for making sure that an image doesn't blur as it's being resized. If it’s still not sharp enough, go back and oversharpen, oversaturate and/or heighten the contrast of the original image and then resize it again.

If you feel the icon is not quite what you wanted, just keep tweaking it until it is perfect. At this tiny size it can take a few tries before you get it right.

Saving The Custom Icon
Go to File>Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you download and install the plugin. In the next step you'll need to upload this new file to the root folder of your website, so it's a good idea to navigate and save it to that location on your hard drive now.

Uploading The Favicon.ico File
Connect to your server and upload your Favicon.ico file to your website. You must place it into the same directory as your home (index) page, and leave it loose, making sure not to put it in an images directory or other folder. The standard location is the “root” folder of your site, which is same directory as your home (index) page, not inside an images directory or other folder. If you put it there (and name it favicon.ico), most browsers will find it automatically.

Some browsers will look for a direct link in the HTML source code to your site's favicon.ico file. You can help these browsers by adding this link in the head section of each page on which you want the Favicon.ico to appear.
Here is the link code to include: < link rel="Shortcut Icon" href="/favicon.ico" >
Once you've added this code, upload all of your modified pages.

(Some people suggest that the following is actually more correct: < link rel="icon" href="/favicon.ico" type="image/x-icon" > You can use both if you want!)

If you want to use a GIF or PNG instead, use this format instead (just remember that it won’t work in IE):
< link rel="icon" href="/favicon.png" type="image/png" > or
< link rel="icon" href="/favicon.gif" type="image/gif" >

Testing
If your new Favicon does not show up right away, try refreshing the page or clearing your cache — or put a '?' at the end of the url, which will trick a browser into thinking the page is new and not cached.

Troubleshooting
Browser Issues: Microsoft IE 6 for Windows will not display the favicon until the URL has been added to the favorites. Or try this trick: go up to the address bar, click on the existing (usually the IE default) favicon, then "jiggle" it a bit and let go. That will reload the page and should get the new favicon to show up.

Safari for the MAC will not display an updated favicon until the browser cache has been cleared. But choosing ‘empty cache’ from the menu won't help because Safari stores favicons in a separate cache. Go to Edit > Reset Safari, and check “Remove all website icons”. If you can’t find that, you must empty the icon cache yourself. Look for it in User>Library>Safari>Icons. On the Windows version of Safari, find C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari\WebpageIcons.db. Quit Safari, delete the file, restart Safari. (Sometimes you need to restart the computer too.)

On FireFox, clear the cache and restart the browser. On Opera, just refresh.

Windows can actually be the most beligerent about not updating favicons for Internet shortcuts (on your desktop, for instance). This tip from www.vistax64.com/tutorials:

1. Right-click on the Desktop.
2. Select Personalize and select Display Settings (or simply Settings on XP).
3. Change the Color from 32 bit to 16 bit and click Apply.
4. Change the Color back to 32 bit and click Apply.

File Format Not Available: The Windows Icon (ICO) file format will not be available until you have downloaded and installed the plugin, and then Quit and Restarted Photoshop.

Troubleshooting Update
One person who had trouble with Internet Explorer 7 has sent us a little tip:
I had some trouble with IE 7 — but the addition of these 2 lines of code solved the problem:
< link rel="shortcut icon" href="favicon.ico" >
< link rel="icon" type="image/ico" href="favicon.ico" >
I found the info here:
www.webmasterworld.com/html/3251565.htm

And Shareef sends this in: In my experience, Internet Explorer seems to be a bit flaky in the length of time it takes before deciding to display the favicon. I have tried many variations in the code, but the majority of the time the favicon won’t display immediately.However, I recently discovered what may be a helpful tip: Once you place the code in your web pages and upload the favicon.ico file to your server, navigate to the favicon.ico file (www.yoursite.com/favicon.ico) and the browser (IE 7) will immediately display the favicon and keep it there.

Multi-Resolution Favicons
So if you’ve gotten this far, you can already see your favicon in your browser’s address bar, and it probably looks great. Feeling ambitious and want to go one step further?

In Windows especially, favicons show up all over the place. For instance, if you put a shortcut to a website on your desktop, Windows often uses the favicon of the site as the shortcut icon. But on the desktop, Windows uses a much larger size icon, usually 48x48 pixels. When this happens, Windows has to scale up your favicon and it will probably look blurry and not so great anymore.

You can fix this. One of the neat things about .ico files is that they can contain multiple versions of the icon, at different sizes and color depths (kinda like an animated GIF contains multiple frames). When they do, Windows uses whichever size and color depth is most appropriate. For the sizes, 16x16, 24x24, 32x32 & 48x48 pixels are most common, and all can put bundled together in a single .ico file.

Creating a multi-resolution icon isn't much harder than what you did to create your 16x16 favicon, Telegraphics, the same place you got your favicon plugin, also has another plugin http://www.telegraphics.com.au/sw/info/icobundle.html (temporarily unavailable) that allows you to bundle multiple icons together in a single .ico file. (There are also many standalone tools that will create a multi-resolution icon for you from a single starting image. Here's a couple that are free to try: www.sibcode.com/icon-studio and www.aha-soft.com/anytoicon.)

As for color depth... again, if you're on Windows, you may have noticed before that some icons on your desktop have jaggedy (aliased) edges, while others blend smoothly on the edges. The smooth blending is because those icons contain a version with 32-bit color depth, which allows true transparency, just like your layers in Photoshop. You can create a 32-bit version of your icon, along with 24-bit (16 million colors, gif-like transparency), 16-bit (256 colors) or even 8-, 4- or 2-bit... all of which could again be stored in one .ico file!

So if you want to make sure your favicon looks great wherever people might see it, try creating a few versions in your favicon.ico file. For example:

16x16, 16-bit (256) colors
16x16, 32-bit colors
32x32, 16-bit (256) colors
32x32, 32-bit colors
48x48, 16-bit (256) colors
48x48, 32-bit colors

But don’t go too crazy, because every variation makes your favicon a little bit bigger, which means it will take longer to download.

Inspiration
If you need some inspiration have a look through this nice collection of favicons. Also look at the nice categorized list of 50 remarkable favicons at Smashing Magazine. You might find something that triggers an idea for your own.

That's it. Enjoy your Favicons!

Add "Contact Me" Form to Blogger

2009-05-15T09:48:00.000-07:00

So, I really wanted one of these for my blog and I found this great video tutorial on setting one up using the free program, Zoho. Worked great!

Get rid of tool icons in blogger

2009-04-21T11:20:00.000-07:00

Here is a site that tells how to do it. Basically, what you do is add this code:

span.widget-item-control{
display:none;
}

as a css element... easy peasy rice & cheesy!

Add FULLPOST to blogger template

2009-02-25T13:36:00.000-08:00

Here's the link to add fullpost to blogger. This allows you to shorten those lengthy posts. Make sure widgets are expanded and search for data:post.body.

Remove the blogger navbar

2009-02-24T10:04:00.001-08:00

Okay, here's how you remove the Blogger navbar:

Simply paste this code:

#navbar-iframe { display: none !important; }

Right ABOVE this:

/* Variable definitions====================

Works like a charm!! :)

I LOVE Blogger, so I make sure to link to them always. Plus, of course it's in the ADDRESS of my website. :)

Webdings

2009-02-20T07:56:00.001-08:00

For when I want to know what letter is what symbol in Webdings. :)

3D in Flash

2009-02-13T07:58:00.001-08:00

Tutorial for doing 3D rotation on objects using Flash.

Photo to Coloring Book

2009-02-10T12:14:00.000-08:00

Several years ago I turned our Stake Presidency photos into coloring book pages for the children. I have decided to write down my steps so that I can do this in the future (as I keep re-doing it)... The first step is to bring the photo into Photshop:

Once the photo is in Photoshop make sure your foreground color is black and your background color is white, then run the filter) sketch) photocopy (adjusting to how it looks good). You will get something that looks about like this:

And, finally, if you want to make it a bit sharper - and completely black and white, go to image) adjustments) levels. Adjust the THREE arrows to where you like them, where they are all three in the same spot. This will make it black & white without any gray. Erase any "extra" pixels and you are finished. :)

Here's a quick one I did of Nate:

Some photos may require adjusting contrast first - I do that in image) adjustments) curves.

Links to Freelance

2009-02-03T10:31:00.001-08:00

Links to freelance work elsewhere.

Photoshop - Glass Tutorials

2009-01-27T14:52:00.001-08:00

So, here's a link to what looks like a great site for working with transparency...John LOVES glass buttons. :)

Pop-Up Calendar

2009-01-13T12:10:00.000-08:00

This is a link to a pop-up calendarfor use when having someone fill out a form and they need to select a date. Good one.

Website construction

2009-01-08T12:28:00.000-08:00

There's a very cool blogger template for any time you have a website in construction. Good stuff!!

Images

2009-01-08T09:01:00.000-08:00

I am on the look-out for free images. Here is a link to some that I can use, but credit.

Horizontal Rules

2009-01-07T08:18:00.000-08:00

These are horizontal rule styles:

To align left (50%):

style="width: 50%; text-align: left; (this will align it for IE) margin: 0 auto 0 0; (this will align it left for Mozilla)"

To align right (50%):

style="width: 50%; text-align: right; (this will align it for IE) margin: 0 0 0 auto; (this will align it right for Mozilla)"

To align center (50%) dotted HR:

style="border: none 0; border-top: 1px dashed #c00; (the border) width: 50%; text-align: center; height: 1px; (whatever the total width of the border-top and border-bottom equal)

To align left (80%) two-tone line (two colors) (this also added a left margin):

style="border: none 0; border-top: 5px solid #d6def7; border-bottom: 5px solid #274a68; width: 80%; height: 10px; margin: 10px auto 0 0; text-align: left;"

Figure them out!

style="border: none 0; border-top: 4px dotted #FFFFFF; border-bottom: 4px solid #ffffcc; width: 80%; height: 8px; margin: 10px auto 0 0; text-align: left;"

style="border: none 0; border-top: 2px dashed #FFFFFF; border-bottom: 3px dashed #ccc; width: 80%; height: 5px; margin: 10px auto 0 0; text-align: left;"

style="border: none 0; border-top: 3px double #c00; width: 80%; height: 3px; margin: 10px auto 0 0; text-align: left;"

style="border: 3px inset #ffffcc; width: 80%; height: 6px; margin: 10px auto 0 0; text-align: left;"

style="border: 3px ridge #ffffcc; width: 80%; height: 6px; margin: 10px auto 0 0; text-align: left;"