Phurtive

Saturday, August 9, 2008

5 CSS Tips to Spice Up Your Website

When it comes to the appearance of your webpage, default just won't cut it. These 5 CSS tips will make your page stand out more to professionals.

First, understand where CSS codes go...

<head>
<style type="text/css">
This is where the CSS codes go
</style>
</head>

1. Remove Link Underlines

Here's a basic one. Since the beginning of the internet it's been standard to have underlines under links. In many cases, the underline is not needed and can ruin a good look. This code will fix that.

a:link {
text-decoration: none;
}

The "a:link" selector determines the style of all regular links on your page. The "text-decoration" property is where you specify a value of "none" to have no underlines underneath your links.

2. Set Page Basics

Don't stuff your HTML body with style attributes when you can easily consolidate them all neatly in your CSS. This not only makes your page easier to maintain, the code is nicer to look at too.

body {
background: #4d4d4d;
color: #44ddff;
font-family: Trebuchet MS;
}

The "body" selector determines the default styles for your entire page. I provided some three basic properties: background, text color, and font type. Assuming you already have knowledge on HEX color codes and fonts, substitute the values I chose with those that suit your own page.

3. Mouseover Link Effects

You will see this done on most professional websites. Link effects are one of the best ways to instantly make your site more attractive.

a:hover {
text-decoration: underline;
color: #ff7733;
}

The "a:hover" selector determines the style of links when a mouse pointer hovers over it. The "text-decoration" property is where you can specify whether or not the links will have a line underneath on mouseover.

The "color" property is where you specify what color the links will turn into on mouseover. Try different combinations and you may be surprised at what you come up with.

4. Add a Border

Make your page look elegant and professional with a border.

body {
border: 5px ridge #fdff77;
}

"5px" is the size of the border in pixels. "Ridge" is the type of border. Other types are "solid" (default), "groove", "double", "dotted", "dashed", and more. "#fdff77" is the HEX color code of the border.

Border values can be simple or complex like the example I provided. You could simply use "border: 1px;" for a 1 pixel black solid line border... which would be equivalent to "border: 1px solid #000000;"

5. The Asterisk

The asterisk * is an overlooked CSS selector. If all CSS selectors were stacked up in order of hierarchy, the asterisk would be at the top. That is because any property/value specified under the asterisk is applied to every CSS selector. E.g., if you want every selector to have a padding of 2 pixels, it can be done by doing the following:

* {
padding: 2px;
}

Even better, you can use the asterisk to be more specific in what it modifies. E.g., if you have an ID called #footer and you only want everything within #footer to have 2px padding, you could do the following:

#footer * {
padding: 2px;
}

The asterisk will help consolidate your coding, making for a more professional page source.

Conclusion:

You can do all your page's styling within CSS. This list of 5 tips doesn't scratch the surface of what CSS can do. If you really want to understand CSS fully, you need to learn IDs, classes, elements; and all the selectors, properties; and their possible values. It's not as hard as it sounds. It's much easier than cramming it into your HTML tags.

A great place to learn CSS online is at the CSS School by W3 Schools.

Friday, August 8, 2008

Daily Videos

Yet another new feature at PHURTIVE.com this week. I am now providing daily technology videos from my favorite technology channels at YouTube. Anyone can watch them by clicking the new "Daily Videos" link on the menubar. Enjoy!

*IE Users: Videos will be available shortly. IE has an issue with displaying the video reel.

Watch the latest videos on YouTube.com

Thursday, August 7, 2008

Need Technology Help? Ask a Question!

This is a new feature here at PHURTIVE. If you're having problems with software, hardware or any technology for that matter, never fear... PHURTIVE is here! Just fill out the form below and I'll try to have a solution for your problem in under 24 hours.

* indicates a required field

Wednesday, August 6, 2008

How to Hide the Blogger Navbar on Your Site

(I've updated this post with a better method. See "method 2" below.)

Disclaimer: Hiding or removing the Blogger Navbar may be against the Blogger Terms of Service. This guide is for educational purposes only. I will not be held responsible if Blogger wants to punish you.

So...you've got a nice new blog. Everything seems just right, except one problem: There is some sort of obstruction on the top of your page! You don't like it. It must be gotten rid of. No worries! I'm here to help!

The Navbar is on every Blogger/Blogspot site by default. It's a long, horizontal navigation bar that spans across the entire top of your page. Its purpose is to promote Blogger and form one massive randomized webring of blogs, a blog search, a "flag blog" button for notifying Blogger about objectionable content , and controls for Blog owners.

The navbar isn't supposed to be a bad thing, but some users don't like it appearing on their blogs. Well, truth be told, you can't remove it, but there are a number of ways you can hide it. My method involves giving it a width of "0".

Start by going to your Blogger Dashboard and clicking Layout under the Manage section. Then click the Edit HTML tab on the next page and you will see another page with your template's/layout's HTML code.

Search (Ctrl+F) or scroll and look for the following line:

<b:skin><![CDATA[

Method 1:

Directly after that line, (or if you know what CSS is, just make sure it's in the CSS of your template) paste the following CSS code:

#navbar-iframe {
width: 0px;
}

I'll explain how it works. #navbar-iframe is the CSS ID for the Navbar. By default, the Navbar ID is implemented into every Blogger site regardless of the template or layout you choose. It's basically hidden from you, but if you specify the Navbar ID in your own template's CSS code, yours will override the default style by Blogger. In the code I provided above, I specified a width of "0px", which means the Navbar will not be seen because it has no visible width.

Method 2:

Using a width of 0px will work fine, but some may not like the margin that is left behind from the hidden navbar. If you specify a height of 0px as well, that should remove it, but not always. Here is a code that will completely hide everything, including the margins:

#navbar-iframe {
height: 0px;
width: 0px;
visibility: hidden !important;
display: none
}

I hope that helps! If you enjoyed this help guide, consider reading more of my technology guides and subscribe to stay informed about more tweaks you can do with, not only Blogger, but Windows, Firefox, and a whooooole lot more! So...stay in touch!

Tuesday, August 5, 2008

How to Make All Your Website's Links Open in a New Window

This is a very useful code for anyone who owns a website or blog.

When you make a post that includes link(s) to other pages, whether they're for giving credit or to direct the readers to a source, by default they will open up in the same window.

You may think that is more convenient to your readers, but there is a risk they may not come back to your site if they click link after link and forget where they originally came from (and don't think to use the back button).

With this helpful code, which I found at The Real Blogger Status, all your site's <a href> links will open up in new windows, thus allowing users to stay on your site without the risk of them leaving.

Place the code in between the <head> and </head> section of your page's HTML code, (preferably under the <meta> tags):

<base target='_blank' />

E.g., <head> <base target='_blank' /> </head>

That should do the trick!

If you only want a certain link to open in a new window, use the following code in that link's beginning <a > tag:

target='_blank'

E.g., <a href="http://google.com" target='_blank'>Google</a>

If you have any questions, comments, or requests, feel free to contact me via email or the comment form. If you enjoyed this post, consider subscribing to or bookmarking us.

Friday, August 1, 2008

10 Freeware Programs for Everyday Tasks

It can get awfully confusing sometimes with all the software available on the internet today. Often times, people will assume they have to pay to get the best. Well, that's not always the case. Whether you can't afford the latest and greatest software, or the paid software you DO have is not fulfilling your needs, there are always alternatives. How about going the free route?

These 10 programs will fulfill every basic need that a computer user requires for everyday tasks...and more!

#10 - SpeedFan

There's no need to worry about your PC exploding in the middle of a deathmatch when you've got SpeedFan on your side. Okay, so an FPS isn't going to blow up your computer...but you certainly don't want it crashing or overheating! Keep track of your computer's temperature with SpeedFan. It literally links in to your system's hardware and gives you each and every temperature (Celsius) and speed (RPM)...in real time!

SpeedFan also allows you to control your fans from within the program. If you want more speed, just increase the percentage. About to play a game with a lot of graphics that you KNOW will come close to crashing? Crank up the speed! Back to the desktop? Turn it down... View live graphs and charts of everything that's happening on the inside. You can run the program when you want, or keep it open all the time in your system tray with a real time temperature reading for the tray icon.

#9 - Media Player Classic

The major flaw in having so many different music/video formats/codecs is that different players are required for different formats! If you want to play most standard video formats on your PC, the bare minimum is Windows Media Player, QuickTime, Real Player, and FLV player. Four different video players is a ridiculous amount. Instead try one player for all video, and the best solution is Media Player Classic.

The latest version, MPC 6.4.9, can play every video format, you just need to either have the others installed or download specific plugins called alternatives that only install the codecs required to play them in MPC.

Free-Codecs.com has everything you need to get started with MPC 6.4.9, QuickTime Alternative (or QT Lite), Real Alternative, and FFDShow (codec required for FLV). It's simple, compact, and can be your only program for all media types.

#8 - IrfanView

MPC (above) is to music and videos as IrfanView is to pictures. This is by far the best image viewer around. It's faster and more convenient than Windows Photo Gallery. The amount of file types IrfanView supports is insane.

It can view all major filetypes, plus a bunch of program-specific ones, such as PDF (Adobe Reader), PSD (Photoshop Document), ICO and ICL (icons/libraries), GIF (not rare, but Windows Photo Gallery does not support GIF), and a helluva lot more. It also has support for many flash (SWF and FLV) and music/video formats (MP3, MPG, WMA/V, etc.).

#7 - 7-Zip

When trying to archive or extract compressed files, don't settle for shareware or evaluation period programs. 7-Zip is a free file archiver and extractor that handles pretty much every format for compressed files.

7-Zip can pack 7z, ZIP, GZIP, BZIP2 and TAR files, but most importantly, it can unpack all of the following: RAR, CAB, ISO, ARJ, LZH, CHM, MSI, WIM, Z, CPIO, RPM, DEB, NSIS, 7z, ZIP, GZIP, BZIP2 and TAR.

That's a ton of file formats. That's why 7-Zip is the best archiver, and that's why I made it number seven on my list of 10 Freeware Programs for Everyday Tasks (hey, what'dya know, 7 is no. 7).

#6 - AVG Free

You would have to be crazy to browse the net without an antivirus these days. AVG Free is my top choice in this category. The new 8.0 is effective at stopping viruses while keeping in a light, compact form. 8.0 integrates with your browser and tells you right on the page whether a link is harmless or not.

AVG Free is the most downloaded piece of software on CNET (Download.com) and there are 70+ milion users worldwide who count on its protection. To sum up its biggest features, AVG Free gives you anti-virus, anti-spyware, anti-rootkit, safe downloads, safe IMs, and safe search results.

#5 - Notepad++

Typing in a text editor will never be the same since Notepad++. It's a remarkable replacement Notepad for Windows and it's loaded with useful features. Coding websites is easy with N++ and its syntax highlighting. One of its best features is multi-document/multi-view, which is basically tabbed browsing for Notepad.

Some more great features of N++ are: auto-completion, drag and drop, WYSIWYG, zooming, and bookmarking. Wait a second... Tabbed browsing..? Bookmarking..? It's like an internet browser for text files! That's what makes Notepad++ number six on my list of 10 Freeware Programs for Everyday Tasks.

#4 - CCleaner

"The best software... is free!" That's the slogan for software developers Piriform. I couldn't agree more, which is why number 10 on my list is Piriform's CCleaner.

This amazing little program will quickly search your computer for any junk you don't need and delete it. You choose the filters and tell it what to look for. There's also a built-in registry cleaner, which I find to be one of the best; better than programs' whose sole purposes are to clean the registry.

With CCleaner, you can uninstall programs and/or delete their entries from the programs list. Got something you can't remove from the programs list even though you already uninstalled it? CCleaner will fix it! How about startup entries? CCleaner will not only disable startup entries you choose, but it can completely remove them from the startup list.

#3 - GIMP

Adobe Photoshop is by far the greatest image editing suite of all-time. At US$649, who the heck can afford it apart from large companies? Maybe the real question is... Who would want to pay that much when there are alternative programs that are just as good? One comes to mind... Well, it's certainly nowhere near as intricate, professional, or simply incredible as Photoshop, but GIMP (The GNU Image Manipulation Program) comes extremely close! It definitely gets the job done for standard home users.

Honestly, Photoshop is outstanding, but if you don't need the practically infinite features supplied, your money is not worth it. That's where GIMP comes in. It's free, easy to figure out, and does all the basics Photoshop does. Fully adjustable brightness, contrast, levels, & curves, a ton of filters, layering, layer effects and so much more.

To put it simple, give these two scenarios a thought: 1) If you're a graphic designer who designs the GUIs of entire operating systems, you might want to consider Photoshop. 2) If you make logos, forum signatures, or edit photos on your spare time, then GIMP is at your disposal!

#2 - Google Earth

You don't know how beautiful the Earth is until you see it from up here (I'm not referring to outer space!!). No, it's the virtual globe program by Google called Google Earth. Virtually travel anywhere in the world by inputting the location or manually navigating your way with the master controls.

See the streets, roads, highways, and grids of any given area. Plan a route by typing your start and end points. It's one big map of the entire planet. Many third-party websites are linked from the program, where specific areas will bring users to a website for more information on what they clicked, including pictures, videos, and articles.

There are even 3D models of famous landmarks and entire city skylines. Anyone can model them and upload them to the 3D Warehouse. I've made a few myself.

#1 - Mozilla Firefox

Now... The #1 Freeware Program for Everyday Tasks... (It's an obvious choice... but who could possibly disagree)?

Browsing the internet just can't get any easier with Mozilla Firefox 3.

So many features...

So little energy left in my fingers to type them all...

Everything about Firefox is perfect. Let me sum it up quick before my hands fall off: open source, easily customized toolbars, ultra-fast tabbed browsing, an intelligent address bar, extensions for customizing your online experience, skinnable themes, a user-friendly configuration (about:config), easy tweaking, non-freezing pages, safest browser... Oh, and of course it doesn't cost a single penny.

Conclusion:

We can't always get what we want (in real life) but on the internet...we can! With an endless array of free software left and right, it can be difficult choosing what to use. I gave you 10 choices. 10 that I believe will help you fulfill your basic computer needs.

If you enjoyed reading this article, consider subscribing to and bookmarking us.

Wednesday, July 30, 2008

