Today we are going to create a nice animated hover over to display information over an image.

You can download the source code here.

To start, let's look at the code below:

 <div class="wrapper">  
  <ul>  
   <li>  
    <div class="image-wrapper"> <a href="#"><img src="images/1.jpg" />  
     <h2>Image Title</h2>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen</p>  
     </a> </div>  
   </li>  
   <li>  
    <div class="image-wrapper"><a href="#"><img src="images/2.jpg" />  
     <h2>Image Title</h2>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen</p>  
     </a></div>  
   </li>  
   <li>  
    <div class="image-wrapper"><a href="#"><img src="images/3.jpg" />  
     <h2>Image Title</h2>  
     ...

This post is an extension of a previous post I wrote on responsive layouts,
you can read that post here.

Today we are going to create a responsive table using unordered lists and divs. I am going to use an example from our site, it is the agenda for FalafelCon 2013.

You can download the source files here.

To start we are going to use an unordered list for the rows:

Then we will use divs inside the lists for the columns:

We want to set the main container width, and then override it for the specific devices ...

Here is a nice little feature that allows you to download a resource by simply adding a download attribute to an a element, as shown below.

In this case, since the download is added, the file will be downloaded instead of navigating to the href.

Keep in mind this only currently works in Chrome, but will hopefully be added to other modern browsers in the near future.

One great way to add a unique look to your website is by using custom fonts. There are many ways to do this by using images, javascript, etc...

Google Fonts is an easy way to add custom fonts to your site.

The Google Fonts API is compatible with the following browsers:

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

To get started, navigate to www.google.com/fonts/.

Once on the page, you'll notice filtering features on the left. You can filter by thickness, slant, width, Serif, Sans Serif, ...

Today we are going to create a responsive layout using media queries, you can download the source files here.

While there are many ways to go about doing this, I am going to focus on 4 distinct layouts.

• One for desktop and Tablet Landscape
• One for Tablet Portrait
• One for Mobile Landscape
• One for Mobile Portrait

To begin we are going to create a wrapper and give it a width of 1000px, this will be the default size for Desktop and Tablet Landscape.

 .wrapper {  
   background: none repeat scroll 0 0 #efefef;  
   box-shadow: 0 0 5px rgba(0, ...

I posted some free backgrounds and colors a few weeks ago, I have added a few new backgrounds, and a modern color palette.

Enjoy!

You can Download the files here.

Today we are going to look into how we can enable styling of HTML5 elements in early versions of Internet Explorer by using HTML5 Shiv.

What is HTML5 Shiv

According to Wikipedia, "HTML5Shiv is a JavaScript workaround, discovered by Sjoerd Visscher, to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript."

How does it work

First we need to target Internet Explorer borwsers before version 9. To do this, copy the code below, and place it in the head tag of your page.

We ...

Today I am going to show you a simple way to bring a viewer to your web site back to the top of a page, with an animation, using jQuery.



You can download the source files, here.

To start make sure your page is loading jQuery, you can do this via a local file or use one of many hosted jQuery files. In this example we are linking to a file hosted by jQuery.com.

  <script src="http://code.jquery.com/jquery-latest.js"></script>  

The second piece of code you will need is a link with a little bit of JavaScript in it, shown below:




You can ...

Today I am going to show you how to make rounded social icons with css.

You can download the source files here.

I have set this project up so that you can create many different icon sizes, border sizes, border colors, backgrounds images, background colors, and light/dark themes.

Let's start with the first large Icon:

Here is the mark-up

 <div class="circle-container extra-large">  
 <div class="box-1 stripe-2 blue-1 border-dark-grey border-10 shadow">  
  <img src="images/facebook-white.png" /> </div>  
 <p>Facebook</p>  
 </div>  

Here are the styles in detail.

 */ =========== Floats the container =========== /*  
 .circle-container {  
     float: left;  
 }  ...

Today I am going to demonstrate one way to convert an inline navigation to a mobile navigation using media queries.

View an example here.

Or from this:

To this:

We start with a basic unordered list.

   <ul class="falafelConNav">  
    <li><a href="#"> About </a></li>  
    <li><a href="#"> Agenda </a></li>  
    <li><a href="#"> Sessions </a></li>  
    <li><a href="#"> Speakers</a></li>  
    <li><a href="#"> Sponsors</a></li>  
    <li><a href="#"> Venue</a></li>  
    <li><a href="#"> Register</a> </li>  
   </ul>  

The idea is to change the css when the screen reaches a certain size, in this case 480px. to do this we use a media query like ...

Here is a simple step by step tutorial on how to create and register a theme in Sitefinity. First go to: Administration > Settings



Then click on : Advanced



Next go to: Appearance > Frontend themes.



Then, name your new theme and enter the path.
If you don't know the path you can copy the path of another theme in your project and replace the last part:

Save Changes

Now you can create the theme, got to: Administration > File structure.
Next, navigate to your App_Themes folder:



Create a new folder, and name your theme.

Inside your new theme folder create ...

You can mix-match most with different color/background image, some are fixed.
I will be updating this file regularly, so check back soon!

You can Download the files here.