Here’s a new template that I’m calling Summer Fields.
This design was actually inspired by a template I saw on a popular template site. I took a look at a screenshot of it, and decided that I wanted to make a completely standards following rendition of the design concept. I made all the images and the code from scratch, based on the screenshot that I felt would make a nice clean and bright business layout.
Here’s the original screenshot I was working off of:
This template is free, open-source, following only the Creative Commons Attribution 2.5 license.
The template is a CSS based, table-less layout and validates to XHTML 1.0 Strict. It is a fixed width layout and has an included subpage layout. There are 6 images used in this design. 5 of those images together total only 1.5KB and the other is the sunflower image which is 5.7KB and simple a placeholder for your own images later. The pale blue background of the page is easily changed in the CSS to whatever color you want (looks pretty good if you do pure white or navy instead).
This design validates to XHTML 1.0 Strict, uses CSS for layout, contains no hacks, and includes invisible skip links for screen-reader accessibility. It has been tested in Firefox, IE 5.5, IE 6 and IE 7 Beta 2, Opera, Konqueror, and Safari.
I have included some matching text styles to cover basics like blockquotes, code, and data tables. All the text sizing is done using the 76% concept to keep them fluid with em sizing. Here’s a screen shot of the Summer Fields layout:
Feel free to go to the main page for it and download the layout. Remember to save the images used also.
Download page: Summer Fields
How to add a javascript gallery to this design: Simple JS Image Gallery
~Nicole
Nice template.
I am a beginner in terms of style sheets. I downloaded the file style.css, and it comes close to looking like yours. However, the background is a dark gray and the region where it says “Maybe a big background image here” is green.
I must have missed something in the download.
Can you help?
Forgte last comment. Switched from safari to firefox and then I could find the images I was missing.
You’ve actually made me realize that I should also put a zip download of the files there. I don’t know why it didn’t occur to me before .. should have, but ah well. I’ll work on doing that. 🙂
Thanks for a great template. I’ve customized it for my store. I do have a question though. I am having a problem with the GBP symbol (£) showing up. I’ve read it has something to do with character encoding, but can’t figure out what to do about it. Any ideas?
Thanks again!
I’m glad you like it 🙂 And I love your big logo – eyecatching.
For the pound symbol, within the code you can write: £ ; (without the space before the ; ) and it should become the £ symbol correctly.
Hi Nicole,
We are using your style sheets for our research group. Very nice. It is clean and attractive, easy to navigate.
One problem I have encountered is with the the div “navigation”. It generally looks fine. However, if I enlarge the font in my browser (either safari or firefox) then any menu item that is more than one word will overlap if wrapping occurs. You can see this if you go to
http://nootka.uoregon.edu/~drt/UOgeophys/
and try enlarging the fonts.
Is there a way to fix that?
Thanks!
Doug
Yes, go into the style.css file, and find the vertical navigation section. Look for:
#navigation ul li { line-height: 4px; border-bottom: 1px solid gray;}And increase the line-height — try something like maybe .9em instead of 4px. Basically you are increasing the height of each line of words so that when it wraps the lines have enough white-space height to not overlap the line below.
Hi Nicole,
Thanks for your previous answers. Very helpful.
I noticed the following. When using Firefox on a mac the text in the main content region gets blurred if I mouse over the index on the left that has the hover feature.
For example, on this page: http://uoregon.edu/~drt/UOgeophys/PerspStudents.htm
It initially looks fine. Though if I move the mouse up and down over the left side menu, then some of the text in the main content area gets blurred.
Is this a firefox problem? Or have I somehow made a mistake in using the style sheets.
(It does not happen in safari, suggesting it it firefox. But thought it would be worth checking).
Thanks, Doug
That’s odd… and unfortunately not reproduceable for me on Firefox, then again I’m looking at it on Windows/Firefox at the moment so that may be why I don’t see it. Does the same thing happen for you when you view it on the original page?
It is not something that can be done with the original page, since the left side menu has only a photo to the right.
However…!, I just noticed that it happens on by “geophysics” pages and not my own “drt” pages, which use different templates/style sheets (but based on yours). So, I think I need to find out what I have done wrong to the geophysics pages.
Hi Nicole…. I’m baaaack!
Just a small but annoying problem(to me anyway). Everything seems to be fine except for two pages within my site. These are the final checkout pages, and then the submit link page( http://www.creative-fabrics.co.uk/store/LDadd_link.asp). If you notice, the buttons that should be at the bottom jump up to the top-left and throw everything off. This happens on the very last step of the checkout page too, but I’ll save you the work of looking at that one =) – it’s the same problem though.
Just wondering if you have any ideas on what I could do to fix it? This is my first template ever that uses Div layers, so I really don’t know much about them. But I am hoping you can come up with something to stop me from going back to tables as I LOVE my site now. But it doesn’t look good for that to happen on the checkout page – I’m surprised it hasn’t stopped anyone from buying!
Hope you can help!
-Rachel
@Rachel
Great to hear from you! I’m glad things seem to be working out except for this little glitch. Now I’ve looked at the code behind, and to be honest, I’m not sure exactly where the links are ‘supposed’ to be showing. Where do you want them to appear? In the code, they seem sort of … haphazardly tossed in and are appearing there because they are outside of the div that closes the content area – so back up they go.
Also, I’d definitely suggest putting a doctype and charset in your code, as it will make browsers render the design in standards mode. An example of a doctype and charset can be found in the original template.
Would you mind emailing me with specifics of where you want those links, and maybe I can help you sort it out. I love what you’ve done with the design otherwise.
~Nicole
Hello I used this page to make something for school. We actually had to choose a design from OSWD.
My question: do you know where I can get that javascript for the pictures bellow.
@Michael
Looks like you’ve stumped me! I didn’t use any javascript in the design, so I’m a bit confused about what pictures you refer to.
Our Photo Gallery
* placeholder
* placeholder
* placeholder
* placeholder
This area can be a photo gallery, or perhaps you could replace the images with an amazon book list with affiliate links. If you want you could add a tad of javascript to this area and when you mouseover the small image it can show bigger in the image to the right.
That’s what I mean. I dont know anything about javascript but it would have been nice if I could do what’s in that text.
@Michael
Oh! Now I know what you’re talking about. Sure. I can whip up some JS that will make that work and post it on the blog. I’ll put an update here when I get that done.
Sorry for late reaction.
Thank you for doing that 😉
The new post on how to add the javascript is on the site.
Basic Javascript Image Gallery
Hi Nicole,
Thanks for the great template! It was really easy to work with until I got a bit stuck with the images.
Basically, images I’m putting in the webpages are not showing and I wonder if you might be able to figure out that the problem is. Here are the details of what has/ has not worked:
– Inserting my image (logo.jpg) as a background in the CSS has worked
– When I inserted the same file in the index and the subpages, it didn’t show (html used: img src=”logo.jpg”
– However, when I tried changing “logo.jpg” to “sunflower.jpg” or “greenhoriz.jpg” the image appeared.
– I also tried the opposite: where you have placed “sunflower.jpg” as a placeholder, I substituted the html code with “logo.jpg” and again my image did not show.
– I have also tried using other image files (personal photos, downloaded icons etc.) but they all don’t appear. Only the image files that you have used are appearing.
I haven’t uploaded my website yet so I am working off my hard drive. Do you have any idea what the problem might be?
Thank you!!