Free iPhone Business Card

Free Business Card Template iPhone Style

Download

CSS3 Animated Price Table

CSS3 Animated Price Table

Example of a price table.
View source code for more details.

Demo

WordPress shortcode – snapshot of website

Display a snapshot of any website, and place it on your blog?
Use a shortcode.
Paste the following code into your functions.php file:

function wpr_snap($atts, $content = null) {
        extract(shortcode_atts(array(
			"snap" => 'http://s.wordpress.com/mshots/v1/',
			"url" => 'http://www.ontwerps.nl',
			"alt" => 'My image',
			"w" => '400', // width
			"h" => '300' // height
        ), $atts));
	$img = '<img src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '"/>';
        return $img;
}
add_shortcode("snap", "wpr_snap");

Usage shortcode without thw first “:

["snap url="http://www.ontwerps.nl" alt="Description" w="400" h="300"]

Example:
[snap url="http://www.google.nl" alt="google" w="400" h="300"]

Change WordPress login url

Edit .htaccess file and add the following code.
Before editing backup your .htaccess file

RewriteRule ^login$ http://website.com/wp-login.php [NC,L]

Password Reset for Joomla , WordPress and Joomla (new password = NEWPASS)

Reset password with Navicat Lite

Joomla:

UPDATE jos_users
SET password = MD5('NEWPASS')
WHERE username = "admin"

Wordpress:

UPDATE wp_users
SET user_pass = MD5( 'NEWPASS' )
WHERE user_login = "admin";

Drupal:

UPDATE users
set pass= '$S$CVrRLeIr/2RlAxZgzPyu58yXbhev5OItQNCjXMrgMq9IriUKyUe.'
WHERE uid = 1;

If you had the following message:
Sorry, there have been more than 5 failed login attempts for this account. It is temporarily blocked. Try again later or request a new password.
You can :

DELETE FROM flood

Example Form Calculate

Calculating order form example

Example of a order form with calculation. Also little bit of css3 styling in form.
View source code for more details.

Demo

Customizing WordPress Admin

Remove the Admin Bar

putting the following in functions.php:

add_filter( 'show_admin_bar', '__return_false' );
1
<h3>Auto-save</h3>
<p>Specify the interval that WordPress should auto-save, you just have to put a single line of code in wp-config.php:</p>
1
define('AUTOSAVE_INTERVAL', 300); // 60 * 5, auto-saves every 5 minutes
1
<p>Disable autosave:</p>
1
function no_autosave() {
  wp_deregister_script('autosave');
}
add_action( 'wp_print_scripts', 'no_autosave' );
1
<h3>Revisions</h3>
<p>Add the following to your wp-config.php file:</p>
1
define('WP_POST_REVISIONS', 3); // Maximum 3 revisions per post
define('WP_POST_REVISIONS', false); // Disable revisions
1
<h3>Trash</h3>
<p>Empty Trash Automatically,add this line to wp-config.php </p>
1
define('EMPTY_TRASH_DAYS', 7 ); // Empty trash every 7 days

CSS3 3D Text + Blur Text

3D text

h1 {
font-size: 4em;
text-align:center;
text-shadow:   0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Text Blur and no select

.blur{
color: transparent;
text-shadow: 0 0 26px rgba(0,0,0,0.8);
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}

Demo

Custom wordpress login

Make a custom login

copy the following piece of code, and paste it on your functions.php file

Of course your image will replace the original one so there is a size to respect. Your picture must have the following size: 333×85

//custom login
function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');
//Custom Login Screen
function change_wp_login_url() {
echo bloginfo(‘url’);
}
function change_wp_login_title() {
echo get_option(‘blogname’);
}
add_filter(‘login_headerurl’, ‘change_wp_login_url’);
add_filter(‘login_headertitle’, ‘change_wp_login_title’);
//Change link from new WP login logo (default is wordpress.org)
function put_my_url(){
return "http://www.ontwerps.nl/"; // your URL here
}
add_filter(‘login_headerurl’, ‘put_my_url’);

CSS page borders

CSS example Page border

/*------------------------------------*\
	PAGEBORDERS
\*------------------------------------*/
/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
	content:"";
	background:#acacac;
	position:fixed;
	display:block;
	z-index:5;
}
/* ...and position them! */
html:before{
	height:10px;
	left:0;
	right:0;
	top:0;
}
html:after{
	width:10px;
	top:0;
	right:0;
	bottom:0;
}
body:before{
	height:10px;
	right:0;
	bottom:0;
	left:0;
}
body:after{
	width:10px;
	top:0;
	bottom:0;
	left:0;
}

Macintosh Accent Codes

Mac Accent Codes / Mac Leestekens

Accented Vowels

For the Template, the symbol “V” means any vowel. The format is to hold the first two keys down simultaneously, release, then type the vowel you wish to be accented.
Note: You should use the French Keyboard if you need to type accents on the letter y.

Example 1: To input the lower case ó, hold down the Option key, then the E key. Release both keys then type lowercase o.
Example 2: To input the capital Ó, hold down the Option key, then the E key. Release all both keys then type capital O.

Other Characters

Accented Y in OS X

Example: For Ý, type Option+E, then capital Y.

File sync and sharing services

Sugarsync

http://www.sugarsync.com

SugarSync’s online backup, file sync and sharing service makes it easy to stay connected. With SugarSync you get secure cloud storage for all your files — documents, music, photos, and videos. Connect with our community and learn how other customers are using SugarSync in their work and personal lives.

Price: http://www.sugarsync.com/products/sync_pricing.html

Box

http://www.box.net/

Box.net’s online file storage makes it easy to securely share content as a link or a shared folder with anyone — inside or outside your company .
Lite-Free : 1 GB of web-storage, 25 MB file size limit.

Price: http://www.box.net/pricing

Zumodrive

http://www.zumodrive.com/

Upload your files to ZumoDrive and access them from any device. It’s that easy!
Free Plus 1GB bonus when you complete the Dojo

Price: http://www.zumodrive.com/pricing

Dropbox

http://www.dropbox.com

Dropbox is the easiest way to store, sync, and, share files online. There’s no complicated interface to learn. Dropbox works seamlessly with your operating system and automatically makes sure your files are up-to-date. Available for Windows, Mac, and Linux.
Create Basic Free 2GB Account: http://www.dropbox.com/referrals/NTQ0MTc2MTU5

Price: https://www.dropbox.com/pricing

IDriveSync

http://www.idrivesync.com/

Sync Files Online and share across multiple PCs seamlessly share files with friends and associates. Available for Windows only.
IDriveSync – Basic Free 2 GB free sync storage (upto 5 PCs).

Price: https://www.idrivesync.com/pricing.htm

FilesAnywhere

http://www.filesanywhere.com

Online Storage, Online Backup, Send Large Files, Dropbox, Free File Drive, WebDAV, Photos Online.Desktop (Windows/Mac)
Free Plan, 1GB of Free Storage

Price: https://www.filesanywhere.com/PricingPage.aspx

MobileMe

http://www.me.com
http://www.apple.com/mobileme

Apple – MobileMe – Your iPhone, iPad, Mac, and PC. In perfect sync. MobileMe automatically pushes new email, contacts, and calendar events to your iPhone, Mac, and PC. So your devices always stay in perfect sync.

Price: http://www.apple.com/mobileme/pricing/

Extend or remove some fields in User Profiles

WordPress user profiles include several contact fields (e-mail address, a URL, AIM, Yahoo, and Google Talk) and these built-in contact fields are not always useful. It is possible to extend or remove some fields with just a few lines of code in functions file. In the following code we will add a Twitter field and remove AIM, Yahoo IM, Google Talk/Jabber.

// Change user contact fields profile
function change_user_profile( $contactmethods ) {
// Add Twitter field
$contactmethods['twitter'] = 'Twitter Name (no @)';
// Remove AIM, Yahoo IM, Google Talk/Jabber
unset($contactmethods['aim']);
unset($contactmethods['yim']);
unset($contactmethods['jabber']);
return $contactmethods;
}
add filter('user contactmethods','change_user_profile',10,1);

Changing excerpt

Changing excerpt lenght

In WordPress it is possible to change the excerpt length by simply returning the desired number of words as an integer. In this example we will output the first 75 words. Create a variable an put it on top of your functions.php so you can quickly change it.

// Changing excerpt length to 75 Words
$wp_excerpt_words_length = 75;
function change_excerpt_length($length) {
   return $wp_excerpt_words_length;
}
add_filter('excerpt_length', 'change_excerpt_length');

Changing excerpt more

The default text appended to auto-generated excerpts is (‘[...]’). Sometimes it is more suitable to change it with something else for example a link. Here below is the code to change the excerpt more with a link.

// Changing excerpt more
function change_excerpt_more($more) {
   return '<a title="Continue reading" href="%27.%20get%20permalink%28%29%20.%20%27" rel="nofollow">' . 'Continue reading' . '</a>';
}
add_filter('excerpt_more', 'change_excerpt_more');

New Twitter Background Template

Few points you need to keep in mind:

• The new design has a constant top toolbar that is 40 pixels tall and spans the entire length of the web page. For most designs, this shouldn’t interfere with any of your elements, but be aware that this bar is always there. Also note that there is a 20 pixel tall space between the toolbar and the start of the two columns.
• The spacing to the right and left of the columns is fluid and will vary based on the resolution and size of the browser window. The spacing is also significantly reduced from the previous design. As an example, in a 1280×800 browsing window, in the old design, there were approximately 251 pixels on each side of the Twitter columns. On the new design, that is reduced to 112 and 113 pixels respectively.
• The Twitter sidebar on the right is now semi-opaque. The opacity is about 75%, which means that depending on what color you choose and the color or style of your background image, that can impact readability.
• The timeline column on the left is always 540 pixels in width, but the sidebar can vary. After a certain resolution (about 1130 pixels), it becomes fixed at 500 pixels wide, but on smaller screens or in smaller browser windows, it can be as small as 380 pixels.
• Because of the way the columns are now laid out, background images should probably only be tiled if they are patterns or seamless. Larger images are much better off transitioning to a solid color rather than repeating.

Twitter Theme Tool:
Customize your Twitter profile with Themeleon. Go to Themeleon

Download Files

Fixed Footer

Creating a fixed footer to the bottom of the screen. We also added an IE6 hack.

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:32px;
   width:100%;
   background:#333;
}
/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Drop cap

Set off the first letter of a chapter or paragraph.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:50px;
font-family:Verdana;
}

Style links depending on some rules also called attribute selectors

In CSS3 you can style links depending on some rules also called attribute selectors. This is convenient if you have files in PDF, Zip among other and you want to display a small icon near it. This snippet shows a small icons next to your links telling the user if it is an external link, an email, a pdf, a zip or whatever you would like.

/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}
/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}
/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
	content: url(icons/zip.png);
}

Insert shortcodes in widgets

Just add a filter in functions.php, as shown below.

add_filter('widget_text', 'do_shortcode')

Now you can add shortcodes in Widgets just as you do in a normal post or page.

Allow more file types for upload

If you ever tried to upload some not so common filetypes, such as .ai to your WordPress blog, you may have experienced an error, because WordPress simply doesn’t want you to upload some other file type.
Fortunately, you can add new file types to WordPress whitelist. Paste the followingcode in your functions.php, and you’re done.

function addUploadMimes($mimes) {
    $mimes = array_merge($mimes, array(
        'ai|eps|psd|tmbundle|tmCommand|tmDragCommand|tmSnippet|tmLanguage|tmPreferences' => 'application/octet-stream'
    ));
    return $mimes;
}
add_filter('upload_mimes', 'addUploadMimes');

Note that file types have to be separated by a pipe.

Removing autolinks in comments

Paste the following into your functions.php file. Once you saved the file, you’ll notice that autolinks have disappeared.

remove_filter('comment_text', 'make_clickable', 9);

Post thumbnail in your RSS feed

The the_post_thumbnail() function is very useful to easily add and display a thumbnail attached to a post. Unfortunately, there’s no built-in way to display this thumbnail on your RSS feed.

Simply paste it in your functions.php, save it, and the post thumbnail will be automatically displayed on your RSS feed.

function diw_post_thumbnail_feeds($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
	}
	return $content;
}
add_filter('the_excerpt_rss', 'diw_post_thumbnail_feeds');
add_filter('the_content_feed', 'diw_post_thumbnail_feeds');

PDF viewer Google Docs shortcode

Google Docs is easy to read documents in .pdf, .doc or .xls online. Creating a shortcode that will open the PDF in Google Docs instead of forcing download?

Simply paste the code in your functions.php.

function pdflink($attr, $content) {
	return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $attr['href'] . '">'.$content.'</a>';
}
add_shortcode('pdf', 'pdflink');

Here is the syntax for using the shortcode on your posts and page.

[pdf href="http://www.domainname.nl/linktofile/file.pdf"]View PDF[/pdf]

WordPress Debug

Simple WordPress debugging

In the file wp-config.php, add the following code:

if ( isset($_GET['debug']) && $_GET['debug'] == 'debug')
  define('WP_DEBUG', true);

I add ?debug=debug to its URL and see what’s causing the trouble.

Change that second ‘debug’ to a key of your own choosing, so not everyone out there can open debug mode on your blog

Free PSD – Beer Poster

Download Files

Various CSS3 Buttons

Download Files Demo

Disable “Downloaded from Internet” Warnings on Mac OS X’s

Using the Terminal, Snow Leopard (10.6) users can enter this command, substituting “~/Downloads” (the Downloads folder inside the user folder) for whatever file or folder where they’d like to prevent future download warnings.

In 10.6, copy and paste this command:

xattr -d -r com.apple.quarantine ~/Downloads

