ThatGuyCharlie | Charlie Mathews Blog & Portfolio » download http://www.thatguycharlie.com Charlie Mathews Blog & Portfolio Fri, 28 Oct 2011 05:05:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Downloads Waste Your Life http://www.thatguycharlie.com/2010/downloads-waste-your-life/ http://www.thatguycharlie.com/2010/downloads-waste-your-life/#comments Fri, 25 Jun 2010 17:11:07 +0000 Charlie http://www.thatguycharlie.com/?p=1179 The sad part is, it’s too true trap for so many geeks today! *sarcasm* Hehehe

]]> http://www.thatguycharlie.com/2010/downloads-waste-your-life/feed/ 2 Professional CSS Alert Boxes http://www.thatguycharlie.com/2010/professional-css-alert-boxes/ http://www.thatguycharlie.com/2010/professional-css-alert-boxes/#comments Thu, 21 Jan 2010 11:56:47 +0000 Charlie http://www.thatguycharlie.com/?p=1013 When creating a clean and attractive website, you don’t ever want to ruin it with error pages. Although they are not always unavoidable, many scripts can easily return a clean error message. Using a simple bit of CSS makes your errors display in an smooth, non-aggressive way. This method is also very effective in returning little messages to your user such as “you are now logged in” or “you received a message”.

How

By using the “border” css property it is easy to add a dark border to the top and bottom of each container. Using a color picker choose a light and dark version of a pastel color of your choice. Using icons from FamFamFam and adding a little padding, “Bamm!”, You’re done!

Demo

[image: alertdemo]

The Code

The images needed can be found in the download below.

<html>

<head>
<style>
body {
	color: ##444444;
	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
	font-size: 10px;
	}

.alert {
	background: #fff6bf url(exclamation.png) center no-repeat;
	background-position: 15px 50%;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
	}

.info {
	background: #F8FAFC url(information.png) center no-repeat;
	background-position: 15px 50%;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #B5D4FE;
	border-bottom: 2px solid #B5D4FE;
	}

.error {
	background: #FFBFBF url(error.png) center no-repeat;
	background-position: 15px 50%;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #FF2424;
	border-bottom: 2px solid #FF2424;
	}
</style>
</head>

<body>
<div class="info">Information you need to know</div>
<br /><br />
<div class="alert">Alert you triggered</div>
<br /><br />
<div class="error">Error with our code</div>
</body>

</html>

Download

See how simple that was? Download the source and images here.

]]> http://www.thatguycharlie.com/2010/professional-css-alert-boxes/feed/ 8 Firefox Plugins You Just can't Live Without http://www.thatguycharlie.com/2009/firefox-plugins-you-just-cant-live-without/ http://www.thatguycharlie.com/2009/firefox-plugins-you-just-cant-live-without/#comments Tue, 10 Nov 2009 21:44:47 +0000 Charlie http://www.vividperfection.com/?p=673 After, using Internet Explorer for years, the speed and amazing customization abilities of Firefox astounded me. I finally understood why people went on and on about “Firefox, the best browser ever”. Even so, it took me a while to find customizations (plugins) which could really tap into the full power of this new browser. Here are the top choices I use as a web developer and full time internet surfer.

1) Download Status Bar
No Kidding, If it were not for this smart plug-in, I would become a raving maniac a long time ago. The number of small file downloads I make on a regular basis causes the constant download box pop-ups to turn into a big pain. The Download Status Bar packs all the information you want to see such as download name, speed, and amount completed into a status bar which appears at the bottom of your browser for easy and uninterrupted browsing.

2) Firebug

This plug-in is the ultimate tool for any web developer using HTML, CSS, and Javascript. It allows you to edit your web page and view the changes in real time. You can hover over elements in your code and see exactly how your div’s are being positioned and displayed with a highlight tool. Over all it’s other features, my favorite is the ability to edit HTML and CSS for any element in an instant.

3) Xmarks (FoxMarks)

Over the years, I have often lost computers to fatal errors and blue screens. In doing so, I lost all my bookmarks which are essential to my daily work online. This nifty service saves you from ever having that problem. It backs up your bookmarks every time you exit the browser and they are then made available to you online or restore-able to a new computer.

4) DownloadHelper

Ever seen media players in a web-page with no download option? This easy to use plugin tracks actively streaming videos and mp3′s and makes it possible for you to download videos from most popular sharing sites.

5) DownThemAll!

For easy file downloads, this download manager is the first of it’s kind available in Firefox. It makes the job of downloading split files a whole bunch easier without installing extra, spyware ridden software.


]]> http://www.thatguycharlie.com/2009/firefox-plugins-you-just-cant-live-without/feed/ 2