raphael haefeli | portland, oregon freelance web design and development

New project added to Portfolio

Raphael — Wed, 11 Aug 2010 22:56:30 +0000

My newest project, Little Isabella has gone live. The site features a blog and photo galleries for family and friends. Site is for members only and can be previewed at my Portfolio page or visited at www.little-isabella.com

How to Create a Elastic Thumbnail Menu with CSS and jQuery

Raphael — Tue, 20 Apr 2010 06:35:09 +0000

I was going around the web looking for some interesting tutorials and found this one I would like to share. This is an elastic thumbnail menu which combines HTML, CSS and jQuery to create a cool zoom effect and expand upwards when an image is hovered over.

The HTML Code (plain and simple):

The CSS Code:

This menu will be a bit different from conventional menus and the when the user hovers over the thumbnail, the image will expand to the right and upwards.

The main piece to acheive this effect is position:fixed;, which keeps the thumbnails aligned to the bottom.

#menuwrapper{ position:relative; height:210px; }

#menu{position:absolute; bottom:0;}

.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

img { -ms-interpolation-mode: bicubic; }

Note that for this effect to work in Internet Explorer, we need to add img { -ms-interpolation-mode: bicubic; } to our CSS file.

The jQuery Code:

$(document).ready(function(){
	$('.menuitem img').animate({width: 100}, 0);
    //Set all menu items to smaller size

	$('.menuitem').mouseover(function(){ //When mouse over menu item

		gridimage = $(this).find('img'); //Define target as a variable
		gridimage.stop().animate({width: 200}, 150);
    	//Animate image expanding to original size

	}).mouseout(function(){
    //When mouse no longer over menu item

		gridimage.stop().animate({width: 100}, 150);
        //Animate image back to smaller size

	});
});

See the demo here

Source: build internet

How to Display the Most Popular Content in Your WordPress Sidebar

Raphael — Sun, 31 Jan 2010 06:01:34 +0000

What is best way to keep your visitors entertained and make them stay longer on your blog? One way is to list the most popular content in your sidebar. The following code will display the top five posts with the most comments in your site. All you need to do is to paste the code below into your sidebar.php file and you are good to go.

Popular Posts:

< ?php $result = $wpdb->get_results
("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC
 LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>

< ?php echo $title ?> {< ?php echo $commentcount ?>}
< ?php } } ?>

Credit: WPRecipes

Create a “Share on Facebook” Button for Your WordPress Blog

Raphael — Fri, 22 Jan 2010 06:31:32 +0000

A few weeks ago I posted the article Create a “Send to Twitter” button for your WordPress blog, in which you can create a button that will share what you are reading with your followers.

This week I will show you how you can add a “Share on Facebook” button in your WordPress blog to bring in more visitors. This is very simple, just like the Twitter button tutorial.

Open your single post file (single.php) file from your theme directory and insert the following code within the loop:

Share on Facebook

To make things more interesting, you can use getTinyUrl() function to send a short URL to Facebook:

< ?php $turl = getTinyUrl(get_permalink($post->ID)); ?>
Share on Facebook

That’s it! Now your readers will able to share your posts in their Facebook. This is a great way to boost your site’s traffic!

Source: WPRecipes

Refer a Friend and Get a $25 Visa Gift Ceritificate

Raphael — Mon, 18 Jan 2010 16:17:39 +0000

Would you like to score some free cash? Starting today, January 18^th, 2010 I am offering a $25 Visa gift certificate for friend referrals. That’s right, if you refer a friend and the person hires me you will receive a $25 Visa gift certificate!

CSS Fixed Menu – Pinned-Down Style

Raphael — Thu, 14 Jan 2010 07:10:56 +0000

CSS is such a simple, but powerful mechanism for adding style to websites which makes your design options infinite. One of the most common uses of CSS is to create nice looking and useful menus for websites. We can create all kinds of different styles for menus: Horizontal, vertical, with drop down boxes, etc.

Pinned-Down Style

There’s another technique that I found to be very interesting and pretty cool to apply to our menus. It’s called Pinned-Down Style. Our menu is going to be in a fixed position on the page and when the user scrolls up and down the menu will float over the page at the position we defined.

The XHTML Code:


...



    
        Home
        About Us
        Our Activities
        Contact Us
        Site Map
        Privacy
        Links
        Our Partners
        Articles
    

...

This is just a paragraph with links that we are going to style with CSS. We can see the final result after we apply the following CSS code:

The CSS Code:


div.banner {
	margin: 0;
	font-size: 100% /*adjust to make the menu larger or smaller*/;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	position: fixed;
	top: 2em;
	left: auto;
	width: 8.5em;
	right: 2em;
}

