Just a warning before you step foot in this blog – it’s gonna be a long one. Don’t say I didn’t warn ya!
WordPress
Although I been using WordPress for my blog, I still have not felt that I’ve yet to reach its horrible underbelly yet, and so when I began making the Grow site, I decided to make it a static site first. I thought it would be a good idea to know exactly what code I was using first and then move to wordpress.
Header
I started by coding the header in place. I didn’t want to use an image for the header, and I’ve wanted to try as much CSS3 as I can, so I coded the header as a CSS gradient. This proved to be quite easy, and inserting the logo and navigation was just a matter of CSS and HTML coding
Content
This is the point where I admit a dirty little secret… I didn’t use Starkers. >_>;
And heres why. As I began coding the Grow site, everything was going smoothly enough, but while I was trying to fix the content, I hit a wall. A major wall. A ‘I’ve-been-stuck-here-for-two-days-with-no-progress’ kinda wall. I couldn’t work out the problem, I couldn’t get any divs to site correctly, and really it came down to my skill level. I’m no were near proficient in CSS as I’d like to be, and this has cause major problems for me. So, shamefully, I changed my theme to twenty ten, and set about creating Grow around that structure.
I know this is the lazy way to fix it, and given more time I know I would have been able to navigate round these problems, but with time running out, and with no progress at all, I felt my only option was to switch and edit. This worked out rather well and made the rest of the editing go smoothly. I did get stuck again while coding the illustration, but it was easily fixed with some div fixing
Side bar
The Grow website only shows the sidebar at certain times. It is on the front page, as well as on the blogs. I decided to do this because the side bar is only really relevant to the blogs, with features to facebook and weather. It acts as subnavigation and there for is only needed on certain pages. It also contains the search bar, which can be used on the front page.
Footer
The footer has been split into two sections. The first section are simple links to the contact form, a link to my site and a link to wordpress. The second section is a link to all the funders of the Grow project. It is the same style as the navigation/header bar, and I like how it ties the site together.
At this point I also felt that the site was looking a little too blank, and so I created a very very light green textured background. I feel along with the other small elements, this prevents the website from looking bland while also still looking clean and fresh.
weather
I decided I wanted a weather app installed onto the site. This was fairly easy to do, I simply used the Yahoo Weather app and installed it in my side bar via the editor.
Different page layouts
After I had finished the home page, I moved on to formatting the other pages.
About
The about page was fairly simple to format. I styled the text using CSS and HTML, and I also used images from the grow_content folder to give the page some separation. I made sure that each photograph was the same size, and I added the lightbox app to the website to allow the images to be opened larger.
Learning
Exact same set up as the About page. I always tried to make the pictures I used correspond with the
title I had put them under and I think I achieved this successfully.
The Gardens
The gardens section is split into 3 pages.
The first page gives to an overview of the two garden, using Google maps to show were the blogs are and give a little bit of information about them. Making the Google maps were easy. I simply typed the coordinates into Google maps and then got the embed code from there. It works well, although I would have liked to make my own custom markers.
Both blog pages are essentially the same, they both display their blog category, and also have the side bar. I learnt how to do this from WordPress Codex, a really helpful resource for using wordpress. I create my own PHP pages for Helens Bay, Waterworks and General News, and manually edited the code to only show the categories of my choice
Get Involved
The get involved section is another one cut into 3 sections. On the top page there are 3 images which link to the different areas of the site, each of which are layed out in the same manner as the about page
Support
The support page has some information on supporting Grow, and includes the Donate button, as well as some images
Contact
The contact page consist of a contact app, and lists the contact details of the Grow employees for people to contact.
social networking
Social networking is something that is very prominent in today’s society, so to not acknowledge it and take advantage of it is not wise. As most people today have either a twitter or facebook, it’s a great way of creating interest in a company, get live updates or simply for people to get together to talk. I took the liberty of creating a facebook page and a Twitter page for Grow.
For Twitter, I created a small background and edited the theme to match in with the Grow colours.
I used the same icon as the Twitter page for facebook, and I really like how it turned out.
Link
In my next blog I am going to go over what I’ve taken from this experience
These be share links, yo.