To remove the warning dialog from already-downloaded files, you need to use Terminal (in Applications -> Utilities).
In 10.5, copy and paste this command:

find ~/Downloads/geeklog-1.6.1 -type f -exec xattr -d com.apple.quarantine {} \;

Note that these commands can take a while to run if there are a lot of files in your Downloads folder. You can also change the directory they run on by modifying the ~/Downloads bit of the command—just change it to reflect the full path to whatever folder you’d like to update. (Remember to use backslashes before spaces, if any of the items on the path contain spaces.)

Permanently disable the warning system

If you’d like to disable the warning dialogs completely (for any files you download in the future), open Terminal and copy and paste this command:

defaults write com.apple.LaunchServices LSQuarantine -bool NO

After you get the command prompt back (you won’t see any feedback; the command prompt will simply appear again), restart your Mac. From now on, you won’t be warned when opening downloaded files. It goes without saying, but making this change reduces the security of your machine.

If you do permanently disable the system, and then decide you’d like it back, repeat the above command, but change NO to YES and reboot your Mac.

Free 404 error page

Free 404 error page

Download Files Demo

Blackest-black – CMYK is C-75 M-68 Y-67 K-90

Tip CMYK Black:

RGB documents are meant for screens, and CMYK documents are meant for printing.

Therefore, when you print a CMYK document and you need a really rich black it’s important to remember one thing: 100% K isn’t the blackest black you can get.
The blackest-black you can get when printing in CMYK is C-75 M-68 Y-67 K-90.

Domain redirect keeping the URL path – URL Masking

I had a site hosted at a domain and the client asked me to change the domain.

There are many ways to do such a thing.

Method1:
Apache .htaccess file associated with mod_rewrite? Most of the hosting services supports this.

RewriteEngine On
RewriteBase /
Redirect 301 / http://mynewdomain.com/

This way, all requests to the root of my old domain get redirected to the root of my new domain.
But what if I try yo access some path inside my old domain? It would raise a 404 error because it does not have the content anymore.
I want that if the user access http://myolddomain.com/path/ it redirects him to http://mynewdomain.com/path/. So I ended up with this:

RewriteEngine On
RewriteBase /
RedirectMatch 301 (.*)$ http://mynewdomain.com$1

Method2:

Using The FRAMESET Tag For URL Masking.

This method hides all visual cues that the web page being displayed is not at the URL in the browser’s address bar (unless the web page being displayed itself contains images or wordage that provide clues).

What you do is create a FRAMESET web page that loads the target web page.

Make a web page with the following code. Change the URL in the third line of the code to the URL of the web page to be displayed in the browser.

<frameset rows="100%">
  <frameset cols="100%">
    <frame src="http://domain.com/page.html" frameborder="0" scrolling="no">
  </frameset>
</frameset>

Put only the above into the FRAMESET web page. Use no HTML or BODY or other normal web page tags.
Upload the FRAMESET web page to your server. Load the FRAMESET web page into your browser.
You’ll notice that the URL of the FRAMESET web page is in your browser’s address bar even while a different web page, the one you specified in the third line of the above code, is displayed in the browser window.
That’s the simplicity of URL masking with a FRAMESET tag.

Method3:

Using IFRAME Tag For URL Masking.

This method can leave visual cues that the page being displayed is not the page at the URL in the browser’s address bar.

The clues can be (other than clues the web page being displayed itself may contain), depending on the dimensions of the IFRAME compared to the dimensions of the displayed web page:

1. Scrollbars appear on the IFRAME. When the displayed web page is larger than the dimensions of the IFRAME tag, and the IFRAME is allowed to display scroll bars, scroll bars will appear for the site user.

2. Part of the displayed web page is cut off. When the displayed web page is larger than the dimensions of the IFRAME tag, and the IFRAME is prevented from displaying scroll bars, the excess of the displayed web page is cropped.

3. The browser window scroll bars allow the user to scroll down past the end of the displayed page. When the dimensions of the IFRAME tag exceed that of the displayed web page, and the dimensions are larger than the browser window itself, scrollbars for the browser window will let the user scroll past the end of the displayed web page.

To use an IFRAME for URL masking, create a web page with an IFRAME that loads the target web page.

Make a web page with the following code. Change the URL in the fourth line of the code to the URL of the web page to be displayed in the browser.

<html>
<body>
<iframe
  src="http://domain.com/page.html"
  frameborder="0"
  width="960"
  height="2500"
  scrolling="no">
</frameset>
</body>
</html>
</iframe>

Upload the IFRAME web page to your server. Load the IFRAME web page into your browser.
You’ll notice that the URL of the IFRAME web page is in your browser’s address bar even while a different web page, the one you specified in the fourth line of the above code, is displayed in the IFRAME tag.

Here are three methods for importing large SQL files

Method 1: Bigdump

http://www.ozerov.de/bigdump.php

I used a script called BigDump.php, a staggered SQL dump importer. It executes only a small part of the huge dump and restarts itself. The next session starts where the last was stopped to keep you from running into your server’s limits. Instructions for using it are on the BigDump website. Basically you place your SQL file in a folder on your server, along with the bigdump.php file. You edit that file with your database information and then visit the page on your server and set the import to go. This is a fairly quick process and will save you a lot of time.

Method 2: SSH

If you have root access to your server, create a backup using SSH

cd to the directory where you want to store your dump file:

cd /var/www/vhosts/yourdomain.com/httpdocs/sqldump

Then tell mysql to dump it out:

mysqldump –add-drop-table -u dbuser -p your_db > mybackup.sql

It will prompt you for your password. Everything should dump out without a problem.

*Note: The directory where you’re sending the dump file needs to be writeable by the server. Also, you don’t really want to leave it in that folder permanently. Just drop it there and pull it off your server so that you can manipulate it if you have to.
How to Import a Large SQL File

Importing is usually a bit messier. If you’re duplicating this database for testing purposes or moving your site to a new server, a large dump file, even when gzipped, can pose some challenges in the import process. This is the part where things can really stall out, and you need a few tricks up your sleeve.

Ordinarily I would just use phpMyAdmin to import the file. Because it’s so large, the first thing you should do is try importing via SSH:

mysql -u your_database -p db_user < mybackup.sql
Common Error when using SSH:

"got a packet bigger than ‘max_allowed_packet’ bytes"

Now what? Depending on the size of your file, running this command may fix it for you:

mysql> set global max_allowed_packet=1000000000;
mysql> set global net_buffer_length=1000000;

Then try importing your database after this. If it still doesn’t work, you might try splitting it up.

Method 3: splitting up your SQL file

Download a program that will split up your SQL file, such as SQLDumpSplitter2. This is a free SQL dump file splitter that will let you determine how big your chops will be and will automatically cut and save your split SQL file. Yes, this is a pain, but it is sometimes the only way to get this accomplished.

http://www.rusiczki.net/2007/01/24/sql-dump-file-splitter/

Create the splits and then upload them to a directory on your server.

If you want to restore the dump, you have to execute the yourdatabase_DataStructure.sql first because it contains the Tables structure. After that, you can execute the other .sql-files as they contain the data of the now existing tables. Using SSH, CD to your directory again and make sure to send this first:

mysql -u db_user -p db_name < yourbackup_DataStructure.sql

Then your splits:
mysql -u db_user -p db_name < yourbackup_1.sql
mysql -u db_user -p db_name < yourbackup_2.sql
etc…

Include jQuery in WordPress Theme

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.4.2');
   wp_enqueue_script('jquery');
}

Cycling apps for Iphone and Blackberry

Iphone / Ipad cycling apps

Cyclemeter GPS Cycling Computer for Road & Mountain Bikingvan Abvio LLC

Cyclemeter turns your iPhone into a powerful GPS stopwatch, giving you feedback and motivation to go farther, become faster, be healthier, and live longer. ?

Supports iOS 4 and multitasking! ? Named Best of Show at Macworld 2010 by Beatweek. ?

Featured by Apple in What’s Hot in the App Store. ? For a complete product tour, see

http://www.abvio.com/cyclemeter/

Bike Docter

Bicycle maintenance for everyone

Bike Doctor will show you everything you need to know to keep your bike in perfect working order. Simply choose a part of the bike you want to look at and follow the repair.

http://bikedoctorapp.com/

iMapmyRide

MapMy (powered by MapMyFitness is a location-based application that uses the built in GPS technology on your iPhone to allow runners, cyclists, (or any outdoor fitness activity) to track their daily training data, including:

* Total Time

* Total Distance (in miles or kilometers)

* Pace (minutes per km/mile) or current speed

* Average Speed / Pace (km/mile)

* View your running maps directly on your iPhone

* Training Log including Distance, Calories Burned, Time, and Date

* Add Your Workout to Twitter

http://www.imapmy.com/

http://www.mapmyride.com/

Bicycle Gear Calculator — Bike GearsBy JPMartineau

Designed by a cyclist, for cyclists, Bike Gears is the premier Bicycle Gear Calculator for the iPhone/iPod Touch.

Calculate Gear Ratios, Gear Inches, Development and Gain Ratios using your bike’s measurements.

The app now has over 200 preset tire sizes and also lets you enter your own custom tire size for personalized measurements.

http://www.bikegearsapp.com

MotionX GPS LiteBy MotionX™

MotionX-GPS is for your outdoor life:

That’s Walking, Hiking, Running, Cycling, Sailing, Skiing, Flying, Racing, Geocaching.

MotionX is committed to constant improvement. We listen to our millions of MotionX users and continuously add the most requested features. Recently added user-requested features include:

Live Speed and Altitude graphs.

Ascent / Descent and gradient information.

Share tracks up to 5MB.

Map Storage Interface: Downloading and storing maps is faster and easier than ever.

MotionX Terrain and Road maps can be stored for worldwide use and no data fees.

High contrast skin style for easy daytime viewing.

Support for GPX file import enables wirelessly importing of GPS tracks and waypoints from any source, anywhere.

http://gps.motionx.com/iphone/

B.iCycle – GPS cycling computer for Road & Mountain Biking

B.iCycle provides all the information you need on the bike. Our stylish user interface combined with maximum ease of use create a new experience on the bike that beats an ordinary bike computer by far!

http://b-icycle.com

Cychosis

Cychosis is a cycling journal for the the Apple iPhone with the following features:

Charting

See colorful high resolution charts of your training and riding progress for Weekly, Monthly, Yearly, and All time.

Chart your distance, average speed, and time.

Twitter

Optional automatic tweet (twitter) of each ride after you enter it lets your friends and family follow you on your bike!

Export ride data to CSV — private access to last 5 exports via Cychosis exports server.

Bikes:

Keeps track of the mileage and number of rides on any number of bikes.

Goals:

Set any number of distance goals and track progress against them.

Routes:

Keeps track of common routes, distance, elevation, notes, etc.

Automatically keeps stats for each route.

Rides:

Quickly record rides as soon as you’re finished.

Filter rides to current week, month, or year

Optional summary totals for current filtered period

Shows stats for each ride.

Pre-fill a new ride with one of your pre-defined routes, or enter a new name quickly.

http://www.cychosis.com/

Pedal Brain

Pedal Brain can be thought of as three integrated products. First, it’s an iPod and iPhone ANT+ accessory. Second, it’s a complete training log. Third, it’s a coaching platform.

Each of these products have been designed together and as such integrate perfectly well. There’s no distinction between your workouts on the web and your workouts on the iPhone or iPod.

Simply go for a ride and all your performance data is uploaded in realtime to the web where coaches, teammates and friends can see it (if you allow them to). There’s no post workout data upload step with Pedal Brain.

Similarly there’s no need to copy your workouts onto paper and stuff in your jersey before heading out. It’s already there on your iPhone or iPod

http://en.pedalbrain.com

Trails – GPS trackerBy Felix Lamouroux

Record maps while hiking, on bike trips or while jogging directly on your iPhone. Easily import tracks and follow hikes of others!

You can export your tracks with two clicks in the standard GPX Format. This allows you to geotag and geocode your non-iPhone photos (via e.g. HoudahGeo) or to share your track with others via Google Earth, etc

http://trails.lamouroux.de

EveryTrail

EveryTrail is the best way to share trips, connect with other travelers and find great new things to do.

Map a trip route with your phone or GPS

Add trip photos to your map instantly

Add maps & photos to your blog or website

Explore and share in the EveryTrail community

http://www.everytrail.com/

Distance Meter ProBy Future Apps Inc.

Distance meter is an easy to use, multi-purpose GPS distance tracker. Ever wonder what the distance of your favorite walking trail is? Distance Meter can find it! Need to know how fast your traveling while biking? Distance meter can tell you that too. Distance Meter can even show you how many calories you have burned!

Since Distance Meter takes advantage of the iPhone 3G’s built in GPS Receiver, its accuracy is much improved over a standard step pedometer that cost ten times as much. Distance Meter’s calculations can be accurate to within a few feet with a good GPS signal.

Go walking, hiking, jogging, running, biking, and distance meter will automatically calculate your distance traveled, current pace or speed, and much more!

http://www.future-apps.net/Distance_Meter/Distance_Meter.html

The Bike Computer By GlobalMotion Media, Inc

In addition to being the world’s most beautiful and easy to use cyclocomputer, the bike computer is also a GPS tracking application, which means it records and uploads a track of your bike ride.

Our website, www.everytrail.com, helps you visualize and annotate your ride, and to share it with your friends, family, and our fast growing community from over 130 countries.

http://itunes.apple.com/gb/app/the-bike-computer/id296643185?mt=8&ign-mpt=uo%3D6

Bike Your Drive

Bike Your Drive by REI is an iPhone app that helps you join the self-propelled revolution by logging your Bike rides with some cool features.

The app keeps a GPS log of your bike rides, whereever you go.

You can also snap photos on your route which are automatically geotagged with the location of the photo.

The stats screen of the app shows you a summary of your speed, distance, and time elapsed. Also you see your average speed, elevation and compass heading along with health and environmental impacts.

There is also a map view which not only shows your current location bu also plots your photos to where they were taken on your route. The app saves your drive details online at everytrail.com

http://www.appsafari.com/go/315344672/bikeyourdriverei

LiveRider

LiveRider is the first Wireless Cycling Computer and mounting system for iPhone and iPod touch. Incorporating advanced 2.4 GHz wireless technology from New Potato, a single permanently-sealed sensor unit is mounted on the frame near the rear wheel that measures both bike speed and pedal cadence and transmits that information to a receiving unit attached to the 30 pin connector of the iPhone.

Captured securely in a sleek and aerodynamic shock-absorbing handlebar mounted cradle that protects against vibration and debris, the rider’s iPhone is immediately accessible, yet can be quickly removed along with the receiver dongle.

Unlike other cycling computers, LiveRider is able to leverage the advanced features of the iPhone and iPod touch to provide the user a hi-res color touch screen interface, GPS features providing location and tracking, and accelerometer features to record inclination. LiveRider includes a file system to save the detailed data from each ride which can be reviewed graphically or exported via email and imported into any spreadsheet, document, or database.

http://www.newpotatotech.com/LiveRider/liverider.html

Blackberry cycling apps

Cycling Log

* Helps you to track your workouts & cycling logs on a calendar.

* Record your workouts and rest days with this application, and see your history and trends on the visual calendar and summary.

* Now, completely record, monitor, track & recall all your workouts for the entire year.

* So, now stick to all your goals & achieve them using this application.

* Have a quick view of all the data on the calendar itself.

FEATURES:

* Record all the data along with the basic information like name, photo, etc.

* See changes and improvements over time

* Motivate yourself to improve your fitness

* Send the data through Email.

* Quick glance of the cycling log data.

http://appworld.blackberry.com/webstore/content/8928

iMapMyRide

iMapMyRide features real-time ride gps tracking with distance, time, pace, and speed display, support for mile or km output, synchronization with your cycling training log and biking routes on MapMyRide.com, viewing of your cycling history with maps from your BlackBerry® smartphone, and Twitter integration.

GPS-location must be enabled and 3rd party access supported by your carrier. For example, this product does not work with Verizon and the Curve/Bold however it does work with Verizon and the Storm. This product also does not work with most international carriers. Please check with your carrier before you purchase this application as we are unable to provide refunds through the App Store.

With iMapMyRide, you can instantaneously get your cycling maps and view them in Google or Google Earth, view elevation profiles, post them to your blog or website, email them to friends, or print them out for an event or group ride.

When you ride, iMapMyRide.com automatically breaks your rides into 5-mile splits so you can compare segments of your workout.

http://appworld.blackberry.com/webstore/content/5366

AllSport GPS

Track runs, bike rides, walks, and fitness workouts with AllSport GPS. Download a FREE 7-day trial version today; just click “Download Trial.” After 7 days, we will ask for a one-time fee of $19.99.

Turn your BlackBerry® into a personal trainer and workout collector. AllSport GPS uses the built-in GPS on your BlackBerry® to track all your workouts and fitness stats. Plus, use our website to analyze, store, plan, and share your training sessions. With AllSport GPS you can:

* Track your workout routes on a map

* Collect fitness stats (time, speed, distance traveled, and calories burned).

* Store weekly, monthly, and annual workouts. Compare workouts online too.

* View speed and elevation graphs.

* Download street, aerial, and trail maps wirelessly to your BlackBerry®.

* Send workouts wirelessly to the trimbleoutdoors.com to see more maps and stats.

* Share and exchange rides, runs, and runs with friends.

* Retrieve trips from your online account on your phone.

* Access thousands of public trips submitted by our online community and the editors of Bicycling magazine.

* Keep workouts private or share them with our active community.

* Race against previous workouts to better your personal records.

http://appworld.blackberry.com/webstore/content/139

Bike-O-Meter

Bike-O-Meter is a “must have” App for every cycling or walking enthusiast. The App works equally well in an vehicle or automobile.

Bike-O-Meter is both a speedometer and odometer that allows instantaneous speed and distance whether you are walking, riding a bicycle or a vehicle.

The Bike-O-Meter App employs some very sophisticated algorithms to calculate speeds and distances very accurately.

It provides the ability to monitor speed, distance, elapsed time, heading/direction and locations that are important to a serious traveler. Bike-O-Meter tracks your trip, your overall speed, distance and elapsed time.

Mount it on your vehicle or carry it in your pocket/holster. All cellphone functions are available while you Bike-O-Meter runs in the background.

Bike-O-Meter supports 18 functions

http://appworld.blackberry.com/webstore/content/9112

VeloComputer

Transforms your phone into an advanced cycling computer. Strap it on your thigh and get cadence from accelerometer and speed from GPS. Keep your eyes on the road, not your display with audible VeloTones.

http://appworld.blackberry.com/webstore/content/1838

CSS3 Animation Example

Download Files Demo

Free Business Card Jeans Style

Free Business Card Template Jeans Style

Download Files Demo

Disabling wpautop() – WordPress Editor

Disabling wpautop()

To disable wpautop(), just add this code to your theme’s functions.php file:

//disable wpautop filter
remove_filter ('the_content',  'wpautop');

Oscommerce – 1064 – You have an error in your SQL syntax;

Client of mine had an error in an old version of Oscommerce with the featured product.

Error:
Featured Products
1064 – You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘-20, 20′ at line 1

select p.products_id, pd.products_name, s.featured_id, s.featured_date_added, s.featured_last_modified, s.expires_date, s.date_status_change, s.status from products p, featured s, products_description pd where p.products_id = pd.products_id and pd.language_id = ’4′ and p.products_id = s.products_id order by pd.products_name limit -20, 20

[TEP STOP]

Solution:

CODE
Line 67 in catalog/includes/classes/split_page_results.php must be changed from:

$this->sql_query .= " limit " . $offset . ", " . $this->number_of_rows_per_page;

to

$this->sql_query .= " limit " . max($offset, 0) . ", " . $this->number_of_rows_per_page;

Line 38 in catalog/admin/includes/classes/split_page_results.php must be changed from:

$sql_query .= " limit " . $offset . ", " . $max_rows_per_page;

to

$sql_query .= " limit " . max($offset, 0) . ", " . $max_rows_per_page;

Glyphs en Tekens

Another Drop Shadow

WordPress – Add Javascript to a Single Post

Add the following immediately before the call to wp_head:

/* If the post has the 'javascript' custom field, load a script
	 * The script to load is based on the value of the 'javascript' field
	 */
	if ( is_single() && get_post_meta($post->ID, 'javascript', true) ) {
		$script = get_post_meta($post->ID, 'javascript', true);
		$script_path = get_bloginfo('template_url') . '/js/' . $script . '.js';
		wp_enqueue_script( $script, $script_path );
	}

For example, if you want to use a javascript called custom.js on your post, you’ll have to create a folder in your theme directory called js and put your jacascript there (for me the path would be www.domainname.com/wp-content/themes/yourtheme/js). Then add a Custom Field to your post named javascript with the value custom.

WordPress – Add CSS to a Single Post

Add the following immediately before the call to wp_head:

/*If the post has the 'css' custom field, load a stylesheet
	 *The stylesheet to load is based on the value of the 'css' field
	 */
	if ( get_post_meta($post->ID, 'css', true) ) {
		$style = get_post_meta($post->ID, 'css', true);
		$stylepath = get_bloginfo('template_url') . '/css/' . $style . '.css';
		echo "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"$stylepath\" />\n";
	}

For example, if you want to use a stylesheet called custom.css on your post, you’ll have to create a folder in your theme directory called css and put your stylesheet there (for me the path would be www.domainname.com/wp-content/themes/yourtheme/css). Then add a Custom Field to your post named css with the value custom.

Photoshop problem with resizing text box

Some people have a problem with resizing a text box.

Problem:
When you resize the text box with the move tool the text itself changes as well.

Solution:
What?? Is it that simple?? simply resize while using the Text Tool.

Alt Code Cheat Sheet

Download PDF File

WordPress shortcode Hide Content From The Public

edit function.php

function guest_check_shortcode( $atts, $content = null ) {
	 if ( ( !is_user_logged_in() && !is_null( $content ) ) || is_feed() )
		return $content;
	return '';
}
add_shortcode( 'guest', 'guest_check_shortcode' );
function member_check_shortcode( $atts, $content = null ) {
	 if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
		return $content;
	return '';
}
add_shortcode( 'member', 'member_check_shortcode' );

Usage:

Curabitur risus turpis, tincidunt nec porta non; tempor vitae erat.
[guest]This content is only visible to members, subscribe here to get access to all our awesome tips or log in here if you are already a member[/guest]
[member]Your awesome tip and member-only content comes here[/member]
 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.

WordPress shortcode for Content In Column

Edit the function.php file.

function half($atts, $content = null) {
	return '<div class="half">'.$content.'</div>';
}
function half_last($atts, $content = null) {
	return '<div class="half-last">'.$content.'</div><br style="clear:both" />';
}
add_shortcode('half', 'half');
add_shortcode('half_last', 'half_last');

Edit the the style.css file:

.half, .half-last {float:left;width:47%;margin:10px 0;margin-right:6%;}
.half-last {margin-right:0}

Usage:

[half]Mauris ut lectus erat. In condimentum, turpis ...[/half]
[half_last]Mauris ut lectus erat. In condimentum, turpis ...[/half_last]

download button shortcode in wordpress

Add code to function.php

function download($atts, $content = null) {
	extract(shortcode_atts(array(
		"url" => ''
	), $atts));
	return '<a href="'.$url.'" class="download">'.$content.'</a>';
}
add_shortcode('download', 'download');

add code to style.css

.download {display: inline-block;color:#fff;font-weight:bold;font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
background : -moz-linear-gradient(center top, #88c841, #73b338);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
}
.download:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
background : -moz-linear-gradient(center top, #73b338, #88c841);
}

usage:

[download url="http://www.google.com"]Download Google Chrome[/download]

CSS3 Hover Image

Download Files Demo

Order Table

Example table:

Download Files Demo

multi borders

CSS example of multiborder.

		#box {
			background: #f4f4f4;
			border: 1px solid #0000FF;
			width: 400px;
			height: 400px;
			margin: 60px auto;
			position: relative;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		#box:before {
			border: 1px solid white;
			content: '';
			width: 396px;
			height: 396px;
			position: absolute;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		#box:after {
			content: '';
			position: absolute;
			width: 396px;
			height: 396px;
			border: 1px solid #ff0000;
			left: 1px; top: 1px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}

Demo

Vcard Template 1

Online vcards are becoming more and more widespread.

This is a template that will help you set up a professional vcard site.

Download Files Demo

Gradients in CSS3

You can create something as simple as the example below or as complex as displaying radial gradient circles positioned throughout your DIV. You can even create color stops similar to what is used within Photoshop anywhere you wish. The possibilities are endless.

The Code:

background-image:
     -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#999));
background-image:
     -moz-linear-gradient(100% 100% 90deg, #999, #eee);
an even shorter way for Mozilla:
background-image:
     -moz-linear-gradient(bottom, #999, #eee);

jquery scroll to top

jquery effect with google font directory in h1 tag.

google font code:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

h1 { font-family: 'Reenie Beanie', arial, serif; }

Watch page source in demo for code.

Demo

Multi-Column CSS3

Example of using multi column :

* column-count: The desired number of columns for the element.
* column-gap: The padding between each column.
* column-rule: The divider for each column; can be used to specify a border.
* column-width: Used to specifically state the width of each column.

#wrapper p {
				-webkit-column-count: 4;
				-webkit-column-gap: 10px;
				-moz-column-count: 4;
				-moz-column-gap: 10px;
				column-count: 3;
				column-gap: 10px;
				-webkit-column-rule: 1px dotted #fff;
				-moz-column-rule: 1px dotted #fff;
			}

Demo

CSS3 Examples

1 CSS3 Transitions Demo

a. Color Transition

.color-transition a{color: #e83119;font-size: 35px;text-transform: uppercase;}
.color-transition a:hover{color: #016dd2;}
.color-transition a{ -webkit-transition:color .4s ease-out;}

b. Border Transition

.border-nav{min-height: 120px;margin-top: 60px;}
.border-nav ul li{
	display: inline;
	list-style-type: none;}
.border-nav a{
	font-size: 22px;
	display: inline-block;
	margin: 0px 15px 0px 0px;
	text-decoration: none;
	float: left;
	border-bottom: 3px solid #e83119;
	-webkit-transition: border .3s ease-out;}
.border-nav a:hover{
	border-bottom: 50px solid #e83119;
	text-decoration: none;
	color: #e83119;}

2: Background Clip Demo

a. background-clip:text;

.bg-clip{
	background: url(../images/pat.png) repeat;
	margin-bottom: 60px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

b. Transform

.txt-rotate{
	background: url(../images/clipped_image.png) repeat;
	margin-bottom: 35px;margin-top: 0px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate (-5deg);}

3: CSS Transforms, Box Shadow and RGBa Demo

.shadowed{
	margin-top: 30px;
	margin-bottom: 30px;
	border: 3px solid #fff;
	box-shadow: 0 3px 4px rgba(0,0,0,.5);
	-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
	-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);}
.ontwerps1{  -o-transform: rotate(2.5deg);
	-moz-transform: rotate(2.5deg);
	-webkit-transform: rotate(2.5deg);
	margin-bottom: -125px;}
.ontwerps2{  -o-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);}
.ontwerps3{  -o-transform: rotate(2.5deg);
	-moz-transform: rotate(2.5deg);
	-webkit-transform: rotate(2.5deg)}
.ontwerps4{  -o-transform: rotate(-2.5deg);
	-moz-transform: rotate(-2.5deg);
	-webkit-transform: rotate(-2.5deg);
	margin-top: -40px;}

4: CSS3 Animations Demo

a. Keyframe Animation

.circle_motion{
	-webkit-animation-name: track;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	}
@-webkit-keyframes track {
	0% {
		margin-top:0px;
	}
	25% {
		margin-top:150px;
	}
	50% {
		margin-top:150px;
		margin-left: 300px;
	}
	75% {
		margin-top:0px;
		margin-left: 300px;
	}
	100% {
		margin-left:0px;
	}
}

Download File Demo

Logo’s and branding of social networking sites

Here are some links to logo’s and branding of social networking websites:

Facebook

Linkedin

Twitter

Youtube

Multiple Backgrounds in CSS3

CSS3 lets you apply multiple backgrounds to an element using several properties. Included in this list of properties is background-image, background-repeat, background-position and background-size. In order to include these multiple backgrounds within a single element, you must specify the correct properties separated by commas.

body {
  background:
    url(../images/bottom-left.png) top right fixed no-repeat,
    url(../images/bottom-right.png) top left fixed no-repeat,
    url(../images/top-left.png) bottom left fixed no-repeat,
    url(../images/top-right.png) bottom right fixed no-repeat;
  background-color:#ffffff;
}

Text Shadow in CSS3

Normal Shadow

Here is how to create a normal single color shadow with a slight blur.

The Code:

text-shadow: 1px 1px 2px #000;

Letter Press Effect

Here’s a quick example for pulling it off with text shadows.

The Code:

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

Chrome Extensions Re-Order

Until an official way is developed, you could disable and re-enable your extensions in the order you want them to appear (this of course becomes less practical if you have lots of extensions or add new ones often). but this might help a few people bring a bit of order to ‘the toolbar.’

Box Shadow in CSS3

Here is the basic use of the box shadow.

The Code:

-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;

Border Radius in CSS3

Equal Corners

The Code:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Unequal Corners

Targeting specific corners requires just a bit more code

The Code:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 60px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 60px;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 60px;

CSS Font Shorthand Property

@font -face example

@font -face is supported by the top browsers using various font types, for example Safari, Opera, Firefox and Chrome handle .TTF and .OTF, Internet Explorer can handle .EOT, and what’s probably worth a mention, Firefox 3.6 now handles .WOFF, and Opera supports .SVG.

@font-face implementation:

CSS:

@font-face {
font-family: “Museo 300″;
src: url(“fonts/Museo300-Regular.eot”);
src: local(“Museo 300″), local(“Museo 300″),
url(“fonts/Museo300-Regular.otf”) format(“opentype”),
url(“fonts/Museo300-Regular.woff”) format(“woff”),
url(“fonts/Museo300-Regular.svg#Museo 300″) format(“svg”);
}

Explanation:

font-family: “Museo 300″;
This is the font name, and how you will call it in your stylesheet.

src: url(“Museo300-Regular.eot”);
This will enable your font on Internet Explorer.

src: local(“Museo 300″), local(“Museo 300″),
This is the local setting which will call it from your machine if it exists.

url(“Museo300-Regular.otf”) format(“opentype”),
This covers Safari, Opera and Firefox below 3.6

url(“Museo300-Regular.woff”) format(“woff”),
This is the Firefox 3.6 file type.

url(“Museo300-Regular.svg#Museo 300″) format(“svg”);
This is the Opera font type. This will cover Safari, Firefox, Internet Explorer, Chrome and Opera at the very least and it provides a local setting which will find the local file on your machine. This can be altered to accommodate any other OpenType font or TrueType font (IF you have permission to use it!)

Usage:
#main {font: 18px “Museo 300″, Helvetica, Arial, sans-serif;}

When using the @font-face font in other elements, its good practice to have a few fallback fonts for users who are using a dated browser or browser that don’t support @font-face.

You can download the example along with the various font types which you can run locally and view in the various browsers, and use the sample code to adapt for your own uses.
If you have the .OTF file you can use the  Font Squirrel Generator, http://www.fontsquirrel.com/fontface/generator  , which will create the .SVG, .WOFF and .EOT formats for you to use.

Download Bekijk Demo

Show module positions of any Joomla! website?

You would like to put some Module at your site but don’t know where to put it…. Or “Nice site, is it Joomla! ?”… Or “How did they use some area at that Joomla! site? Is it a Module?”… You can easily find out yourself, without being logged in!

Add the parameter ?tp=1 behind the URL, e.g. http://www.joomla.org/?tp=1
The following parameters can be used: 0=normal, 1=horiz, -1=no wrapper.

Free Resume Template For An Online CV

Online resumes are becoming more and more widespread.

This is a template that will help you set up a professional online Cv in minutes and broaden the chance of finding a suitable job as many recruiters resort more and more to browsing online for prospective applicants instead of advertising their position and calling for applicants.

View in a browser that supports CSS3

Download Bekijk Demo

Reset your password in WordPress

Ever wanted to reset your password in WordPress, but cannot seem to use the reset password section whatever the reason?

SQL Query:

UPDATE wp_users SET user_pass = MD5( 'new_password' ) WHERE user_login = 'your-username';

Change Default “Admin” Username in WordPress

Every default WordPress installation will create an account with a default Admin username.

However, this can be a security issue because a hacker can brutal force your WordPress admin panel.

If you can change your default “Admin” username, you will give your WordPress admin panel additional security.

SQL Query:

UPDATE wp_users SET user_login = 'Your New Username' WHERE user_login = 'Admin';

Godmode in Windows 7 / Vista

Godmode in Windows 7

1. Create a new folder and then rename the folder with the following:

GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}

Thats its your ready to tweak your system from one easily accessible control panel. From Checking your security status to task scheduling. Have fun.

**NB The ‘godmode’ works with both the 32 & 64-bit versions of Windows 7, Vista 32-bit, Windows Server 2008 32-bit should also work. ** However, it is known to crash 64-bit versions of Vista : you may need to boot in safe mode or to the command line to delete the folder. Be warned..

Wampserver, hmailserver with spamassasin, filezilla server

For one project it was necessary to install a web server, I had access to a Windows 2003 server.
I’ve searched the internet and have found a few articles.
Here’s an overview:

1 wampserver

Download the latest release of Wampserver
Optionally add as much Apache, PHP and MySQL releases as you want
Once you download WAMP, double click the icon and begin the install process.

start wampserver with windows startup
start>run> type in ‘services.msc’ and press enter

scroll down to the two servcies

wampapache
wampmysql

right click them and select properties.

on the general tab change startup from manual to automatic.

also there is a log on tab which u can supply a password and it will start it up with out needing to be logged in

SETTING UP VIRTUAL HOST

** Left click the white half circle -> Apache -> httpd.conf (this opens the file)

** Find:
# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

** and replace with:
# Virtual hosts
Include conf/extra/httpd-vhosts.conf

** Save httpd.conf

** open in notepad {WampServer install directory}\bin\apache\Apache2.2.11\conf\extra\httpd-vhosts.conf

** Find:
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#

** and remove everything under that.

** and replace with:
<VirtualHost *:80>
ServerAdmin webmaster@{DOMAIN}.localhost
DocumentRoot “{WampServer2.0c.exe install directory}/www/{YOUR PATH TO DOMAIN ROOT}”
ServerName {YOUR DOMAIN}.localhost
ServerAlias www.{YOUR DOMAIN}.localhost
ErrorLog “logs/{YOUR DOMAIN}.localhost-error.log”
CustomLog “logs/{YOUR DOMAIN}.localhost-access.log” common
</VirtualHost>

** Replace {YOUR DOMAIN} with any name you want, feel free to customize this.
** Replace {YOUR PATH TO DOMAIN ROOT} with a valid path your domain root (It can be anywhere).

** Save httpd-vhosts.conf

** open in notepad C:\windows\system32\drivers\etc\hosts

** at the end add:
127.0.0.1     {YOUR DOMAIN}.localhost

** Replace {YOUR DOMAIN} with the one you set in VirtualHost.

** Save hosts

** A windows restart is recommended.

2 hmailserver

Configuring your DNS records

Before we install your mail server it is a good idea to ensure you DNS records are correctly setup for email. DNS is vital to the operation of the Internet, and in a nutshell what it does is create a link between a human friendly domain name (e.g. example.com) and an IP addresses. When a user enters a web address into their browser, that domain is then resolved to an IP address which is then used to communicate. When hosting your own email server there are three very important types of DNS records to consider, and these are A, PTR and MX records.

An A record, or Address record is one of the most common types of DNS records you’ll come across. Its purpose is to simply create a link between an IP address and a domain name. For example for the domain name of example.com you would have an A record that contained the IP address of the server that was hosting example.com. With A records the domain must be unique, but the IP address does not. This means you can have as many domain names pointing to the same IP address as you want, and is used extensively these days for both Email and Web hosting. In regards to your Email environment, it is best to create a separate A record that identifies your email server. This can be something like mail.example.com or similar. You’ll need to create an A record for each server you plan on using as a mail server.

A PTR, or Pointer Record is unique in DNS in that you can only have one PTR address per IP address. This is because the function of a PTR record is to resolve a human friendly name from an IP address, instead of the other way around. Because you are resolving a domain name from an IP address, there can only be one authoritative record. If possible it is best to set your PTR record of the IP your email will be hosted from to be the same as your A record (e.g. mail.example.com), and you may need to contact your hosting company to do this for you.

Finally we have the MX, or Mail eXchange record which is used by other mail servers to direct email to the right place. Unlike an A or PTR record an MX record is not associated with an IP address in anyway, but instead contains the human friendly name of the A record you wish to use for your mail server. This might sound a little redundant as all it is doing is pointing from one record to another, but MX records also have one other important function. This is to establish the pecking order of your email servers by using a preference field in which you can enter a numerical value (the lower the number, the more important that server is) to define in what order other email servers should contact your email servers. If the email server with the highest preference (lowest number in preference field) is not contactable, then incoming email servers will simply use the server identified by the MX record with the next highest preference.

Installing hMailServer

That is most of the heavy stuff out of the way. From here on in it is all installing and configuring hMail, which is all done via a GUI interface meaning I can use screen shots to do the talking and is hopefully easier to follow. Click any of the images to get a pop-up window displaying a full sized image.

After downloading the latest stable hMail server installer package (currently 4.3.1) from the hmailserver website, double click on it to initiate the install process as shown below in figure 1.

Select the installation path for hMail as shown below in figure 2.

Select a full or custom install of hmail (full recommended) as shown below in figure 3.

Select wether to use the MySQL server built into the hMail distribution, or use an external database. If this is a dedicated email server then it is recommended to use the built in database server as shown below in figure 4. However, if you already have MySQL installed (or are planning to) or would like to use Microsoft SQL server then select the external database server option.

Set the start menu program group for hMail as shown below in figure 5.

Confirm your settings as shown below in figure 6.

Click install and hMailServer will be installed as shown below in figure 7.

Once installation is complete, make sure the “Run hMailServer administrator” option is checked as shown below in figure 8 and click finish.

Configuring hMailServer

With the installtion of hMailServer successfully completed, the next step is configuration. The configuration steps below show you how to add a domain, add an account, create an alias, setting the server host name, configure RFC settings and configure SMTP relay options to prevent open relay. Start by clicking the Add domain button as shown below in figure 9.

Enter the domain name as shown below in figure 10, and then set the catch-all address. If a mail is sent to an address on your domain that does not have a POP account or alias, then it is redirected to the catch-all address. In this example we have set the catch-all address to postmaster@example.com. From here you can also set the global maximum mailbox size as well as the maximum message size for your domain. Once the domain is created you are also able to access several other tabs to set global settings, but they are not covered in this guide.

With the domain setup, it is now time to create accounts. To be RFC compliant all domains should accept email to a postmaster account, and as we have set postmaster to be the catch-all we will now set up an account for it. Place the name of the account in the Account address feild, and then enter a password as shown below in figure 11. You can also set individual mailbox and message size, as well as many other options not covered in this guide such as Active Directory intergration, auto-reply, forwarding, signature and fetching of email from external accounts.

Sometimes it is not practical or desirable to setup an account for every email address you want, and in this case it can be handy to uses an email alias that points to an existing account. In this example we will create an alias of abuse@example.com that points to the postmaster@example.com. Simply enter the alias you’d like to use (in this case abuse) in the Redirect from feild and enter the account and domain ( in this case postmaster and example.com repsectively) in the To feilds. Like the postmaster address, domains are also required to accept email to the abuse email address to be RFC compliant.

Now that we have a domain, account and alias setup lets look at selecting what email services we want to use. Using the navigation window in the left, select and expand the Settings item and then select the Protocols option. Make sure you have at least the SMTP and POP3 servers ticked, as otherwise you will not be able to send or recieve mail. You may not wish to use the IMAP server, but you will need it if you wish to provide webmail functionality to your users.

Next step is to set the server host name. In the navigation window on the left, expand the Protocols item and select SMTP. This can be very important as some email servers will not accept email or mark it as spam if the host name does not match the hostname specified in the MX record we set earlier. In the Host Name field enter the full host name you specified in your MX records. In this example we’ll use mail.example.com. Note: If you are looking to host your own email server over your home broadband connection, then you will want to enter the name of your ISP’s SMTP server in the Relayer field. If your ISP requires authentication, then you’ll also need to provide those details in the fields below.

With the host name set we will now set some extra RFC compliance settings. From the page you are on, simply click on the RFC Compliance tabe at the top. It is important that your email server be RFC compliant as otherwise it is likely that many domains will mark your email as spam, and that is if they accept it at all. One of the RFC requirements for email servers is that they accpet a null sender address. You can enable this ticking the Allow empty sender address option. It is also a good idea to enable the Allow incorrectly formatted line endings option as several popular email server packages out their vary slightly in the way they terminate email messages, and without this option set you email server may not be able to recieve emails from them

The final step in the basic configuration of your email server is to enure it is not an open relay. An open relay is when a server enables mails to be sent through it to other domains on behalf of domains that do not exist on the local server. Being an open relay is a very quick way in which to get yourself blacklisted, and it can be near impossible to get off these blacklists once you’re on it. Luckily hMailServer makes in very easy to prevent this, and in fact by default you should not have to change a thing. Just to be sure though it is always best to check the settings. In the navigation window to the left, select the select and expand the Advanced menu item from under the Settings tree. From here select the IP Ranges option and then select the Internet option. All you have to do here is ensure that the Local to local, Local to external, and External to local options are ticked from under the Allow deliveries from section. Finally also ensure that the To remote accounts option is ticked from under the Require authentication for deliveries section. All these options are shown below in figure 16.

Testing the configuration

Almost done now, the only thing left to do is test your email environment to make sure everything is configured correctly and ensure it is not an open relay. First stop is to plug your domain in at DNSReport.com which will give you a good overview of how well your email system is setup. If DNSReport finds any issues of concern it will notify you and offer advice on what needs to be fixed.

There are several tests available for free on the internet for testing your email server for open relay, and the ones I’d suggest using are the tests at abuse.net and aupads.org. Once you have passed these tests then you should be all clear to go ahead and start creating other account and finally sending and recieving email from your very own email server.

3How to Configure SpamAssassin for HMailserver in Windows

1. Download SAWin32 3.2.3.3, which is the latest windows build of SpamAssassin (As of September 8, 20009).
2. Download the latest SpamAssassin for Win32 command-line tools
3. Unzip both files into your computer with HMailServer installed under the path “c:\sa\”
4. Next we will have to create a new Windows Service called “SpamAssassin”. This will allow HMailServer to use SpamAssassin.
1. Install the Windows Server 2003 Resource Kit Tools. This will give you the necessary INSTSRV.EXE and SRVANY.EXE files to run SA as a service
2. Go to Start Menu -> Run -> cmd
3. Under the command line, enter in the following line (with quotes):
“C:\Program Files\Windows Resource Kits\Tools\INSTSRV.EXE” SpamAssassin “C:\Program Files\Windows Resource Kits\Tools\SRVANY.EXE”

4. Once installed, open up Regedit
5. Go to HKLM -> SYSTEM -> CurrentControlSet -> Services -> SpamAssassin
6. Add a new key called “Parameters”
7. Under Parameters, add a new String Value of Application, and set the value data to (without quotes):
“c:\sa\spamd.exe -l -s c:\sa\spamd.log –round-robin”

8. Then go to the services control panel and start up the spam assassin service.
9. If there are any issues, check the c:\sa\spamd.log file for more info
5. Then you might have to allow dccproc and spamassassin in your firewall
6. Adjust your hMailServer settings to allow the incoming e-mail check against SpamAssassin
7. And finally you might have to restart your hMailServer service for the new service to take effect.

Teamviewer + wampserver :

Instructions on how to disable TeamViewer from listening on Port 80. Instructions are as follows:

1. Open port 5938 (TCP) on your firewall.
2. Change the following registry keys.

* [HKEY_LOCAL_MACHINE\SOFTWARE\
TeamViewer\Version4] Key ’GatewayAllowed’ set to 0
*
[HKEY_LOCAL_MACHINE\SOFTWARE\TeamViewer\Version4] Key ’ListenHttp’ set to 0

After you make these changes, you should no longer have TeamViewer listening in on port 80, killing your local web server.

4FileZilla server

To install FileZilla server, please follow these steps:

1. Log into your server through Terminal Services or Remote Desktop Connection.
2. Open a Web browser and load http://sourceforge.net/project/showfiles.php?group_id=21558
3. Scroll to the bottom and download the latest install file under FileZilla Server, FileZilla_Server-0_9_23.exe.
4. Once the download completes, run the .exe file.
5. Read the License Agreement and choose “I Agree” to proceed.
6. Select the components you wish to install and click Next.

7. Select the Destination Folder and click Next. We recommend using the default settings.

8. Select how the services should be started and click Next. We recommend using the default settings.

9. Select how the server interface should be started and click Install. We recommend using the default settings.

10. Click Close to finish the installation.
11. Click OK to connect to the FileZilla server.

Once installation is complete, you may begin creating FTP users in FileZilla.

To create a Filezilla FTP user, please follow these steps:

1. From the Edit menu, select Users.

2. Click Add.

3. Enter the user name and click OK.

4. Under Account settings, check the password box and enter a password.

5. Click Shared folders in the left menu.
6. Under Shared Folders, click Add.

7. Navigate to the folder the user will have access to and click OK.
8. Check the permissions the user should have on this folder.

9. Click OK.

Google does not use the keywords meta tag in web ranking

Monday, September 21, 2009 at 10:00 AM

Recently we received some questions about how Google uses (or more accurately, doesn’t use) the “keywords” meta tag in ranking web search results. Suppose you have two website owners, Alice and Bob. Alice runs a company called AliceCo and Bob runs BobCo. One day while looking at Bob’s site, Alice notices that Bob has copied some of the words that she uses in her “keywords” meta tag. Even more interesting, Bob has added the words “AliceCo” to his “keywords” meta tag. Should Alice be concerned?

At least for Google’s web search results currently (September 2009), the answer is no. Google doesn’t use the “keywords” meta tag in our web search ranking. This video explains more, or see the questions below.

Q: Does Google ever use the “keywords” meta tag in its web search ranking?
A: In a word, no. Google does sell a Google Search Appliance, and that product has the ability to match meta tags, which could include the keywords meta tag. But that’s an enterprise search appliance that is completely separate from our main web search. Our web search (the well-known search at Google.com that hundreds of millions of people use each day) disregards keyword metatags completely. They simply don’t have any effect in our search ranking at present.

Q: Why doesn’t Google use the keywords meta tag?
A: About a decade ago, search engines judged pages only on the content of web pages, not any so-called “off-page” factors such as the links pointing to a web page. In those days, keyword meta tags quickly became an area where someone could stuff often-irrelevant keywords without typical visitors ever seeing those keywords. Because the keywords meta tag was so often abused, many years ago Google began disregarding the keywords meta tag.

Q: Does this mean that Google ignores all meta tags?
A: No, Google does support several other meta tags. This meta tags page documents more info on several meta tags that we do use. For example, we do sometimes use the “description” meta tag as the text for our search results snippets, as this screenshot shows:

Even though we sometimes use the description meta tag for the snippets we show, we still don’t use the description meta tag in our ranking.

Q: Does this mean that Google will always ignore the keywords meta tag?
A: It’s possible that Google could use this information in the future, but it’s unlikely. Google has ignored the keywords meta tag for years and currently we see no need to change that policy.

Source: http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html
Posted by Matt Cutts, Search Quality Team

WordPress Post Revisions

Howto delete Existing WordPress Post Revisions:

To delete and remove all existing post revisions entries and rows from WordPress database Posts table, simply login to MySQL command-line interface, phpMyAdmin, SQLyog or other MySQL GUI tools.
Select the appropriate WordPress database (if you have more than one databases on the same server), and then issue the following command (it’s also recommended to backup the database before performing the deletion SQL statements):

DELETE FROM wp_posts WHERE post_type = “revision”;

WordPress provides constant WP_POST_REVISIONS that can be used in wp-config.php configuration file or plugin to set the status state for post revisions feature.
To turn off and disable automatic post revisions all versions saving feature in WordPress 2.6 or later version, simply add the following line of code to wp-config.php file located in the root or home directory of WordPress blog.

define(’WP_POST_REVISIONS’, false);

Although you says you can do this :

define(‘WP_POST_REVISIONS’, false);

to disable revisions, you can also do this

define(‘WP_POST_REVISIONS’, 3);

to limit the number of revisions to 3 (plus the autosave).

Not only that, if you now save a post/page which has more than 3 it will delete
the old ones for you!

Once set, WordPress does not attempt to save or store any revisions, except the one AutoSave per post.

Magento Import Products

• Go to Magento Admin > Catalog > Manage Categories
• Add your Product categories here but do note your category ids, you can make a list of your category ids in a notepad file.
• There might be a possibility that you need to define extra attributes for your products so for that go to Catalog >Attributes >Manage Attributes and click Add new Attribute. You can also save your Attributes sets based on the attributes you have defined.
• Now go to Magento Admin > Catalog > Manage Products
• Add four to five products manually.
• Now go to Magento Admin > System > Import/Export > Profiles
• Click Export all products.
• In Data Transfer choose Local/Remote Server (If you choose remote ftp, then you will have to provide the ftp information)
• Any select Local Server (though its upto you) and click Save Profile.
• Now click export all products again and then click Run Profile on your left.
• This will save a csv file of your manually added products on to your local/remote folder
• Download that csv file on to your computer using any ftp client (filezilla).
• You will have a csv file having columns of all the product attributes such as store, websites, attribute_set, type, sku, category_ids, has_options, name,meta_title etc
• Populate these columns with your products and add the category ids that you had already saved in a notepad file in category_ids column to properly assign the products to their respective categories.
• When you are done, go again to Magento Admin > System > Import/Export > Profiles and click Import all products this time.
• Click Upload file, browse for that csv file and then click Save Profile. (Or you can upload the csv file via ftp client such as filezilla to var/import folder)
• Now again click Import all products, click Run Profile, Select the csv file that you have uploaded from the drop down and then click Run Profile in popup.
• Products will start importing into your Magento Store

Problems with the import/export feature ?

I got the import/export business working by:

1. Using the default Export All Products profile and making sure to set the file name ending to .XML not .XLS
2. Using Excel to edit the file.
3. Using the default Import All Products profile to import.

Twitter Background Guidelines

Composition
Width and height varies. Twitter’s design is centred, and shifts left and right across the background image, depending on the size of the user’s display and their web browser’s window size.

The background design should support a wide variety of window dimensions.
Broadly speaking, there are four types of Twitter background designs: extended profile, big image, fade to color, and tiled (repeating):

Extended Profile
Extended profile designs allow the user to expand upon their biographical information, display a self-portrait, along with other useful (but non-clickable) links (eg. their Facebook profile, email address, etc). Extended profiles are also usually based on big image, or fade to color designs (see below).
Big Image
Whether it is an impressive photograph or a just a really large design, a big image design is great for big impact. Unfortunately, they don’t work well at all window sizes. Savvy designers can also include extended profiles and/or fade to color in a big image design.
Fade to Color
Fade to color designs add some visual interest, without the risk of ending in a harsh edge on larger displays. To achieve this, the image is blended at the edges into a single colour, which is then specified as the background color.

Tiled (repeating)
Tiled background designs produce a pattern-like effect. The main advantages of tiled designs is they work at any window size and are fast to load. However, the inherent repetition can be a drawback.

Optimal Dimensions
1280px is a common width to optimize for. Check with your contest holder.
This allows for two 250px wide columns either side of the main content area.

Minimum Dimensions
Small displays may obscure graphics placed to the left of the main content.
Most modern displays have resolutions greater than 1024 × 768px.

Maximum Dimensions
Larger displays may obscure graphics placed to the right of the main content.
1920 × 1200px should account for most display resolutions.
No more than 2560 × 1600px for expansive photographic-based designs.
This supports 30-inch cinema display resolutions!

Branding
ontwerps suggests 191 × 36px as optimal dimensions for branding (eg. a logo). The width is what is important here—not so much the height.
Add approximately 12px of padding from the top to neatly align with the top of Twitter’s logo.
A little padding along the left edge (20px to 40px) is nice and easy on the eye.
If text is incorporated into the background image then small font sizes should be used with caution (due to pixellation).

File Size
Twitter restricts images to a file size of 800 KB, or less.
Aim for 100 KB, or less.

File Types
Twitter accepts: GIF, JPG, and PNG file formats.

Color Palette
In Twitter, you can customize Twitter profile colors, under Settings › Design. Using hex codes, you can change the color of the background, text, links, sidebar, and sidebar border.

Download PSD Template

color – pattern – textures

Photoshop Template 3

Gratis Photoshop template

Download Bekijk Demo

Web-Based Invoicing Tools

Web-Based Invoicing Tools for Web Designers

phpBMS Project

http://phpbms.org/

phpBMS is web-based, open source, Business Management Software (BMS). The phpBMS package is based on the LAMP stack.
phpBMS is designed for small and mid-size enterprises looking for an integrated system to manage their business. A system that is capable of managing daily operations, creating and printing orders, tracking clients and prospects, and fulfilling accounts receivable needs.
Key Features :

* Simple Sales Order Entry
* Recurring invoices
* PDF Billing Documents
* Client/Prospect Mass E-mailing
* Accounts Recievable

Demo: http://phpbms.org/trial/
Screenshots: http://phpbms.org/wiki/PhpbmsScreenshots

BambooInvoice

http://bambooinvoice.org/

BambooInvoice is free Open Source invoicing software intended for small businesses and independent contractors. Our number one priorities are: ease of use, user-interface, and beautiful code.
It is meant to be sexy, both on top of, and under the hood. Go ahead, kick the tires. View source shows semantic, structured, meaningful XHTML. We use AJAX to keep things peppy and javascript to keep things functional.
Features:

* Self-hosted
* Easy to learn and operate interface
* XHTML, WAI, CSS, AJAX
* English, French, German, Dutch, Romanian, Spanish, Portugese, Bulgarian, Swedish, Italian.
* Invoices / Quotes / Customers / etc.

Demo: http://www.bambooinvoice.org/login
Screenshots: none, use demo.

CitrusDB

http://www.citrusdb.org/

* An open source customer care and billing solution that can be used in many different service industries, including internet service, subscriptions, consulting, and telecommunications.
* CitrusDB is a web based customer care and billing software solution (CC&B) that uses PHP and a database backend (MySQL) to keep track of customer information, operational CRM, services, products, billing invoices and credit cards, and support information.

Features: http://www.citrusdb.org/about.html
Screenshots: http://www.citrusdb.org/screenshots.html

SimpleInvoices

http://www.simpleinvoices.org

Simple Invoices is a web based application. This means once you set it up you can then access and use Simple Invoices from any PC using a web browser, nothing to install on clients PCs.
Features:

* Quick and nice looking invoices without having to set up to much. Install the software, enter a biller, a customer and go nuts creating invoices!
* Export to PDF, Microsoft Word, Excel or plain text
* Multiple invoice types (Total Invoices, Itemised Invoices, Consulting Invoices)
* Invoice Templates (Select different layouts etc)
* Invoice preferences, enables you to define and customise all the wordings on the invoices.
* A number of reports and layouts available for analysis.
* A simple, community developed, free/open source, web-based invoicing system.

Demo: http://www.simpleinvoices.org/demo
Screenshots: http://www.simpleinvoices.org/tour#easy_invoice_creation

NolaPro

http://nolapro.com/index-5.html

The NolaPro suite is a flexible world-class system designed for any size business. This suite includes complete web-based accounting services and allied business functionality. The NolaPro license is free.
Vertical Overview: Accounting + Business Software
Licence Cost: $0 / Freeware

FEATURES:
Complete Accounting

* Receivables/Billing
* Payables/Vendor Info
* Payroll/Employee Data

Business Management

* Inventory Tracking
* Order Entry/Shipping
* Administrative Control

Ecommerce Features

* B2B Web Portal
* Point-of-Sale (POS)
* Editable Shopping Cart

NolaPro Demo : https://demo.nolapro.com/index.php
Download NolaPro Linux : http://nolapro.com/download/?server=2&os=l
Download NolaPro Windows: http://nolapro.com/download/?server=2&os=w

PhreeBooks Accounting

http://www.phreebooks.com

Was developed as an open source ERP (Enterprise Resource Planning) web-based application written for the small business community. The goal is to provide a multi-language web-based end-to-end enterprise management tool. Written in the widely availalbe PHP scripting language with the robust mysql database engine, PhreeBooks goal is to provide a no-cost solution for small business concerns. Unlike most commercially available accounting packages that use proprietary software or require MS Windows operating system, PhreeBooks is platform independent, browser independent and easily translated into many languages. Highlights:

* Separate Customer and Vendor Account Information
* Full Inventory Management and Tracking
* Complete Financial General Ledger Accountability
* Banking Support, Including Check Writing, and Bank Account Reconciliation
* Flexible Import and Export Capabilities
* XML Interface To E-commerce Shopping Carts (currently Zen-Cart)
* Robust Reporting and Form Capability
* Expandable Shipping Manager
* User Level Security
* Context Sensitive Popup Help System (using PhreeHelp)

Demo: http://www.phreebooks.com/?q=demo
Download: http://sourceforge.net/project/showfiles.php?group_id=201914

phpCoin

http://phpcoin.com/

* phpCOIN is used by over thirty-five thousand people worldwide*, including web-hosts, designers, lawyers, accountants, and a school band.
* phpCOIN requires a webserver (apache, MS IIS, etc.), a MySQL v3.x.x or higher database, and php v4.1 or higher.
* Most questions about features are answered on the support forums, and several of our users are contributing to the online manual.
* phpCOIN v1.4.x is a major overhaul of the phpCOIN v1.x series code-base for readability, speed enhancements, and visual and operational consistency, and our first effort to ensure php v6 compatibility. It is also intended to be the last release prior to the launch of the commercial phpCOIN v2. You can login to a demo site of the current version (v1.4.4) as an admin or a client to see how the system works.

Clarifications:

* Price: phpCOIN version 1.x is 100% free of cost to use ~ although donations to help cover the time and expenses of running this site are appreciated.
* When it is available, phpCOIN v2 will be free to use for up to ten active clients, but more then ten active clients will require a fee.

Free Support:

* Support via the support forums or the online manual is free, although you must sign-up to post. Most questions are already answered there, plus our users sometimes answer questions quicker than we can.

Demo: http://cpdemo.phpcoin.com/
Screenshots: none, use demo

Workingpoint

http://www.workingpoint.com/

Invoice Your Customers
Manage Bills and Expenses
Double-Entry Bookkeeping
Manage Your Contacts
Manage Your Inventory
Financial and Tax Reporting
Cash Management
Online Company Profile
Business Dashboard

Pricing:

http://www.workingpoint.com/pricing-and-signup/

Invoicera

http://www.invoicera.com/

Invoicera is an online billing software which is specifically designed keeping simplicity and online invoicing convenience in mind, while at the same time offering the best of the breed invoicing features.

Features:http://www.invoicera.com/features.html
Pricing : http://www.invoicera.com/pricing.html
Tour: http://www.invoicera.com/tour.html

ALTERNATIVES

- http://www.lessaccounting.com

- http://www.billingorchard.com

- http://www.getcashboard.com

- https://www.freshbooks.com

- http://www.blinksale.com/home

- http://www.billmyclients.com

- http://www.invoicesmadeeasy.com

- http://www.invoiceplace.com/invoice

- http://www.invotrak.com

- http://www.simplybill.com

- http://www.simplyinvoices.com

- https://www.time59.com

- http://veetro.com

- http://invoicemachine.com

- http://www.net2invoice.com

- http://www.wphire.com

- http://www.fanuriotimetracking.com

- http://www.paypal.com

- http://billingmanager.intuit.com

- http://www.paysimple.com

- http://www.worketc.com/

- http://www.billingorchard.com/

- http://www.invoice2go.com/

- http://www.getcashboard.com/

- http://www.bill4time.com/

- http://www.vertex42.com/ExcelTemplates/excel-invoice-template.html

- http://www.spreadsheetstore.com/p-53-invoice-creator-for-excel.aspx

Business Card Template 2

Free Illustrator Business Card Template

Download Files Demo

Business card 01

Gratis Photoshop Business Card Template

Download Bekijk Demo

Photoshop Polaroid Canvas Video

Photo Source : http://www.sxc.hu/photo/1078238

Steps in the video:

Step 1: Duplicate The Background Layer
Step 2: Add A New Blank Layer Between The Two Layers
Step 3: Fill The New Layer With Black
Step 4: Add A New Blank Layer
Step 5: Drag Out A Rectangular Selection As The Inside Of Your First Polaroid
Step 6: Fill The Selection With Black
Step 7: Create A Clipping Mask From The Filled Selection
Step 8: Add Another New Blank Layer Above “Layer 2″
Step 9: Drag Out Another Rectangular Selection As The Border Of The Polaroid
Step 10: Fill The Selection With White
Step 11: Add A Drop Shadow Layer Style
Step 12: Rotate The Polaroid
Step 13: Group All Three Layers Which Make Up The Polaroid
Step 14: Duplicate The Layer Group
Step 15: Move And Rotate The Second Polaroid With The Free Transform Command
Step 16: Add, Move And Rotate More Polaroids As Needed

Blend Modes

Hier een overzicht van de verschillende Blend Modes

Normal
Dit is een normale optie, hierbij schijnt niks door, er word niet gemixt met kleuren. Zwart is zwart en wit is wit.Dit is de standaard blend modus die gewoon neemt elke pixel van de bovenste laag, indien aanwezig. Anders wordt de onderste laag wordt gebruikt.

Dissolve
Met deze blend mode kan je alles oplossen om het zo maar te zeggen. Dit worden meestal veel stippeltjes.
De dissolve mode neemt willekeurige pixels van beide lagen. Met een hoge opaciteit worden de meeste pixels genomen uit de bovenste laag. Met een lage opaciteit worden de meeste pixels genomen uit de onderste laag. Er wordt geen anti-aliasing gebruikt in deze modus, de foto’s zien er korrelig en hard uit.

Darken
Hiermee wordt alles gemengd met de layers eronder. Bijvoorbeeld de layer die je op Darken wilt zetten bevat groen en de layer eronder bevat geel. Dan wordt het gele vlakje heel erg groen, omdat geel ook een felle kleur is. Als het vlakje eronder wit is, wordt het gewoon dezelfde kleur groen. DArken neemt de donkerste waarde voor elke pixel van elke laag.

Multiply
Met deze optie gebeurd ongeveer hetzelfde als bij Darken. Alleen worden de doffe kleuren (bruin, oranje, grijs etc.) donkerder afgebeeld.
multiply vermenigvuldigt de getallen voor elke pixel van de bovenste laag met de overeenkomstige pixel voor de onderste laag. Als een simpele vermenigvuldiging kunt waarden zo hoog zijn als 65025, dit is veel hoger dan de maximaal toegestane waarde van 255, het resultaat wordt gedeeld door 255.
Het resultaat is een donkerder beeld.
Formule: Uitslag Color = (Top Color) * (Bottom Color) / 255
Als de twee lagen bevat dezelfde foto, multiply blend modus is gelijk aan een exponentiële curve.
Als een laag een homogene kleur bevat, bijvoorbeeld de grijze kleur (200, 200, 200), multiply modus is dan gelijk aan een bocht dat gewoon een rechte lijn is.
Voor beeldbewerking is het soms handiger om gewoon naar het curves dialoogvenster te gaan dat geeft meer flexibiliteit.

Color Burn
Bij deze worden de kleuren wat feller, ze worden als het ware ‘verbrand’. De doffe kleuren worden zwart of ze nemen dezelfde kleur aan als de layer eronder.
De bovenste laag wordt donkerder door verhogen van het contrast rekening houdend met de kleur van de onderste laag. Hoe donkerder de onderste laag, hoe meer de kleur wordt gebruikt. Menging met wit maakt geen verschil. Dit is vergelijkbaar met het veranderen van de zwarte punt.

Linear Burn
Hetzelfde als Color Burn, alleen wordt de layer zelf ook een beetje doorzichtig. Bij Color Burn is dit onzichtbaar.
Hiermee wordt de bovenste laag donkerder door verlagen van de helderheid (niet het contrast) rekening houdend met de kleur van de onderste laag. Hoe donkerder de onderste laag, hoe meer de kleur wordt gebruikt. Menging met witte maakt geen verschil. Dit is vergelijkbaar met het veranderen van de zwarte punt.

Lighten
Het woord zegt het al, de layer wordt verlicht. Het wordt een doffe, doorzichtige layer. Net zoals bij Color en Linear Burn worden de andere doffe kleuren zwart of ze nemen dezelfde kleur van de onderliggende layer aan.Lighten neemt de lichtste pixels van de laag.

Screen
Dit geeft hetzelfde effect als Lighten, maar de onderliggende layer behoud zijn kleuren.
In de Screen blend modus worden de waarden van de pixels in de twee lagen omgekeerd, vermenigvuldigd en vervolgens opnieuw omgekeerd. Dit is in zekere zin het tegenovergestelde van vermenigvuldigen.
Het resultaat is een helderder beeld.
Formule: Uitslag Color = 255 – [((255 - Top Color) * (255 - Bottom Color)) / 255]
Net als voor de multiply blend modus, gebruik maken van het curves dialoogvenster is soms gemakkelijker, omdat het de flexibiliteit en controle voor de gebruiker verhoogt.

Color Dodge
Bij deze optie worden de kleuren die de onderliggende layer hebben versterkt. De doffe kleuren worden felle kleuren, maar felle kleuren blijven ook fel.
Dit vermindert het contrast om de onderste laag met de bovenste laag te reflecteren: hoe lighter de bovenste laag, hoe meer de kleur van invloed is op de onderste laag. Menging met wit geeft wit. Menging met zwarte verandert het beeld niet. Dit effect is vergelijkbaar met het veranderen van de witte punt.

Linear Dodge
Dit geeft hetzelfde effect als Color Dodge, maar ook bij Linear Burn word de layer een beetje doorzichtig. Bij Color Dodge is dit onzichtbaar.
Dit verhoogt de helderheid (maar niet wijzigt niet het contrast) om de onderste laag met de bovenste laag te laten reflecteren: hoe lighter de bovenste laag, hoe meer de kleur van invloed is op de onderste laag. Menging met wit geeft wit.

Overlay
Hierbij worden de kleuren bij de onderliggende layer wat versterkt. Het geeft een hoger contrast. Dit ligt er wel aan hoe de layer die op Overlay wordt gezet en hoe de onderliggende layer eruitziet. De doffe kleuren worden wat feller.
Overlay combineert Multiply en Screen blend-modes. Lichte delen van het beeld worden lichter en donkere gedeelten worden donkerder. Een overlay met dezelfde foto ziet er uit als een S-curve.

Soft Light
Deze optie stelt niet veel voor. De layer wordt doorzichtig, dit kan je ook doen met de Opacity.
Dit is een zachtere versie van overlay. Toepassing van puur zwart of wit leidt niet tot puur zwart of wit.

Hard Light
Dit is soms een leuke blend mode. Als je de juiste kleuren hebt uitgezocht kan dit een mooi effect geven. Namelijk, dit geeft een ontzettend hoog contrast aan de onderliggende layer als je voor de layer waarop je Hard Light zet, de juiste kleuren gebruikt (dat ligt eraan wat voor kleuren de layer eronder hebben). Maar als je doffe donkere kleuren gebruikt, geeft dit juist géén hoog contrast maar een lage brightness.
Hard Light combineert Multiply en Screen blend-modes. In tegenstelling tot overlay neemt het contrast is ook toe.

Vivid Light
Met deze optie wordt alles een beetje fel verlicht. Op lichte doffe kleuren (grijs, bruin etc.) krijg je de kleur die je ook op de layer hebt zitten waar je deze optie op zet.

Linear Light
Als je bv. de layer groen maakt en op deze optie, Linear Light, zet, dan wordt de onderliggende voor de helft die kleur. De kleuren die fel zijn (alle lichte kleuren; licht blauw, licht rood etc.) worden dan ook groen.

Pin Light
Ongeveer hetzelfde als Linear Light, alleen behoudt de onderliggende layer zijn doffe kleuren.

Hard Mix
Dit is de ultieme contrast blend mode. Dit geeft een ongelofelijk hoog contrast aan de onderliggende layer.
Deze blend modus combineert Color Dodge en Color Burn. Dodge is alleen van toepassing op waarden van meer dan 128, Dodge en Burn tot waarden van minder dan 128.

Difference
Moeilijk om uit te leggen, maar als je de layer donkergroen maakt en de layer eronder heeft bijna alle kleuren, dan krijgt de onderliggende layer erg doffe donkere kleuren.

Exclusion
De Exclusion blending modus werkt zoals de Difference modes alleen het contrast is lager. Als wit de mix kleur is, wordt basis image omgekeerd. Als zwart de mix kleur is, is er geen verandering.
Net als de Difference blending mode, Exclusion wordt meestal gebruikt voor beeld aanpassing en speciale effecten.

Hue
Leuke blend mode. Als je een layer maakt die groen is en de layer eronder heeft allerlei kleuren, dan veranderen die kleuren naar groen, maar ze blijven wel op hetzelfde contrast. Dof blijft dof, maar wordt wel groen. Fel blijft fel, maar wordt groen.
Hue neemt de tint/hue van de bovenste laag, maar neemt de helderheid/brightness en de verzadiging/saturation van de onderste laag.

Saturation
verzadiging/saturation van de bovenste laag, maar de helderheid/brightness en kleur/hue van de onderste laag.

Color
Geeft hetzelfde effect als bij Hue. Als je de layer groen maakt en je zet hem op deze blend mode, dan word de onderliggende layer helemaal groen en het behoud dezelfde kleuren, fel blijft fel en dof blijft dof. Maar de onderliggende layer wordt over het geheel een beetje doffer.
Color neemt helderheid/brightness van de onderste laag, maar tint/hue en verzadiging/saturation van de bovenste laag.

Lumonisity
neemt zijn helderheid van de bovenste laag, maar de tint en verzadiging van de onderste laag. Het kan worden gebruikt om kleur halos te elimineren door verscherping.
Luminosity neemt zijn helderheid/brightness van de bovenste laag, maar de tint/hue en verzadiging/saturation van de onderste laag. Het kan gebruikt worden om kleur halos die veroorzaakt worden door verscherping te verwijderen.

Voorbeelden tonen het resultaat van deel van het gezicht te beschilderen met behulp van elke blending mode.

Normal
Edits or paints each pixel to make it the result color. This is the default mode. (Normal mode is called Threshold when you’re working with a bitmapped or indexed-color image.)

Dissolve
Edits or paints each pixel to make it the result color. However, the result color is a random replacement of the pixels with the base color or the blend color, depending on the opacity at any pixel location.

Behind
Edits or paints only on the transparent part of a layer. This mode works only in layers with Lock Transparency deselected and is analogous to painting on the back of transparent areas on a sheet of acetate.

Clear
Edits or paints each pixel and makes it transparent. This mode is available for the Shape tools (when fill region is selected), Paint Bucket tool , Brush tool , Pencil tool , Fill command, and Stroke command. You must be in a layer with Lock Transparency deselected to use this mode.

Darken
Looks at the color information in each channel and selects the base or blend color—whichever is darker—as the result color. Pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change.

Multiply
Looks at the color information in each channel and multiplies the base color by the blend color. The result color is always a darker color. Multiplying any color with black produces black. Multiplying any color with white leaves the color unchanged. When you’re painting with a color other than black or white, successive strokes with a painting tool produce progressively darker colors. The effect is similar to drawing on the image with multiple marking pens.

Color Burn
Looks at the color information in each channel and darkens the base color to reflect the blend color by increasing the contrast between the two. Blending with white produces no change.

Linear Burn
Looks at the color information in each channel and darkens the base color to reflect the blend color by decreasing the brightness. Blending with white produces no change.

Lighten
Looks at the color information in each channel and selects the base or blend color—whichever is lighter—as the result color. Pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change.

Screen
Looks at each channel’s color information and multiplies the inverse of the blend and base colors. The result color is always a lighter color. Screening with black leaves the color unchanged. Screening with white produces white. The effect is similar to projecting multiple photographic slides on top of each other.

Color Dodge
Looks at the color information in each channel and brightens the base color to reflect the blend color by decreasing contrast between the two. Blending with black produces no change.

Linear Dodge (Add)
Looks at the color information in each channel and brightens the base color to reflect the blend color by increasing the brightness. Blending with black produces no change.

Overlay
Multiplies or screens the colors, depending on the base color. Patterns or colors overlay the existing pixels while preserving the highlights and shadows of the base color. The base color is not replaced, but mixed with the blend color to reflect the lightness or darkness of the original color.

Soft Light
Darkens or lightens the colors, depending on the blend color. The effect is similar to shining a diffused spotlight on the image. If the blend color (light source) is lighter than 50% gray, the image is lightened as if it were dodged. If the blend color is darker than 50% gray, the image is darkened as if it were burned in. Painting with pure black or white produces a distinctly darker or lighter area, but does not result in pure black or white.

Hard Light
Multiplies or screens the colors, depending on the blend color. The effect is similar to shining a harsh spotlight on the image. If the blend color (light source) is lighter than 50% gray, the image is lightened, as if it were screened. This is useful for adding highlights to an image. If the blend color is darker than 50% gray, the image is darkened, as if it were multiplied. This is useful for adding shadows to an image. Painting with pure black or white results in pure black or white.

Vivid Light
Burns or dodges the colors by increasing or decreasing the contrast, depending on the blend color. If the blend color (light source) is lighter than 50% gray, the image is lightened by decreasing the contrast. If the blend color is darker than 50% gray, the image is darkened by increasing the contrast.

Linear Light
Burns or dodges the colors by decreasing or increasing the brightness, depending on the blend color. If the blend color (light source) is lighter than 50% gray, the image is lightened by increasing the brightness. If the blend color is darker than 50% gray, the image is darkened by decreasing the brightness.

Pin Light
Replaces the colors, depending on the blend color. If the blend color (light source) is lighter than 50% gray, pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change. If the blend color is darker than 50% gray, pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change. This is useful for adding special effects to an image.

Hard Mix
Adds the red, green and blue channel values of the blend color to the RGB values of the base color. If the resulting sum for a channel is 255 or greater, it receives a value of 255; if less than 255, a value of 0. Therefore, all blended pixels have red, green, and blue channel values of either 0 or 255. This changes all pixels to primary additive colors (red, green, or blue), white, or black.
Note: For CMYK images, Hard Mix changes all pixels to the primary subtractive colors (cyan, yellow, or magenta), white, or black. The maximum color value is 100.

Difference
Looks at the color information in each channel and subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. Blending with white inverts the base color values; blending with black produces no change.

Exclusion
Creates an effect similar to but lower in contrast than the Difference mode. Blending with white inverts the base color values. Blending with black produces no change.

Hue
Creates a result color with the luminance and saturation of the base color and the hue of the blend color.

Saturation
Creates a result color with the luminance and hue of the base color and the saturation of the blend color. Painting with this mode in an area with no (0) saturation (gray) causes no change.

Color
Creates a result color with the luminance of the base color and the hue and saturation of the blend color. This preserves the gray levels in the image and is useful for coloring monochrome images and for tinting color images.

Luminosity
Creates a result color with the hue and saturation of the base color and the luminance of the blend color. This mode creates the inverse effect of Color mode.

Lighter Color
Compares the total of all channel values for the blend and base color and displays the higher value color. Lighter Color does not produce a third color, which can result from the Lighten blend, because it chooses the highest channel values from both the base and blend color to create the result color.

Darker Color
Compares the total of all channel values for the blend and base color and displays the lower value color. Darker Color does not produce a third color, which can result from the Darken blend, because it chooses the lowest channel values from both the base and the blend color to create the result color.

Note: Only the Normal, Dissolve, Darken, Multiply, Lighten, Linear Dodge (Add), Difference, Hue, Saturation, Color, Luminosity, Lighter Color, and Darker Color blending modes are available for 32-bit images.

Video: www.adobe.com/go/vid0012

Photoshop Email Template 2

Gratis Photoshop Email Template wat ik een keer gemaakt heb voor een contest.

Download Bekijk Demo

Photoshop Template 01

Gratis Photoshop template

Download Bekijk Demo

Magento Admin menu werkt niet meer

Zojuist een upgrade gedaan van een magento installatie naar een nieuwe versie via Magento Connect

Na de upgrade bleek de admin menu niet meer te werken in de backend.
De oplossing bij mij was het Head.php bestandje te vervangen.
Bestand staat in app/code/core/Mage/Page/Block/Html/

Download hier het  Head.php bestand voor de oplossing : Head.php

CSS Menu

Deze tutorial zal ik laten zien hoe je een css menu maakt..
We maken (un-typical) list menu met behulp van de position waarde.

Hier is een overzicht van het menu (je kunt het downloaden als rar bestand).

Achtergrond:

Open de Photoshop-bestand. Schakel alle layers uit behalve de achtergrond en logo en sla de achtergrond op als menu-bg.jpg.

Buttons:

Zet de achtergrond en logo layer uit en laat alleen de menu teksten zichtbaar.
Maak een rechthoekige selectie van de “home” knop, ga naar menu Edit > Copy Merged.

Maak een nieuw bestand en kijk naar de bestands dimensie (bxh), in mijn geval is “home” 82 x 40px.
Verdubbel de hoogte van het nieuwe bestand dus 82 x 80px.
Plak nu de afbeelding en plaats deze aan de onderkant. Dupliceer nu de laag en plaats dit aan de bovenkant.
Wis nu de omlijsting van de bovenste laag.

Herhaal deze stap voor de andere knoppen.

HTML code

We beginnen met het maken van een un-ordered list

• wijzen we een id=”menu” toen
  een unieke class naam wordt aan elke link toegewezen
  een lege tag (dit is om de Mouseover effect)

  <ul id="menu">
  	<li><a href="#" class="home">Home<span></span></a></li>
  	<li><a href="#" class="over">About<span></span></a></li>
  	<li><a href="#" class="diensten">Diensten<span></span></a></li>
  	<li><a href="#" class="rss">RSS<span></span></a></li>
  	<li><a href="#" class="mail">E-mail<span></span></a></li>
  </ul>
  

  #menu

  Reset het menu met no padding, no margin en no list-style.
  Geef de breedte en hoogte aan van de menu-bg.jpg. Voeg dan de menu background image toe.
  Belangrijkste is om de position op relative te zetten.

  #menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 800px;
  height: 180px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
  }
  

  #menu span
  Geef het span element de waarde display:none (zodat het default niet wordt weergegeven).
  Zet position:absolute, zodat we het mouseover GIF bestand op een exacte positie kunne zetten.

  #menu span {
  display: none;
  position: absolute;
  }
  

  #menu a
  Het belangrijkste punt hier is de text-indent waarde.
  We geven aan de text-indent een negatieve waarde (-900%), zodat de tekst wordt verborgen.

  #menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
  }
  

  #menu a:hover

  Wanneer de cursor over de link gaat, willen we een verschuiving van de achtergrond afbeelding van boven naar beneden.

  #menu a:hover {
  background-position: left bottom;
  }
  

  #menu a:hover span
  Wanneer de cursor over de link gaat, willen we span element een waarde geven van display:block.

  #menu a:hover span{
  display: block;
  }
  

  #menu .home

  Geef de breedte, hoogte, van de home achtergrond afbeelding.
  Aangezien we al aangegeven hebben in een vorige stap dat element postition: absolute is, hoeven we nu alleen maar aan te geven waar de home image moet komen.
  Hiervoor moeten we de left and top waarde specifeceren van de Home knop.

  
  #menu .home {
  	width: 82px;
  	height: 40px;
  	background: url(images/home.png) no-repeat;
  	left: 250px;
  	top: 63px;
  }
   

  #menu .home span
  Geef de breedte, hoogte, background , en positie van het span element van .home (mouseover GIF image)

  
  #menu .home span {
  	width: 66px;
  	height: 8px;
  	background: url(images/huis.png) no-repeat;
  	left: 28px;
  	top: -20px;
  }
   

  Doe dit zelfde nu voor alle anderen buttons/knoppen.

  Totale css
  (heb voor email en rss button geen mouse over gebruikt in het voorbeeld)

  
  #menu {
  	list-style: none;
  	padding: 0;
  	margin: 0;
  	width: 800px;
  	height: 180px;
  	background: url(images/menu-bg.jpg) no-repeat;
  	position: relative;
  }
  #menu span {
  	display: none;
  	position: absolute;
  }
  #menu a {
  	display: block;
  	text-indent: -900%;
  	position: absolute;
  	outline: none;
  }
  #menu a:hover {
  	background-position: left bottom;
  }
  #menu a:hover span{
  	display: block;
  }
  #menu .home {
  	width: 82px;
  	height: 40px;
  	background: url(images/home.png) no-repeat;
  	left: 250px;
  	top: 63px;
  }
  #menu .home span {
  	width: 66px;
  	height: 8px;
  	background: url(images/huis.png) no-repeat;
  	left: 28px;
  	top: -20px;
  }
  #menu .over {
  	width: 82px;
  	height: 40px;
  	background: url(images/over.png) no-repeat;
  	left: 350px;
  	top: 57px;
  }
  #menu .over span {
  	width: 32px;
  	height: 14px;
  	background: url(images/wie.png) no-repeat;
  	left: 44px;
  	top: -24px;
  }
  #menu .diensten {
  	width: 121px;
  	height: 41px;
  	background: url(images/diensten.png) no-repeat;
  	left: 450px;
  	top: 34px;
  }
  #menu .diensten span {
  	width: 40px;
  	height: 14px;
  	background: url(images/wat.png) no-repeat;
  	left: 26px;
  	top: -30px;
  }
  #menu .rss {
  	width: 26px;
  	height: 25px;
  	background: url(images/rss.png) no-repeat;
  	left: 650px;
  	top: 20px;
  }
  #menu .mail {
  	width: 27px;
  	height: 19px;
  	background: url(images/mail.png) no-repeat;
  	left: 650px;
  	top: 60px;
  }
  