How to Tweak the Menu Speed in Windows (All Versions)

In every single version of Windows, there is a preset delay on context menus, Start menus, and menu bar items that expand when hovered over. Lowering or removing the delay altogether will increase menu speeds A LOT. The following tweak works with all versions of Windows.

Go to: Start → Run (Vista users: Start Search)
Type: regedit
Registry Editor will open
In the left pane, navigate to: HKEY_CURRENT_USER → Control Panel → Desktop
In the right pane, double-click MenuShowDelay
Change the value data to anything between 0 and 400
The higher the number, the longer the delay
400 is the default value
I use 0.
150 is good for starters
Click OK
Restart or Log Off/On

That's it! Now your menus are super-fast! =}

Tuesday, July 29, 2008

How to Edit the Default Firefox 3 Classic Theme (for Beginners)

Warning: Edit Firefox files at your own risk! I am not liable for any damage you do to FireFox or your system. Please back-up the file as specified in this tutorial.

This is a step by step tutorial on how to edit the default theme in Firefox 3. This tutorial is geared towards beginners, so if you already have experience with making Firefox themes, this won't be much help to you. As for everyone else, this tutorial will teach you how to find the classic theme, extract its contents, and edit the toolbar images.

Step 1 - Locate:

The first thing you want to do is navigate to your main FireFox chrome folder, the one where Windows installed Firefox, which should be "C:\Program Files\Mozilla Firefox\chrome".