div.banner p {
	margin: 0;
	padding: 0.3em 0.4em;
	font-family: Arial, sans-serif;
	background: #990000;
	border: thin outset #000;
	color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #CCC }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Summary

This is a good technique for a website that has a lot of content. It enables the user to access the menu quickly instead of having to scroll up the page to access the menu in order to navigate the site. What makes this work are the the 2 following rules: position: fixed; which causes the menu to be in a fixed position, and the display: block; that makes the a elements inside the menu to be displayed as block elements causing them to display one below the other. It would be a good idea to place the XHTML code for the menu at the top of all the content, right below the opening body tag for organization purposes. That’s it. Pretty simple. Play around with these settings and find the best design for your needs!

Examples:

Click here see an example.

Credits:

W3C: CSS Fixed Menus

Create a “Send to Twitter” button for your WordPress blog

Raphael — Fri, 08 Jan 2010 17:20:13 +0000

Do you use Twitter on a daily basis? If so, you know how good Twitter is for sharing with everyone what you find interesting around the web. Here’s a great way to give your readers a chance to share your Wordpress blog posts with their friends and bring more visitors to you.

This is a very simple Worpress hack where you will create a link to Twitter with a status parameter. We will use the function the_permalink() to get the page URL:

Share on Twitter

You can add this line of code to your single post file (single.php) in order to display it on each individual post and also add it to your main index template (index.php) to display under each post title in the blog’s index page.

Source: How to: Create a “Send this to Twitter” button.

Enjoy!

Amuse Resort Wear website is launched!

Raphael — Fri, 08 Jan 2010 07:44:06 +0000

My latest project has just gone live. Amuse Resort Wear is a start-up company based in Portland, Oregon dedicated in serving women with design fashion from the world’s most exciting vacation places. The simple site now serves as an online presence with many more features to come. Check them out at www.amuseresortwear.com!

3 Simple CSS Tips you Should Know

Raphael — Wed, 16 Dec 2009 06:59:37 +0000

1. CSS Short-Hand Code:

When writing your CSS, you may want include many properties that could make your CSS code a bit messy. You can solve this problem by using CSS short-hand code to make your code neat and clean. The most common CSS properties that allow you to use short-hand code are font, margin, padding, background and border. The properties must be put into a specific order for your web browser to read them.

In the examples below you can see how much shorter and simpler your code can get:

Font:

#some-div{
font-family: Helvetica, Arial, Sans-Serif;
font-style: oblique; 
font-weight: bold; 
font-size: 16px; 
}

#some-div{
font: oblique bold 16px Helvetica, Arial, Sans-Serif;
}

Margin/Padding Properties:

This example also shows how to use the short-hand code for margin and the short-hand CSS for padding works the same, just replace margin with padding.

#some-div{
margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px;
}

#some-div{
margin: 5px 10px 20px 15px;
}

If your top and bottom have the same margin and the left and right have the same margin you can use the code below. This also works the same for padding.

#some-div{
margin-top: 10px; margin-right: 30px; margin-bottom: 10px; margin-left: 30px;
}

#some-div{
margin: 10px 30px;
}

Background Property

#some-div{
background-color: #000;
background-image: url(image.jpg);
background-position: left top;
background-repeat: no-repeat;
}

#some-div{
background: #000 url(image.jpg) top left no-repeat;
}

Border Property

#some-div{
border-width: 2px; border-style: solid; border-color: #000;
}

#some-div{
border: 2px solid #000;
}

You can also use this short-hand CSS with border-top, border-right, border-left, and border-bottom.

#some-div{
border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;
}

#some-div{
border: 2px 5px 10px 3px;
}

2. Multiple classes together in one element

If you want to apply multiple classes to a certain element of your page, you can combine them as shown in the example below. All you need is to separate the classes with a space and voilá. Remember that CSS cascades so if you have the same properties in your second class as your first it will be overwritten by your second.

content here

3. Underscore (_) and asterix (*) to hack multiple browsers

Sometimes coding for multiple browsers can be a pain as your styles can look different in each. A simple but effective solution is to add an asterix (for Internet Explorer 6 and below) or an underscore (for Internet Explorer 7 and above) in front of your property and that fixes your problems. In the example below we can have a margin-bottom property that will work differently for Firefox, Internet Explorer 6 and 7.

#some-div{
margin-top: 25px; *margin-top: 20px; _margin-top: 35px;
}

Firefox will give the element above a top margin of 25px while Internet Explorer 6 will give a 20px margin and Internet Explorer 7 a 35px margin. Pretty cool, huh?

Thanks for ready and please leave some feedback!

Raphael Haefeli v3.0 is online!

Raphael — Tue, 15 Dec 2009 19:41:43 +0000

I’m happy to announce that the new and improved version of my website is live! The new site features a new design and social media tools for interactivity. Check it out and leave me some feedback!