Download Bekijk Demo

Maak een favicon in Photoshop

Favicon Photoshop plugin

Om een favicon te kunnen maken, rechtstreeks in Photoshop heb je een plugin nodig.
Na installatie van deze plugin is het mogelijk om een bestandje op te slaan in het .ico formaat.
Download eerst de plugin (http://www.telegraphics.com.au/sw)

Nadat je de plugin hebt gedownload en uitgepakt moet het bestand ICOFormat.8bi worden gekopieerd naar de plugis directory van Photoshop (in de map extensies).
Bijv.

C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats

Photoshop herstarten en je kunt aan de slag.

Hoe maak je een Favicon in Photoshop?

Om een mooie favicon te maken met de afmeting 16x16px is wat lastig daarom is het beter een nieuw bestand te maken van 64×64.
Ontwerp nu je favicon door je bijv. je logo te plaatsen of maakt iets creatiefs.

Wanneer je klaar bent met het ontwerp selecteer Image> Image size en voer in 16 x 16px. Klik op onderste dropdown menu en kies voor “Bicubic Sharper” .
Dit is de beste instelling om ervoor te zorgen dat een afbeelding niet zal vervagen als hij wordt aangepast.
Als het nog niet scherp genoeg is, ga terug en oversharpen, oversaturate en/of heighten the contrast  van het bestand en vervolgens resize je het formaat weer.

Het opslaan
Ga naar File> Save As en zorg ervoor dat je de naam van het bestand favicon.ico noemt. Onder Formaat moet je Windows Icon (ICO) kiezen in het vervolgkeuzemenu.
Dit formaat is alleen beschikbaar in Photoshop nadat je het downloaden en installeren van de plugin.

Het uploaden van het bestand favicon.ico
Verbinding te maken met je server en upload je favicon.ico bestand naar je website.

Sommige browsers kijken naar een directe link in de HTML-broncode van de site naar het favicon.ico bestand.
Je kan nu in het head-gedeelte van elke pagina waarop je wilt dat de favicon.ico moet verschijnen de volgende code plaatsen.
Code:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Nadat je deze code hebt toegevoegd, moet je de gewijzigde pagina’s uploaden.

Als je gebruik wilt maken van een GIF-of PNG-bestand, gebruik dan deze code (zal werken in IE):

<link rel="icon" href="/favicon.png" type="image/png">

of

<link rel="icon" href="/favicon.gif" type="image/gif">

Testen
Als jenieuwe Favicon niet meteen ziet probeer dan de pagina te verversen of wis het cachegeheugen – of type een “?” aan het eind van de url,
dit is een foefje om de browser te laten denken dat de pagina nieuw is en niet is gecached.

HTML Email Template

Niks speciaal, maar een echt solide simpele basis voor een HTML-e-sjabloon dat zal werken en er goed uitziet in alle e-mailclients.
Tabellen en inline styling, de manier waarop e-mail clients van houden!

Download   Bekijk Demo

Centereer een logo precies in het centrum

Voor het maken van een site gebruik ik regelmatig een tijdelijke pagina todat de uiteindelijke site klaar is. In deze tijdelijke pagina wil ik dan een logo plaatsen dat precies gecentreerd wordt in het midden van het scherm, dat is, zowel verticaal en horizontaal gecentreerd.

Eerste poging was om het logo element een class “gecentreerd”  te geven en vervolgens class te definiëren als:

.centered {
position: fixed;
top: 50%;
left: 50%;
}

Maar werkt niet helemaal. De linkerbovenhoek van de afbeelding komt nu precies in het midden van de pagina, niet in het midden van de afbeelding in het midden van de pagina.

Om het logo precies gecentreerd te krijgen  is het een kwestie van toevoegen van een negatieve marge voor  boven van de helft van de hoogte van het logo, en een negatieve linkermarge van de helft van de breedte van het logo  . Voor dit voorbeeld:

 .centered {
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -50px;
 margin-left: -100px;
}

WordPress Onderhoudsmodus Zonder Plugin

WordPress heeft zijn eigen onderhoud modus functionaliteit sinds kern upgrades werden toegevoegd.

Begin met het maken van een bestand in de root van je WordPress installeren (op niveau met wp-settings.php) genaamd, .maintenance.
Let op het voorgaande punt, zoals een .htaccess-bestand; in Linux wordt dit beschouwd als een verborgen bestand. In dit bestand voeg je de volgende code toe:

<?php $upgrading = time(); ?>

Deze code zorgt ervoor dan de onderhoudspagina wordt weergegeven totdat het  .maintenance bestand wordt verwijderd.
In wp-settings.php zijn 2 controles om te zien of de onderhoud pagina moet worden weergegeven.
Ten eerste zorg ervoor dat het .maintenance bestand bestaat.
Ten tweede het controleert de huidige tijd minus de tijd die aangegeven door de variabele $ upgraden minder dan 10 minuten.
Met behulp van de bovenstaande code is het altijd minder dan 10 minuten omdat time () – time () == 0.
Als u de onderhoudspagina wilt weergeven voor een bepaalde periode kan men volgende code gebruiken:

<?php $upgrading = 1234567890; ?>

Voor de periode zelf aan te geven moet je  1234567890 vervangen met de Unix geformatteerd tijdstempel van de tijd min 10 minuten.

Bijvoorbeeld de onderhouds pagina moet stoppen met de weergave op 14 november 2013 20:13:00
Ik zou echt de variabele $ upgraden naar 14 november 2013 20:03:00. Let op de 03 in plaats van 13. In Unix tijd zou dit eruit als 1384459380.
En de code die nodig is voor het .maintenance bestand zou zijn:

<?php $upgrading = 1384459380; ?>

Als je een specifieke datum/tijd gebruikt in de .maintenance en je verwijderd het bestand niet worden gebruikers die de site bekijken niet beïnvloed , maar in de admin van wordpress zie je een bericht waarin staat:
“An automated WordPress update has failed to complete – please attempt the update again now.”
Verwijderen van het  .maintenance bestand verwijdert deze aankondiging.

HTML Color

HTML Color table

Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS use the HEX values instead.

CMS Systemen

WordPress

WordPress interface.Wordpress is in feite gestart als een Blog Management System. Toen het bloggen in opkomst was, kwam er steeds meer vraag naar een gemakkelijk systeem dat in enkele minuten op te zetten is. De interface van WordPress en het gemak waarmee dit systeem gebruikt kan worden sloeg in als een bom.

De populariteit is nog steeds stijgende sinds de start in 2003. Het systeem wordt tegenwoordig niet alleen voor blogs, maar ook voor andere websites gebruikt. De open structuur en de mogelijkheid om gemakkelijk plugins te installeren zorgen er voor dat er veel extra functionaliteit toegevoegd kan worden.

Veel grote bedrijven die een corporate blog opzetten twijfelen geen moment en gebruiken WordPress. Een korte speurtocht levert al snel deze grote namen op:

* Playstation – http://blog.us.playstation.com
* Yahoo – http://ycorpblog.com
* General Motors – http://blog.gmnext.com
* SouthWest Airlnes – http://www.blogsouthwest.com
* Flickr – http://blog.flickr.net/en
* CNN politics – http://politicalticker.blogs.cnn.com
* Rolling Stone – http://www.rollingstone.com/rockdaily

De websites die gemaakt kunnen worden met WordPress zijn betrekkelijk simpel van aard. Deze bestaan voornamelijk uit een homepage met aan de rechterkant een lijst met artikelen en een simpel menu. Ook is de ontwikkelingscurve betrekkelijk laag. WordPress heeft geen toeters en bellen die het CMS onoverzichtelijk maken. Dit is meteen ook de beperking van het systeem. WordPress is minder geschikt voor een corporate website met functionaliteiten als verschillende soorten content, het aanbieden van downloads of het beheren van formulieren. In dit geval bent u met Drupal of Joomla beter af.

* Te gebruiken voor: Blog websites of kleine sub-sites.
* Ontwikkelingstijd: Zeer kort.
* Gebruiksgemak: Zeer gemakkelijk. De beperkte functionaliteit zorgt voor overzicht.

Drupal

Drupal interface.Drupal is in Nederland nog niet doorgedrongen tot de massa, maar in Amerika, Engeland en Belgie” wel. Het systeem kenmerkt zich vooral door de vele mogelijkheden die standaard direct in het systeem aanwezig zijn. Een reden hiervoor is dat Drupal later gestart is dan Joomla en goed heeft kunnen kijken naar functionaliteiten die Joomla miste. Zo bezit Drupal de mogelijkheid om meerdere websites te genereren vanuit e’e'n CMS, ook wel Multi-CMS genoemd. Tevens heeft het systeem versiebeheer voor content. U kunt dus terug in de tijd om te kijken wat voor aanpassingen er zijn gedaan in het artikel. Het is dan ook mogelijk om eerdere versies van het artikel terug te zetten. Het grootste voordeel van Drupal zit in het rechten systeem voor gebruikers. U kunt labels hangen aan content en gebruikersgroepen aanmaken. Deze kunt u linken aan de labels, waarna u kunt aangeven wat deze groep met deze content wel en niet mag doen.

Klinkt fantastisch. Maar waarom is dan niet elke website gebaseerd op Drupal? Omdat elk voordeel zijn nadeel heeft. In dit geval biedt al deze functionaliteit u de nodige kopzorgen. Omdat u zoveel moet definie”ren kost het opzetten van een Drupal website veel tijd. Daarnaast is de interface even wennen voor beginners.

Drupal is ideaal voor een grote community website, een grootschalig intranet of een online magazine waarbij verschillende redactieleden tegelijkertijd aan de website werken.

Dit zijn een aantal grotere Drupal websites:

* Nike – http://nikemedia.com/beijing/en/athletes
* Fedex – http://news.fedex.com
* Pink – http://www.pinkspage.com
* Novell – http://www.novell.com/communities
* Amnesty International – http://www.amnesty.org

* Te gebruiken voor: Community websites of voor websites waar veel gebruikers met diverse rechten veel interactie hebben met de website.
* Ontwikkelingstijd: Zeer lang.
* Gebruiksgemak: Redelijk. De vele mogelijkheden zorgen voor een steile leercurve, eenmaal gewend aan de interface werkt het zeer prettig.

Joomla

Joomla interface.Eerst begonnen als Mambo in 2000 en later omgedoopt tot Joomla. Dit CMS loopt al een tijd mee en de nieuwste versie 1.5 zorgt voor nog meer mogelijkheden in de toekomst.

Er zijn een aantal zaken die erg goed zijn aan Joomla en deze hebben er dan ook mede voor gezorgd dat het het meest gebruikte CMS ter wereld is. Ten eerste oogt de interface zeer vriendelijk. Dit geeft de gebruiker de moed om door te klikken en het systeem te leren kennen. Een van de redenen waarom er zo weinig handleidingen te vinden zijn voor Joomla is omdat deze nagenoeg niet nodig zijn.

Naast dat Joomla prettig is voor gebruikers, is dat het ook voor ontwikkelaars. Joomla is een van de eerste systemen die ervoor zorgt dat het maken van grafische technische veranderingen aan het systeem gemakkelijk kan. Ook zorgt het ervoor dat praktisch iedere programmeur uitbreidingen voor het systeem kan programmeren.

Joomla heeft nog een ander groot voordeel. Het is inzetbaar voor kleine en grote websites. Een klein bedrijf kan relatief snel een Joomla website opzetten, hier een gratis tempate aan koppelen en de website vullen met content. Tegen de tijd dat het bedrijf groter wordt en de website meer onderdeel wordt van de marketing, kan er een op maat gemaakte template worden ontworpen of een koppeling worden gemaakt tussen het CRM van het bedrijf en de website.

Dit zijn een aantal grotere Joomla websites:

* Mitsubishi – http://www.mitsubishi.com.pl
* Al Gore – http://www.algore.org
* NS Hispeed – http://www.nshispeed.nl
* Vodafone – http://vodafone.is
* Porsche – http://www.porsche.com.br

* Te gebruiken voor: Corporatesites, portalsites en nieuws websites.
* Ontwikkelingstijd: Gemiddeld, afhankelijk van de functionaliteit en of er maatwerk verricht wordt.
* Gebruiksgemak: Gemakkelijk. Dit komt voornamelijk door de overzichtelijke interface.