Wagga Firearms web design revision 1

Revision 1

• adjusted alignment 
• added links to bottom of page
• moved main phone number to top of page
• changed colour of phone number and map arrow from red to orange

Web Design Mock Up - Wagga Firearms Homepage

Initial Design for Wagga Firearms Website Homepage

Week 9 - Implementing the Drupal Theme

Today I'll be working through this tutorial taking note of anything that goes wrong or is confusing along the way.

Implementing a Drupal Business Theme

1. The first part is easy just copy an existing theme and rename it so you have somewhere to start from.
2. Open the .info file in an editor and add the lines shown in the tutorial containing config details, region identifiers, and the css files we’ll be using. Notice the regions are the groups we created in Photoshop:
• regions[header]         = Header
• regions[navigation]     = Navigation
• regions[featured]       = Featured
• regions[welcome]        = Welcome
• regions[columns]        = Columns
• regions[content]        = Content
• regions[highlighted]    = Highlighted
• regions[help]           = Help
• regions[sidebar]        = Sidebar
• regions[footer]         = Footer
3. copy the html.tpl and page.tpl from the drupal/modules/system folder to drupal/themes/business
4. create new folders css, design, images and js. move the drupal/themes/business folder to drupal/sties/all/themes/business
5. open XAMPP and enable Apache and MySQL and log in
6. At this point we should enable our new theme, but for some reason Drupal thinks that our theme is not compatible with this version of Drupal. So I'm going to check the .info file to see if something is wrong there.

Week 8 - Progress Report

Ok I have finished the photoshop layout form my Drupal theme. I sliced out some of the icons and put them in separate files to be used in the theme. I have saved 2 large images to be used on the slider bar.

The tutorial I am starting now is Implementing a Drupal Business Theme 

I have started reading through the tutorial and the rest of this tutorial I will have to do at home on my computer where I have Drupal working.

Week 7 - Wednesday - Progress Report

Finished designing the webpage in Photoshop. Ready to start creating the Drupal theme next week.

New groups of layers created this week:

The 'container' group, which contains the 'main content' and 'sidebar' groups. The 'sidebar' includes 'search' and 'login' forms.

The 'footer' group, which contains navigation links, links to social media and copyright disclaimer.

Week 7 - Progress

Continued with the tutorial on building a drupal theme using photoshop. Completed Welcome section and columns. Below is a screenshot of the theme so far.

Getting an understanding of the structure of a theme and how Drupal will interpret the photoshop file. The structure of groups and layers is starting to make sense. Here is the structure i created today.

Week 6 - Progress Report

Began work on a tutorial on how to deisgn your own Drupal theme in Photoshop.

http://webdesign.tutsplus.com/tutorials/complete-websites/design-a-drupal-business-theme-in-photoshop/

Completed to step 11 in class. Below is a screenshot of the theme so far.