Skip to content

Week 9 Assignment – Modifying a Theme

October 25, 2009

Starting Point

Following are the stages I am taking to change images on the original template. Up to this point, I have used Joomla’s back end HTML and CSS edit modes and Firebug to locate the images to change. I have uploaded images in Filezilla to my image folder, and replaced the old image files with the new image file names in HTML. Colors are changed with the CSS file, and I have kept an original template file on my localhost, as well as copy/pasting the HTML and CSS in Notepad++ before I make any revisions – just to be safe and have a backup. I chose this template because it seems to be a challenge, concerning many more div’s than I design with. I feel as though I can learn from this template, yet I also wish I had the time to really tear apart the html and look for duplications. One thing at a time, however – so here goes the template.

  1. Original Template – unchanged
    localhostGreen2
  2. Changes up to week 9 – Replacing images found with Firebug; changing the backend Administrator HTML file and using PhotoShop CS3 text for the title, and brushes for the decoration around the title; PS used to change image size to fit the predetermined template banner size. Breakdown follows using the toolbar Tools>Firefox Web Developer>Images>View Image Information :
    Week9BeforeModify template original design

    • Background: 200px x600px with a repeat-x of grainy gradient of Medium green to yellow
    • Main Footer design is one concave and one convex image both 500px x 83px.Both have a lighter green top outline.
    • Upper left image of yellow you can see in the original, and only the background in my 2nd version is 378px x 150px with a lower light yellow thin line that blends with the background on the left, and is more prominent on the lower right.
    • The curve image to the right also contains an extended right and right top grey ,as well as a white curve that shows beyond the header and inside the banner. I could not figure out how so many depth layers could exist on this template, but I now believe that this is one key image in producing that effect.RightCurve1000x209100px x 209 px
    • Main Content background is another gradient text 511px x 298 px.
    • Left Navigation has 2 images, one that has the upper envelope with 2 colors, and a second which has the curved bottom with a thin dark line
    • Right Navigation has 2 images for the top of each section (one with the main 2 colors, and a second with a thin upsweep to widening to the right; Another bottom section with a thin lower color and a second thin dark image to round that out a bit.
    • The header has another set of 2 images with extending colors, both the same size 500px x 73px.
      top_1a

      top_ra

Continuing to change this theme

After a week of the flu, and trying to catch up I can only post this change. I had visions of setting a sunset scenery with mountains inside the bubbles, but after ours of photoshop work…it just didn’t look right. My next thought was to place a background of the windmills nearby on mountains inside the bubble, but after all day working on this I figured I should post SOMETHING. I still need to change the sidebar and footers. I am having all kinds of fun changing things in photoshop, and then finding them in the class file directory instead of the xampp/htdocs/templates/my template/images directory….blaming the fatigue from the flu, but know that this is just part of my merry chase down the wrong roads!
Another challenge I had was taking the entire set of images (some shown above) and trying to change each individually. It would have been easier/saved LOTS more time, if I had corralled some of them into one image, or chosen to turn off many and just insert what I wanted – which is what I did with this background image. I copied the background image from another free template design, then realized that the original background ended in white with a repeat of x axis colors. I used the color picker in photoshop to find a good matching color to use and added this as the background color to help it look seamless (I hope). Timewasters:

  • Still trying to match the bubble image in the header with another bubble (replacing the right curved original template that is in green with a copy/pasted bubble from the magic wand in photoshop)
  • Erasing images and centering them in the header – using the magic eraser
  • blending several background images using brushes to create a woodsy look – but never could get the extension seamless – so too much time spent on this neat effect before realizing that the original template background y axis blended into white

Wee9Start

Week 10 continuing to change footer, header, font

wk9BlueTemplate

Deciding to place blue (above) or tan (below) – I have made some of the matching blue and tan textures for the left and right module boxes, but feel I need to turn in this assignment soon. The image-flow gallery is off, the right column module is off…when I center it, the template falls apart – either the center doesnt let the words wrap around, or the right column moves too far to the right – and it looks ‘off’ unless it lines up on a grid imaginary line below the photo header. This assignment is to help us learn all of the places to change the template…and I feel that the ‘off’ things are due more to my css/html skills….which I don’t want to waste template learning time to fix…..if I can stand it looking this way, that is!

template screen shot in tan texture

Tan Version of the template so far

Preview of template with water

Lining up some of the grid and green in header

I have made changes in the XML files to add images and personalize the template name and information. I have found that the past weeks of changes need to be categorized in my computer better so that I can find the changes I want to keep, and those that I want to trash. This has been a very exciting adventure into template making…most of my delays have been healthwise with the flu, and getting more proficient with div’s in the original template. I am ready to move on to a blank template and very encouraged that I could zip a package together and upload it in the admin install area! Theme making could be very addictive!

There are several changes I would like to continue – making a new database to proceed with this template was something chose not to do, since I wanted to revert back to the original template and make some different changes for my project. Now that I have proceeded this far, however, I am able to work on different template versions uploaded into the admin install area, and I would like to keep improving them as I go along. I am terribly slow, I feel…at designing, but this is starting to get the creative juices going in a way that regular paper and pencil sketches could not accomplish. Some of the changes I would like to do are:

  • Create a semi-transparent backdrop for the content that will extend past the header, but be contained inside the footer and header blue wrapping as well as the upper left corner section/diagonal
  • change the green left and right menu areas to blue texture as an outline for mirrors…the content will be inside the mirrors, and the background semi-transparent will be the background here as well…I think (original idea was something nautical, if this doesn’t work)
  • create a new database for this
  • fix the top div on inside pages so that the water image does not show through above the content….this is in lieu of the semi-transparent panel behind the content….I want to be certain that the font is dark and (already) large enough for this change
  • Align the columns better so that the poll does not interfere with the content , and the home page gallery will be centered, changed in the module some more to work on this page better – or shuffled to an inside page with 2 columns
  • Figure out how to get this to validate on W3C CSS

Resources

  1. Toolbox tutorials from Smashing Magazine
  2. Blue Water Template – I only used the image for this, not the template
  3. 6 Ways to Take Your WebDesign from Good to Great
Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: