Css templates | CssTemplatesWeb

In many cases, you want to show pictures on your website. In some of these cases, you’ll want users to upload their own pictures. This could mean that you would have to build an upload system, with lot’s of security issues around it, and it also means that you’ll have to have a lot of webspace available at your webhost. Luckily, there is a really easy and neat solution to this.

has been the number 1 for storing pictures online for some years, and they are offering developers a nice API, which means that we can use many of their functions in our own solutions. In this case, we are going to use it to grab the latest pictures from a Flickr group. But how? With JSON (JavaScript Object Notation). Jquery is able to transfer data between domains, and this means that with a little code, we can use this to show our pictures from the rss feed from the Flickr group.

I’ve put together an example on how to do this (you can download this as a .zip file at the bottom of the article).

What you need to pull this together is:

• Jquery
• A couple of lines in your htm file
• Another couple of lines in your css document
• A Flickr rss (doesn’t have to be yours, just a Flickr rss)

This is the code you need to put in your htm file (in the head tag):

<link rel="stylesheet" type="text/css" title="My style" media="screen" href="jsonstylesheet.css" />
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>

And put this where you want inside the body tag (change the url to your own Flickr Rss feed):

<script type="text/javascript">
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("").attr("src", item.media.m).appendTo("#images")
      .wrap("");
  });
 
  $("#title").html(data.title);
  $("#description").html(data.description);
  $("#link").html("_blank\">Click here to get to the Flickr group");
    //Notice that the object here is "data" because that information sits outside of "items" in the JSON feed
});
script>

You also need to put this into your body tag (where you want the images to show):

<p>Only the last 20 pictures added to the Flickr group will show. To check out all the pictures, go to the Flickr group here:</p>
<p id="link"></p> 
<div id="images"></div>

To add some styling, add this in you css file:

#images { width: 500px; padding:0; margin:15px 0px 0px 100px; overflow: hidden; }
#images img { border:none; padding-right:5px; padding-bottom:5px;}

That’s it!

Here is a little screenshot on how it will look. Of course, you can style it the way you want with css.

You can download the zip file, containing all you need.

  JsonFlickrFeedExample (16.8 KiB, 1,853 hits)

You can also buy the “Personal homepage” css template, containing this function (only a bit more fancy), plus it integrates feeds from both Twitter and Delicious as well.

One of the first things you should think of when starting the development of a new fresh website, is what colors you want to use. Many people don’t think of this as that important, but it is! According to studies, the right combination of colors is very important to grab your visitors interest. Luckily, Adobe has created a great tool for making this easier for us, it’s called Adobe Kuler.

With Adobe Kuler you have several ways to find the right colors for your website. You can simply log in to the Adobe Kuler website and browse your way to find a nice colorschema.

As you can see from the screenshot, there is many existing schemas that is free for you to download.

If you already have a picture that is going to be central on your website, you can upload the photo, and Adobe Kuler will extract central colors and make a color schema from it, pretty neat!

I recommend you to try Adobe Kuler. It’s a great tool for choosing colors for your website.

You’ve probably seen it on many pages, and wondered how they style only external links in a special way. The most used method is to add a a small image on the right side of the link, to show the user that the link is an external link.

It’s also possible to show the user that the link refers to a pdf, word file etc. I’ll show you both how to style to an external link and to a specific file type.

This is how you can style a link to an external site, using css:

a[href^="http:"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

What happens here, is that the “^” character allows you to target an attribute that starts with a specific text, in this case “http:” – which of course is an external link.

And this is how you would do it if you wanted to style a specific type of file link, in this example all the pdf files that are downloadable, would have an image to the right of the actual link:

a[href$=".pdf"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

This is a nice and easy technique to make your text and links a little more stylish. I’ve attached a zip file containing all the icons as you can see on the below picture. Should be enough to get you started. Good luck.

To save both space and frustration, it is often wise to use css tooltips to show a small popup with some helping words to the readers of your webpage. It’s very easy to make, looks great, and you keep your readers from dissapearing from your site.

How to make the css tooltip:

You have to put the tooltip text inside the span attributes. The html look like this:

This is just some text, and if you <a href="#">Roll your mouse over here <span>Then this text will show as a pure css tooltip</span></a> which is pretty neat!

And the css looks like this:

a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}

So now you know an easy way to show really nice and helpful tips to your users, with the help of only pure css tooltip. Good luck!