Step 2 - Backup:

The folder that contains the default, or classic, theme is "classic.jar". You need to back up the file so you can revert to it if you want the original theme again. Just make a copy and rename the original "classic.jar.original".

Step 3 - Extract:

JAR files are archives, or compressed files, so you need an archive extractor in order to edit the files. Here's few good ones:

7-Zip (Freeware)
WinRAR (Shareware)
WinZip (Trial)

Now extract the contents to a separate folder (this keeps things organized). You should have a folder containing "icon.png", "preview.png" and another folder called "skin".

Step 4 - Open:

Go to "skin\classic\aero\browser" and look for "Toolbar.png" (the standard large icon toolbar) and "Toolbar-small.png" (the small icon toolbar). This is where the actual image editing begins. Open "Toolbar.png" in your favorite image editor. Here are a few good ones:

Abode Photoshop (Trial)
GIMP (Freeware)
Paint.NET (Freeware)

Step 5 - Edit:

Use a marquee or lasso tool to select the buttons you want changed, and change the colors only. Do not change their sizes or make any new markings. In Photoshop, press Ctrl+U and change the colors there. In Paint.NET, also press Ctrl+U to change colors (hotkeys for hue and saturation settings). Save your changes. Make sure the filename is exactly the same. Open "Toolbar-small.png" and apply the same changes.

Step 6 - Archive:

All of the files need to be compressed into an archive JAR file. Find the base folder of "skin", you should see "icon.png", "preview.png" and "skin". Archive all of those files in "classic.jar" and make sure it's in the "C:\Program Files\Mozilla Firefox\chrome" directory.

Step 7 - Test:

Close any Firefox instances you have open and restart the browser. If all went well you will see your new toolbar icons! I made mine to match my custom Windows Classic theme.

Common Problems and Solutions:

Firefox started but you can't see the GUI at all (no buttons/no icons)?
Something went terribly wrong. (You might have to "Ctrl+Alt+Del > Task Manager > End Task" to close Firefox if this happens). Revert back to the original theme by deleting your edited "classic.jar" and renaming "classic.jar.original" (or whatever you saved the backup as) to "classic.jar". That fixes the problem.

Can't see the changes you made? Make sure all filenames are correct (classic.jar, toolbar.png, tolbar-small.png, etc).

Most people will not run into any problems, but if you do, I recommend reverting back to the original "classic.jar" and starting over from the beginning, following step by step.

Monday, July 28, 2008

How to Disable the Windows Vista Startup Sound

It's too bad that Microsoft decided users would not be able to change the startup sound. It's very very easy to turn it off however.

Right click the volume icon in the system tray and chose "Sounds" from the list. A new window will open. Look at the bottom for a checkbox follwed by "Play Windows Startup sound". Uncheck the box. Click "OK".

That's it. The next time you boot Vista you will no longer hear the Startup sound.

If by some chance you do not have a volume icon in your system tray, go to: "Start" > "Control Panel" > "Hardware and Sound" > under Sound click "Change system sounds" and continue by unchecking and clicking "OK".

If your Control Panel is displayed in the Classic View, just click "Sound" and go to the "Sounds" tab when the window pops-up and continue the rest of the guide.

How to Move the Recycle Bin to the Start Menu in Windows Vista

You can easily put a fully functional (non-shortcut type) Recycle Bin on your Start Menu in Vista. It's simple.

Drag and drop the Recycle Bin icon from the desktop to the Start Menu orb (the Window's Logo you click to open the menu). Just let go of the icon when you are hovering over the orb.

The new Recycle Bin will appear above the list of recently opened programs (under your internet and e-mail programs if you have them there).

Now test to make sure it works. Right click the new Recycle Bin and see if you have "Explore" and "Empty Recycle Bin" on your context menu. Got them? Then it works!

Optional: Delete the Recycle Bin on the desktop (right click and choose "delete"). If the Recycle Bin was the only icon on your desktop you won't have any now. A nice, clean desktop.