Posted by ljmacphee on May 23, 2007 under backgrounds, css, flickr, gimp, graphics, how to | 
Way back when, any ‘cool’ website had a black background and lots of animation. We’ve gone through several designs along the way. Web 2.0 design involves drop shadows, 3d gradients, rounded corners, lots of white space and grayed out pastel colors.
The rounded corner backgrounds are very easy to create in GIMP. The CSS code is not difficult either. Both of these examples have a rounded corner background with a drop shadow. Then each has an image behind the title. TimesToCome has a drop shadow image behind the title which is not a link. TimesToCome Blog has an image with a border and the title is a link.
Rounded corners in GIMP:
- Use a slightly smaller image than you need, rounding the corners will increase your image size.
- Select Script-Fu -> Decor -> Round Corners { if that is grayed out be sure your image is Image -> Mode -> RGB, and be sure to click Layer -> Anchor Layer }
- Choose a reasonable Edge Radius, Shadow X Offset etc for your image. You may have to experiment a bit. I usually tell it to work on a copy, add a background if you choose or leave it unchecked for a transparent background.
* That’s it.
I used the rounded corners for both background images and the title image on TimesToCome.
Border Image in GIMP:
- Again use a little smaller image, adding borders will increase the image size by the amount of the borders.
- Choose Script-Fu -> Decor -> Add Border
- Select your border size, color and delta. The higher the delta the larger the difference between sides and the more of a 3d effect you’ll get.
* That’s it for adding the border
Layering the image:
- On the TimesToCome main page the title is not a link, we’re already at the home page. So I created a logo in GIMP and rounded the corners and added a drop shadow.
- I rounded the corners and added a drop shadow with a background to the main background image. We’re using a white background there anyhow.
- This looks like several layers but is only one image. I used Layer -> New Layer with Transparent fill on the main background image. I then pasted the logo image into the new layer. Then I went to Dialogs -> Layer and opened up the layer dialog. I changed the opacity of the new layer so you can see a little bit of the main background through the title image. When everything is as you like Layer -> Flatten Image.
- The CSS for TimesToCome main page:
body {
background-color: #ffffff;
}
#container {
background: url( images/background.jpg ) no-repeat #ffffff;
height: 600px;
width: 800px;
margin: auto auto auto auto;
}
#menu {
float: right;
margin: 150px 30px auto auto;
}
The CSS for the TimesToCome Blog header is a bit more complex:
#blogtitle
{
width: 980px;
height: 230px;
display: block;
color: #786;
margin: 0px auto 0 auto;
padding: 5px 0 0 0;
background: #fff url(img/header.jpg) no-repeat;
text-align: left;
}
h1.blogtitle
{
font-size: 32px;
margin-top: 10px;
margin-left: 15px;
background: url(img/headingbg.gif) no-repeat top left;
background-position: -10px -1px;
}
You will have to adjust the padding and background-position to center your title on the background image properly.
If you are looking for cool images, try My flickr account. These are all CC attribution copyright. There are also many CC attribution images there if nothing I’ve added interests you. Just drag and drop the images you wish to work with to your desktop and fire up The Gimp.
You Tube Tutorial, Gimp for image stacking
Posted by ljmacphee on April 2, 2007 under blogger, blogger template, css, useful sites |
I spent last week crash-course brushing up on CSS. I’ve determined that CSS was put together by insane COBOL programmers.
1) It is far more verbose than COBOL, who’d've thunk such a thing was possible
2) and it requires more hacks than COBOL to work properly
3) and in no other computer language will white space or lack of it break things so comprehensively.
As you can see we’ve a new template here. The first of many I’m sure.
I never could’ve gotten going on or put this template together with out The Blogger WorkShop: Creating a Blogger Template. If you are just starting out with Blogger templates, you’ll want to give that 4 part series a walk through.
I set up a free blogger blogspot.com blog and used that for testing. That way I could break things and fix them with out panicking. You should add a blog for testing to your blogger blogs if you’ll be doing much template work.
Template
Download the file. Change template-3column-webtools.text to template-3column-webtools.xml. Then go to your test blog site, go to template, edit html, and upload it from your hard drive as directed.
Be sure to save the information from your widgets. Google doesn’t save that information when you up load a new template.
And again, be sure to test and adjust it putting in your header image and telling the template where to find the image in a test area, not on your main blog.
I did not include the header image. I’ll be happy to send you a copy of it if that is what you want instead of using your own image. Or just drag and drop the image to your desktop same as you would with any other website image you like, then upload it to where ever you host your misc. blog images.
see also:
Beginner’s tips for using CSS
Posted by ljmacphee on February 26, 2007 under css, useful sites |
As web sites get larger maintaining them becomes exponentially more complicated. You can use one cascading style sheet (css), link it into many documents and by changing the style sheet update all of the web pages that link to it. I recently did that at timestocome.com and wish I had done so from the beginning, it was a project. Now each section of the website each has its own style sheet.
Style sheets are very picky. If things are not working remove extra spaces and try changing the order in which you do things. Also, if I do not put a <p> before the text it doesn’t show because I haven’t defined it.
Another thing to watch is to clear out the cache in your browser each time you load a page to check your work. Otherwise you are probably looking at an older version of the page that does not show the most recent updates to your stylesheet.
Stylesheet example:
h4 { color: 446677; font-style: italic; }
h3 { color: 446677; font-style: italic; }
p { color: 222244; }
ol { color: 222244; }
li { color: 222244; }
dl { color: 222244; }
dt { color: 222244; }
a:link { color: 335588; }
a:visited { color: 224455; }
a:active { color: 224444; }
body { background: #eeeeff; font-color: #222244; }
Linking the style sheet
To have a HTML document use these styles link it in to the the HTML document in your heading.
Cascading Style Sheets, from the World Wide Consortium
CSS Tutorial
The Complete CSS Tutorial
Posted by ljmacphee on February 21, 2007 under css, graphics |
How frustrating it is to try to position an image with html. With a css (cascading style sheet) you can position right down to the pixel where you would like your image positioned.
To position a picture exactly out from the top and left side you need to add code to the < head > part of the html document as well as to the < body > part.
Add in the heading:
< style type=”text/css” >
#anyname { position: absolute; top: 0px; left: 0px; }
< /style >
The top: 0px; left: 0px; is the number of pixels from the top and left of the browser window. If you wanted it to be 30 pixels down and 40 over you would change these to 30px and 40px
Add in the body:
< span id=”anyname” > < img src=”picture.gif” >
< /span >
If you forget the closing tags most browsers won’t even load the page. If you forget the semi-colons they will ignore what you have told them.
See also:
Beginner’s tips for CSS