In the part 1 we discussed setting up and getting ready for re-skinning an Ablecommerce theme. We decided how we want our new theme to look like when completed. We learned what is required to get started with re-skinning and we learned how to create a new theme by creating a copy of an existing theme.

In this article we will learn how to re-skin the header section of our theme and how to make the header look like the header of our new design – ‘Furniture Store’.

By now we have a new ‘Furniture Store‘ folder under ‘App_Themes‘ in our AC7 installation. Here we have various .css and .skin files along with a folder ‘images’.  The most important file that we are concerned with is style.css.  This is the file we will be editing the most.

Starting the conversion

I recommended that the re-skinning be done in this order – start from header then side-bars and then the main content. Conversion should first be done for the home page and then we can convert the other pages as well.

Before we start converting the header, one thing that we usually need to take care of is the background and body of the overall theme. We will start by adjusting the CSS for the body tag first. Here is how the CSS is defined for body tag in style.css file

“Glass_olive” theme from which we copied this had a body with simple white background. Our theme, “Furniture Store” however will have a textured background so we convert the CSS for body tag.

Let’s do this by following these steps

• Cut/copy the pattern image from your design and save it in images folder.
• In style.css file modify the body class by making the following changes
  • set “width” to “934px” as it is the exact width of the Furniture Store theme
  • eliminate page margins from top and bottom sot that it sticks
  • margin for left and right are set to ‘auto’
  • set the background as image pattern

Converting the Header

The header section of our new theme is supposed to look like this when completed.

Things to note

• The header contains background image as well as logo on the left side
• The header contain tabs (i.e; admin, basket e.t.c) as well as search button and input-text box
• The header contains a background image of navigation menu as well as the text of  horizontal menu

Converting background Image and Logo

• Cut the logo from Furniture Store’s design and just replace the logo image (i.e; “Glass_olive” logo image) with this new logo (i.e “Furniture_store” logo) in images folder
• In order to change the header’s background, first cut the background image of desired size but in this case 1×99, and replace this image with “header_bg” image. Modify the CSS for #storeHeader identifier from

  

  to

  

  What we changed is that the header has 10px wide white borders on left and right side now.

Converting tabs and search bar

First to convert the tab images of “Glass Olive” into that of  “Furniture Store”. Follow these steps for conversion

• Cut the tab image from “Furniture Store” having no text because text will be modified through “style.css” file. Just replace the image named as “button_topBg.gif” in ‘images’ folder with this new image.

  

• Cut the tab hover image from “Furniture Store” design and just replace the image named “button_topBghover.gif” in images folder.

  

• For the exact placement of tabs, the gap between the tabs and the text on the tabs you have to modify these CSS elements in “style.css”

  
  for tabs (left, right padding)

  Sometimes the top tabs have the size larger than default tabs. In this case to re-size the container you have to modify the corresponding css. We do this for “Furniture Store” as follows.

  
  

  For text on tabs (i.e text_links) here is the CSS

  

  On hover we want the background to change and font to get more prominent.

  

• Next for handling the search bar area, cut the search button image with no text on it from from the design and just replace the image named “search_btn2.gif” in images folder. Also cut the hover image (i.e mouse over hyperlink) for search button if there is one. In our case we have no hover image.
  Next modify these classes for search button

  
  for search container you may set the height and width of the container and other features as well

  
  modify this class for input text box set its background color, border and width e.t.c. as needed

  

  Sometimes the problem arises when displaying the search button and you can sometimes get them fixed by setting appropriate the values for “padding”.

Converting Navigation Menu

Follow these steps to get the navigation menu converted

• Cut the arrow image from “Furniture Store” design and replace the image named as “blueDots.gif” in the images folder.    (arrow image)
• Cut an image for the navigation background for navigation menu bar from “Furniture Store” design and replace the image named as “storeHeader_navigationBG.gif” with this image
• Modify the following CSS as follows

  

  The above class present the navigation container. I have set the width, height and border styles to match the “Furniture Store” theme.

• You may also modify the following CSS elements for navigation menu text, on mouse over effects and its placement.

  
  (for setting the margins left right, top and bottom)

  
  (modified for menu text color, distance between the text and the arrow, font-styles, font-weight e.t.c)

  modified class for on mouse over effect

  

  The background image is eliminated because I have just need to change the text color on mouse over.

Once all the above changes are made your header will start looking like this