Don't Click On Me » HTML

Rejected Don’t Click On Me theme

Felix — Fri, 16 Jan 2009 17:00:58 +0000

Feel free to use anything in there under the creative commons licence (see the link in the sidebar). Beware: Blueprint CSS framework is included in the bundle, I believe I am allowed to distribute it with this template, but it is covered under a different licence (not the creative commons). There is a screenshot below or you can download the zip here.

This design is here for download because I chose not to use it for this website, if you can find a use for it, you can have it, and change it as you like, also, feel free to remove my name from the bottom.

Web Development with The Gimp and Blueprint CSS – Part 3

Felix — Thu, 15 Jan 2009 17:00:48 +0000

First things first, buckle your seatbelts, this is going to be a long one. It concludes the three part tutorial (Part 1, Part 2). We’re going to write the code to make the design happen, this includes putting in some dummy text, and at the end, we will have a working design, that could be converted into a WordPress theme. (future tutorial?).

Anyway, first we are going to fill out the index.html file with some standard HTML and the code needed to call blueprint into action, (there will be a download later on in the post if you can’t be bothered to fill out the file yourself):



Our Design

<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">







<div class="container">

I’m going to describe the important lines to you:

On the 4th line we have a link to our custom stylesheet, it’s currently empty, so it will have no effect on the page yet.
On the 6th, 7th and 8th lines we have the standard blueprint call, and one line that fixes the framework for IE.
On the 12th and 14th lines we have the main div class that holds all of the blueprint columns etc. This can be changed to
to make it show the grid in the background, which is very useful for laying out custom web layouts.
All of the rest is standard HTML and should make some sense.

We are now going to put in the columns to blueprint, so within the

and the

tags we add:

All of these

tags have an id and a class value, this allows us to separate the styles out, all of the classes we use are part of blueprint and all of the id tags will refer to custom code we will write in the end. The key thing to remember is that there are always 24 columns.

The class=”span-24″ or similar shows how wide the column should be, and there is also an example that columns can be nested within others to keep them together. Spacing can be added easily with the prepend or append values in the class variable (?).

We add some dummy content to this:


Our Website
And this is what we do




Content
this is a paragraph. Not a very long one but still, it's here...
Sub-content
This is a paragraph belonging to the sub content, no stealing.


links
hello

Now when we load our index in a web browser it should show some text roughly laid out as we want, but there are no heights added to anything so it will look squashed and may not show well until we write in out own code. It should look like this:

Notice how Blueprint has automatically set some sensible text defaults, i’m not going to change them, but it’s easy to do in your custom css file.

Now we can start to put something into out custom stylesheet, style.css. Put in the following code:

body{
background-color:#ccc;
}

#header {
background:#fff url(img/header.png) 0 0 no-repeat;
height:150px;
min-height:150px;
}

#bg {
background:#fff url(img/content.png) 0 0 repeat-y;
}

#footer {
background:#0f1b1c url(img/footer.png) 0 0 no-repeat;
height:30px;
min-height:30px;
}

#copyright{
text-align:center;
}

Now if we reload the page we have:

Next we’re going to make all the text appear where we want it and change some colours and finer points, also we’re going to add the code to make the copyright notice show…

So we have added:

#title {
padding-top:30px;
}

#title h1, #title p {
color:#fff;
}

To the CSS file and:


© All of us

To the main index.html file, inside the div id=”bg” tags and after the sidebar.

The css at the top positions the title and makes the h1 and p aspects of the title white. The HTML adds another column containing our copyright notice (we have already aligned this to the center).

There we have it (sorry about my cursor being in the screenshot):

Finished… You can download as a ZIP or as a .tar.gz.

Web Development with The Gimp and Blueprint CSS – Part 1

Felix — Tue, 13 Jan 2009 17:01:10 +0000

The GIMP is a popular FREE and open source image editing program, Blueprint CSS is a popular and also free CSS framework, it makes web layouts easy and chooses sensible style defaults on your web page. It is compatible with almost all modern browsers and makes designing a website easy and simple.

This first part contains how to set up the files and folders and create the image in the Gimp, the second part will contain how to slice up the image and save it, and the third part (out 14/01/09) will show how to write the code and finish up.

First, a little about my setup. I’m running Ubuntu 8.10 (64 bit version). I have GIMP 2.6, I also am going to be using Firefox 3. The Browser should not matter as Blueprint is tested and works in most modern browsers. I assume knowledge of your chosen OS, that you have the gimp installed and working, and that you know how to open an image in the gimp. It’s also useful if you know what some of the tools are called.

At the end of the three part tutorial you should have something like this in your web browser, with boxes for the content and sidebar etc.:

At the end of the first part you should have something vaguely like this in the gimp:

For this project, I have one folder in my home directory, this will contain all the files to be uploaded, including all CSS, image and HTML files. It would be a good idea if you create one now.

To start with you need to download the latest version of blueprint from the Blueprint website. Extract the archive and copy the “blueprint” folder from within the archive to the folder we have just made (in the home directory).

Next, create “index.html”, a blank file, “style.css”, also blank, and an image folder (I’m calling it “img”). The index.html file will hold the design when we’re finished. We have created our own style.css file to house custom colours etc. And the “img” folder will contain the images once we have sliced them.

It should look similar to this:

Now you’re ready to open the Gimp and start making things… So, open the Gimp, create an image 950px wide and around 850px high (not crucial). Then drag out guides by clicking on the rulers (the guides with the numbers on, at the (left) side) and draging out to where you want the guide to go. It’s useful to zoom in to around 200% to do this, (view menu >> zoom >> 200%). You need to put one at 30 pixels out and one at 40, one at 70 and one at 80, do this right the way accross the page, see the image below if you are unsure. Or you can download one I made earlier. Which is probably easier. If you made your own guides, your background will probably not be the same colour, this is not a problem, it will work just the same. There is a picture of what your screen should look like if you downloaded the “one I made earlier”.

The guides don’t technically serve a purpose in this tutorial, because I have given you the values of where to place things. But when you design your own websites they become very useful for aligning content and text. As well as that they help you check to see if you have done things right as we go along.

Don’t forget to save as you go along , and when you’ve finished.

It should look like this (this picture does not include the toolbox or the layers dialogue, so there will be a little more to it on your screen).

I have then created a new layer called Holder to put the design into:

Use the Align tool and click on the layer, little squares will appear in the corner of the layer. Click the button on the toolbox that has two arrows pointing into the middle (horizontally). The layer should move into the middle of the image.

I have then used the fill tool, to fill the layer with white, this is going to be our main content area. Although we are going to place the sidebar and the header on top of it.

Your image should now look like this (but there should be space at the bottom of yours, I need to re-screenshot this…):

You may wish to fill the background, but it’s not mandatory. It is however, a good idea to fill the background if you are going to use my CSS code later. I’m going to use #cccccc to fill the background layer. Select the background layer (the layer at the bottom) by clicking on on it in the layers dialogue, and then clicking on the empty space near the edge to fill it. The yellow and black line will surround the layer and you can then then click on the layer to fill it. You need to have the colour selected first. Only the outside should look gery, the rest of the image will remain white.

I’m also going to create a drop shadow, which won’t show up particularly well, but will make it more interesting nevertheless. Click the Filters Menu >> Light and Shadow >> Drop Shadow. It will bring up the box below, make sure you use 0 as both the offset X and Y leave the colour and opacity and untick Allow Resizing. You need to have the layer you want to have the drop shadow selected and also bear in mind that in these screenshots the bottom 50px is chopped off. It should look like this before you hit ok:

The image window should now look something like this:

Now create another new layer called header, make it 870x wide and 150px high. Use the same technique we did earlier to move it into the centre (the “alignment tool”).

Fill this new layer with a gradient of your choice, I’m using #0084ff and #81c5ff. You need to choose the Blend Tool (the Gradient Tool) and then click + drag to create the gradient (vertically to get the same effect as this one).

You can use these same techniques to position/colour/align other aspects of your page such as footer and sidebar, but for this tutorial we are not going to make them a different colour, we will define them with their allignment on the page later with Blueprint.

So far we have:

You can download the XCF file here.

I’ll see you in part 2 where we are going to chop the image up and save it ready for the web.