Why: We do not need spacing or padding as we will be doing this in the stylesheet.css Amend from this (approx line 35): | to this: | Why: We have only added a stylesheet class “left-column” - to allow us to give the column some style. Amend from this (approx line 35): to this: Why: We do not need padding as we will be doing this in the stylesheet.css Amend from this: | to this: | Why: We have only added a stylesheet class “main-content” - to allow us to give the main content area some style. Note that the file index.php requires you to do this in three places!
Page 9
And finally, remove this (found immediately before the ending tag):
Why: We will be able to replicate this (if required) using the file stylesheet.css You must do this for each and every main .php file. Save and upload them. Don't worry too much about the reasons why we made those changes – I'll be going into more detail about that later on in this book.
Helping You: If you don't have the time to make these changes, please download the file http://octave.netfirms.com/samples/pages.zip where the changes have been made for you as required. Overwrite the existing files you have in your Store with the files in the .zip – it would obviously be better for you to do the changes yourself as you will become more familiar with Oscommerce code by doing it yourself.
Now you have a very poorly looking Store, but we will remedy this, don't worry about it. As of right now, your Store should look like this:
Page 10
Reducing the Width of each page to fit our design Thinking of a Magazine page, it's about A4 paper size, so let's add in some code to fix the Store Width and to allow us to center the shop into the middle of the page. Open up: /includes/header.php and add the following code right at the very start of the file: | Open up: /includes/footer.php and add the following code right at the very end of the file: | What we have said using this code is: 1. Put the whole contents of the Store into a table fixed at 760 pixels wide (this is approximately the width of an A4 page) 2. Align it to the center of the page. Save those two files and upload them into the correct directory. Your site should now look like this:
Page 11
Page 12
Making the Left Hand Column Wider What we now need to do is make our Left Hand Side Column a little wider, as you can see the Magazine Advert Left Column is approximately ¼ the width of the full page. Remember that we have set our page to 760 pixels wide, so ¼ of that is 190. You should open up: /includes/application_top.php Amend the following code (approx line 63): define('BOX_WIDTH', 150); // how wide the boxes should be in pixels (default: 125) to this: define('BOX_WIDTH', 190); // how wide the boxes should be in pixels (default: 125) Save the file and upload it to your Store. Whilst we are looking at the Left Hand Side Column, let's also give it some style using our Stylesheet. If you look back through this eBook, you'll see that we amended the Left Hand Side Column code to add in an extra stylesheet call: left-column Open up stylesheet.css in your favourite text editor, and add the following code: .left-column { background: #cccccc; padding: 10px; } Note that whenever you create a style in your HTML code (eg class=”leftcolumn”) then you must use the exact same name in your stylesheet, but put a period (dot, full stop etc) in front of it, like this: .left-column Save the file [ stylesheet.css ] and upload. Refresh your Store a few times for those stylesheet changes to kick in. Your site should now look like this:
Page 13
As you can see the changes we made to the stylesheet have given our Left Hand Column a background colour! Easy, isn't it :) However, because of the way that Oscommerce is coded, the InfoBoxes (example categories.php, manufacturers.php etc) all over-ride the Left Hand Column background that we just made so they still look quite awful :( But it's not a major problem and is something we will amend very shortly. We are doing pretty well so far! Let's have a Pit Stop. Time for a coffee and a recap of what we have done so far. We've made a lot of code changes • Removed the Right Hand Side Column • Removed some unwanted Code • Added in some extra Code to allow us to set style • Made the Shop a fixed width and horizontally centered it • Changed a setting in the stylesheet.css to give the Left Column some style. We actually haven't done all that much to be honest – but you can already see that it is starting to look not so like Oscommerce! Good work so far! What's next?
Page 14
Recoding the InfoBoxes Let's start changing some code to allow us to give the side InfoBoxes some style! The problem here is that we need to make our “side” InfoBoxes differently to our other InfoBoxes (eg “New Products for...” box). This is pretty easy :), all you need to do is open up: /includes/classes/boxes.php And add the following code at the very end of the file before the ?> tag: class SideinfoBoxHeading extends tableBox { function SideinfoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) { $this->table_cellpadding = '0'; $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif'); if ($right_arrow == true) { $right_arrow = '' . $contents[0] ['text'] . ' »'; } else { $right_arrow = $contents[0]['text']; } $right_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif'); $info_box_contents = array(); $info_box_contents[] = array('params' => 'width="100%" class="SideinfoBoxHeading"', 'text' => $right_arrow); $this->tableBox($info_box_contents, true); } }
Save the file.
Page 15
Now add the following code to the exact same file, again making sure you add it directly before the final ?> tag: class SideinfoBox extends tableBox { function SideinfoBox($contents) { $info_box_contents = array(); $info_box_contents[] = array('text' => $this>SideinfoBoxContents($contents)); $this->table_cellpadding = '0'; $this->table_parameters = 'class="SideinfoBox"'; $this->tableBox($info_box_contents, true); } function SideinfoBoxContents($contents) { $this->table_cellpadding = '0'; $this->table_parameters = 'class="SideinfoBoxContents"'; $info_box_contents = array(); $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1'))); for ($i=0, $n=sizeof($contents); $i<$n; $i++) { $info_box_contents[] = array(array('align' => (isset($contents[$i]['align']) ? $contents[$i] ['align'] : ''), 'form' => (isset($contents[$i]['form']) ? $contents[$i]['form'] : ''), 'params' => 'class="boxText"', 'text' => (isset($contents[$i]['text']) ? $contents[$i]['text'] : ''))); } $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1'))); return $this->tableBox($info_box_contents); } } What we have done here is create an extra portion of code to allow us to differentiate between a “side” infoBox and a “normal” infoBox.
Page 16
Now you must open up each of the infoBox files found in /includes/boxes/ and change the following code: new infoBoxHeading to: new SideinfoBoxHeading And: new infoBox to: new SideinfoBox We do this in order to tell our InfoBoxes to create themselves using the new code we just added to /includes/classes/boxes.php Once you have done that, your site should look like this:
However, something has gone wrong as the Headings of our side InfoBoxes have lost their style !! In fact not only the Heading of each InfoBox has lost it's style, but also the Contents of each InfoBox as well !!!
Page 17
Don't worry, it's nothing major, this is exactly what we wanted to happen as we will now look to amend both the Heading and Content Area of the InfoBoxes using the file stylesheet.css. Giving the InfoBoxes some Style Now we open up stylesheet.css and amend the style which control how the side InfoBoxes look. Simply add the following piece of code: .SideinfoBox { background: #cccccc; } Why: This is to match the colour of the Left Hand Column Background. Now find: .boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; } Change it to: .boxText { font-family: Verdana, Arial, sans-serif; } Why: We will be controlling the font size elsewhere in the stylesheet :) Now add the following code (to stylesheet.css): TD.SideinfoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; background: #cccccc; color: #000000; font-variant: small-caps; } Also add the following code (to stylesheet.css): .SideinfoBoxContents { background: transparent; font-family: Verdana, Arial, sans-serif; font-size: 0.8em; line-height: 1.5; }
Page 18
After making these changes, your site should now look like this:
As you can see, making the changes in the stylesheet has made our left hand column fall into place :) The only thing in there that looks not so good is the small “magnifying glass” image that powers the Search InfoBox. Don't worry about this for now, as we will be removing the Search InfoBox into the Header Area a little later on in this tutorial. At least now we have made our Left Hand Side Column look really great! We are slowly but surely getting there :)
Page 19
Giving the Main Contents Area some style Let's now look at the Main Content Area. We need to give it a bit of room to breath and also a background colour. Open up stylesheet.css once again, and add the following code: .main-content { background: #fafafa; padding: 10px; } This gives our Main Content Area (remember we set it up to use the stylesheet class “main-content” when we made the changes to all of our main .php files) some padding (room for it to breath) and a nice light grey background colour. Easy, isn't it ? :) And now your Site should look exactly like this:
Page 20
Recap Let's take another Pit Stop. We're doing well so far, though the Header Area still looks very much like Standard Oscommerce :( Let's change that next, but first it's time for recap and a coffee. What have we done so far; We've made a lot of code changes: • Removed the Right Hand Side Column • Removed some unwanted Code • Added in some extra Code to allow us to set style • Made the Shop a fixed width and horizontally centered it • Changed a setting in the stylesheet.css to give the Left Column some style. Since our last Pit Stop, we've also done the following: • Added some new code to allow us to change "side" InfoBoxes without changing any other InfoBoxes • Made subtle changes to each "side" InfoBox file to allow the use of our new code • Added extra Stylesheet classes to give those new InfoBoxes some style • Given the Main Content Area some space! It's starting to look pretty good!
Page 21
Changing the Header Area to our own design Let's take it one step further away from standard Oscommerce by adding in our own Header Graphic. What you need to do is make (or find) yourself a Graphic to use. It needs to be 760 pixels wide (remember this is the width of our site that we set in includes/application_top.php). I got a Graphic from www.istockphoto.com you can see a small version of it here:
We could simply use it as it is now: Save the image into the /images/ folder as filename: logo.jpg Then open up the file: includes/header.php and find this code:
Page 22
Change it to this: | ' . tep_image(DIR_WS_IMAGES . 'logo.jpg', STORE_NAME) . ''; ?> | Which would make our Store look like this:
But, in my opinion that makes the Header Area look too “blocky”. Also, note that the Breadcrumb still looks very “Oscommerce” - don't get concerned about this as we will be amending this very shortly! :)
Page 23
Let's make some subtle changes to the Header Graphic (just to make it look more pleasant): 1. Cut around a portion of the SunFlower and give it the same colour background as the Left Column. (This will give the effect of the Flower “bleeding” into the column). 2. Put on some Text (perhaps our Stores strap-line) 3. Put on a small Logo 4. Create an area for our “Breadcrumb” element (see below) Once you have made these changes, you should save the new Image as logo.jpg into the /images/ directory. You are basically overwriting that awful blocky image that we started with. Now the Header Area looks like this:
Which looks much better! Of course, when you make new designs, you might decide to do none of these things to the Header Graphic! It's up to you, and your choice should be based on what you think looks right for the products or services you are selling.. If you are not much good at graphics then I recommend polishmypixels.com who will be able to make you a great Logo or Graphic designed to your requirements! Anyway, once you have a graphic in place, we need to put in some extra elements to overlay it...the extra elements we want to use within the Header are: 1. The Search InfoBox 2. The Languages Flags InfoBox 3. The Store “Breadcrumb” (top >> catalog etc etc) Because of the way that Oscommerce is coded it isn't possible to just overlay
Page 24
these directly on top of the Image we created. So what we must do is decide whereabouts we want to place those 3 elements. I will create a simple graphic to show you where I want my elements...
Remember this is simply a graphic made by me to show you the approximate positions where I want my elements. You can see that what I am trying to achieve is; 1. 2. 3. 4. Remove the Grey & White Breadcrumb. Add in a black text Breadcrumb Add in the languages flags (near the small logo) Add in a Search InfoBox in the top right hand corner of our page
We now need to to do for real! It's pretty straightforward, basically all I need to do is slice up the completed Header Graphic up appropriately (see the illustration below).
To do something like this, does take some graphics and HTML skill, but I will try to explain exactly what I have done.
Page 25
Graphics Changes: I have sliced the graphic into 5 parts: logo_1.jpg (the main sunflower area) logo_2.jpg (a portion of sky that is large enough [width: 455px and height: 79px] to hold the Search InfoBoxes logo_3.jpg (another portion of sky that is large enough [width: 455px and height: 78px] to hold the languages flags. logo_4.jpg (the strapline and logo image) logo_5.jpg (an area of the image which will hold the breadcrumb) I saved all of these new graphic slices into the /images/ directory, ready for use! Then you have to build a HTML table to contain your graphic slices...this is intermediate HTML skill – if you are uncertain how to create a table, then you should take a look at www.htmlgoodies.com which has a number of great tutorials! The actual HTML code for the table we need to use on this design is: You will see that the table does not include all of the slices we made as simple graphic tags “ | | ' . tep_image(DIR_WS_IMAGES . 'logo.jpg', STORE_NAME) . ''; ?> | and replace it with this:  | |
Page 27
|  | | Save and upload the file. Now your site should look like this:
As you can see, it looks no different to the example graphic I made above, but it does have 1 very large difference. I am easily able to write text on top of the 3 areas of image that we set in the stylesheet.css !! For an example of this, open up /includes/header.php and find the following line of code: | Change it to: Hello, this is a line of text and is pretty much where we want the Breadcrumb to be located! | Save that, and look at your Store again, now it should look like:
Page 28
You can see the text we added has overlayed the image! Don't worry that it looks unformatted, as we'll be changing that shortly...I hope that you can see where we are going with this :)
Page 29
Moving the BreadCrumb into our Design So, let's place that awful grey/white breadcrumb into our breadcrumb area. This is simple. If you open up /includes/header.php you will see that the original Oscommerce breadcrumb area is coded like this: The actual only part we need is: trail(' » '); ?> as this creates the breadcrumb trail automatically! So, find the following line of code: Hello, this is a line of text and is pretty much where we want the Breadcrumb to be located! | And change it to: trail(' » '); ?> |
Page 30
Of course, the links in the Breadcrumb Area are white – we'd like them to be black. So open up stylesheet.css and find: A.headerNavigation { color: #FFFFFF; } Change this to: A.headerNavigation { color: #000000; } Also find: A.headerNavigation:hover { color: #ffffff; } and change to: A.headerNavigation:hover { color: #000000; } Now we have black text Breadcrumb, that also has an underline when you “mouseover” it. However, it is still unstyled text, so what we need to do (remembering that this is inside the style “breadcrumbarea”, is find: .breadcrumbarea { background-image: url(images/logo_5.jpg); width: 760px; height: 28px; } and change it to: .breadcrumbarea { background-image: url(images/logo_5.jpg); width: 760px; height: 28px; padding-left: 220px; font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; } Now you can remove the old Oscommerce Breadcrumb Area entirely, so find the following code and delete it:
Page 31
After doing this your site Header Area should look like this:
As you can see, this gives our Breadcrumb text a better style, and has also shifted it towards the right by 220 pixels (which if you remember was approximately where we wanted the Breadcrumb to begin on our example graphic). And that is it – we've completed the Breadcrumb into our design!
Page 32
Recap Since our last recap, we've: • Created a great looking Header Area Graphic • Sliced it up to allow us to add in the extra elements we need • Added in the Breadcrumb to our design! • Given that Breadcrumb some style and positioned it • Removed the standard Oscommerce Breadcrumb entirely We are doing very well so far. What's next? We still need to place the Languages Flags and the Search Box (and maybe also use some .css trickery to make them look good)...once we have done these two extra things, we will have completely finished the Header Area!
Page 33
Moving the Languages Box to the Header What we want to do is re-create the Languages InfoBox into the Header Area – this is quite easily done if you take it step by step. Step 1: Create a new file named header_languages.php which should contain only the following lines of code: Save this into the folder /includes/boxes/ Step 2: Open up /includes/boxes/languages.php and copy the following lines of code: if (!isset($lng) || (isset($lng) && !is_object ($lng))) { include(DIR_WS_CLASSES . 'language.php'); $lng = new language; } $languages_string = ''; reset($lng->catalog_languages); while (list($key, $value) = each($lng>catalog_languages)) { $languages_string .= ' ' . tep_image (DIR_WS_LANGUAGES . $value['directory'] . '/images/' . $value['image'], $value['name']) . ' '; } $info_box_contents = array(); $info_box_contents[] = array('align' => 'center','text' => $languages_string); Step 3: Open up the file you made in Step 1, and paste the code you copied in step 2, immediately before the ?> Save it (remember you are saving it as header_languages.php) Step 4: Once you have that new file saved, open it up and find the following line of code:
Page 34
$info_box_contents[] = array('align' => 'center','text' => $languages_string); Change it to: echo $languages_string; Save it. Step 5: Open up /includes/header.php and find the following code: | Change it to: | Save it! Step 6: Now we need to set the style and position of the Flags, by opening up stylesheet.css and finding: .languageboxarea { background-image: url(images/logo_3.jpg); width: 455px; height: 78px; } Change it to: .languageboxarea { background-image: url(images/logo_3.jpg); width: 455px; height: 78px; vertical-align: bottom; padding-right: 5px; } Save it as stylesheet.css - and now we have our Languages Flags integrated as part of our design – your Header Area should now look exactly like this:
Page 35
Great Stuff. We now need to do this all over again for the Search Box... Moving the Search Box into the Header Step 1: Create a new file named header_search.php containing the following code: Save this into the folder /includes/boxes/ Step 2: Open up /includes/boxes/search.php and copy the following lines of code: $info_box_contents = array(); $info_box_contents[] = array('text' => BOX_HEADING_SEARCH); new SideinfoBoxHeading($info_box_contents, false, false); $info_box_contents = array(); $info_box_contents[] = array('form' => tep_draw_form('quick_find', tep_href_link (FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'),'align' => 'center','text' => tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH30) . 'px"') . ' ' . tep_hide_session_id () . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '
' . BOX_SEARCH_TEXT . '
' . BOX_SEARCH_ADVANCED_SEARCH . ''); Step 3: Paste the code you copied in step 2 into the file you created in step 1, directly before the ?>
Page 36
Step 4: Code changes to the new file (header_search.php) Find: $info_box_contents = array(); $info_box_contents[] = array('text' => BOX_HEADING_SEARCH); Replace with: echo '' . BOX_HEADING_SEARCH . '
'; Find: new SideinfoBoxHeading($info_box_contents, false, false); Remove it! Find: $info_box_contents = array(); Remove it! Find: $info_box_contents[] = array('form' => tep_draw_form('quick_find', tep_href_link (FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'),'align' => 'center','text' => tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH30) . 'px"') . ' ' . tep_hide_session_id () . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '
' . BOX_SEARCH_TEXT . '
' . BOX_SEARCH_ADVANCED_SEARCH . ''); Change it to: echo tep_draw_form('quick_find', tep_href_link (FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'); echo tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit ('button_quick_find.gif', BOX_HEADING_SEARCH); echo '';
Page 37
Find: new SideinfoBox($info_box_contents); Remove it! Step 5: Open up includes/header.php and find this line of code: | Change it to: | Step 6: Open up stylesheet.css and find the following code: .searchboxarea { background-image: url(images/logo_2.jpg); width: 455px; height: 79px; } Change it to: .searchboxarea { background-image: url(images/logo_2.jpg); width: 455px; height: 79px; vertical-align: top; padding-right: 5px; font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; } Overview: What we have done is recode the Search Box to suit our design and placed it into the Header Area. Now we don't need the Search Box in the Left Hand Side Column, so open up /includes/column_left.php and remove the following code: require(DIR_WS_BOXES . 'search.php'); You'll also notice that we still have that awful Magnifying Glass Icon. Let's replace that for starters! Create yourself a nice Search icon, name it button_quick_find.gif and upload it to: includes/languages/english/images/buttons/
Page 38
I like this one: So that's what I'll use. You'll need to also save this as the same name into each of your other languages (German, Spanish etc) if you use multiple languages. The Header Area is now fully completed, and your site should now look somewhat like this:
Our Header Area now has all the elements we wanted to show. We're going to move onto the Footer now.
Page 39
Changes to the Footer Area The first thing we want to do is remove the Oscommerce Banner. This is quite simply a setting in your Admin Area. Go to: admin > tools > banner manager and click the small pink circle to turn the Banner off. What do we want to do with the Footer; 1. Obviously we want to make the Footer area look part of the design. 2. We want to remove the useless counter 3. We want to remove the date – I am positive that most people know what date it is! 4. We want to move the “Copyright and Powered” text into the Footer Area. All pretty straightforward. Open up /includes/footer.php and find the following code: Change this to: Save and upload the footer.php file. In your favoured graphics program, open up the file logo_5.jpg and colour out the SunFlower areas to #cccccc; Once you have done this it should look like:
Save this newly created graphics file as “footerbg.jpg” and upload to the /
Page 40
images/ folder. Open up /includes/languages/english.php and find the following code: define('FOOTER_TEXT_BODY', 'Copyright © 2003 osCommerce
Powered by osCommerce'); Change this to: define('FOOTER_TEXT_BODY', 'Copyright © 2004 ' . STORE_NAME); Repeat for each Language you use. Now open up stylesheet.css and add the following code: .footerarea { background-image: url(images/footerbg.jpg); width: 760px; height: 28px; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: normal; color: #575757; padding: 5px; } Save this. Now open up /includes/footer.php once again and find the following portion of code: Change this to: And find the following portion of code:
Remove it! Now your Store is looking really good.
*/
Page 42
Wrapping Up I'm thinking that it might be nice to enclose the store inside a “box”. You'll notice that in the file /includes/header.php we have an unused stylesheet class named “outline” - we're going to use this to create a left and right border that extends down the full height of our shop. We are going to match the border to the “rust brown” colour of our logo! So open up stylesheet.css and add: .outline { border-top-width: 0px; border-bottom-width: 0px; border-right-width: 1px; border-left-width: 1px; border-style: solid; border-color: #663300; } This should be fairly self-explanatory! Also, the Page Headings are still standard Oscommerce. We can change that by opening up stylesheet.css and finding the following code: TD.pageHeading, DIV.pageHeading { font-family: Verdana, Arial, sans-serif; font-size: 20px; font-weight: bold; color: #9a9a9a; } Change it to: TD.pageHeading, DIV.pageHeading { font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: bold; color: #663300; font-variant: small-caps; } I've also noticed that most of our links change to an awful grey colour when you place your mouseover them. Test this out on one of the Information InfoBox links. We can easily change this by finding: A:hover { color: #AABBDD;
Page 43
}
text-decoration: underline;
and changing it to: A:hover { color: #000000; text-decoration: underline; } In this particular design, I don't really need the Manfacturers InfoBox, but I do need the Shopping Cart & Order History InfoBoxes. So open up / includes/column_left.php and remove this code: if ((USE_CACHE == 'true') && empty($SID)) { echo tep_cache_manufacturers_box(); } else { include(DIR_WS_BOXES . 'manufacturers.php'); } And add this code in it's place: require(DIR_WS_BOXES . 'shopping_cart.php'); if (tep_session_is_registered('customer_id')) include(DIR_WS_BOXES . 'order_history.php');
Page 44
Your site should now look like this:
We now need to do something with that “New Products for...” Box. There are a number of great contributions to allow you to put something in there that is much better that the standard Oscommerce Box. I like my own piece of code, which you can get from http://www.oscbooks.com/samples/new_products.zip You must follow the instructions as set out in that .zip file for it to work as intended!!! It's very important for you to take your time doing that. Adding in that code has made the page very long, so we need to go back into our Admin section and action the following: admin > configuration > maximum values > new products module > edit > { set to 3 } > update Next open up stylesheet.css and find the following: .infoBox { background: #b6b7cb; } Change it to: .infoBox { background: #cccccc;
Page 45
} Find: .infoBoxContents { background: #f8f8f9; font-family: Verdana, Arial, sans-serif; font-size: 10px; } Change to: .infoBoxContents { background: #fafafa; font-family: Verdana, Arial, sans-serif; font-size: 12px; } Find: TD.infoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; background: #bbc3d3; color: #ffffff; } Change it to: TD.infoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; background: transparent; color: #000000; } What we have done here is make the Boxes in the pages the same background colour as the background of the page (#fafafa), and the border of those boxes the same colour as the Left Hand Side Column (#cccccc). There are only a few more changes to make. In stylesheet.css, find this: TABLE.productListing { border: 1px; border-style: solid; border-color: #b6b7cb;
Page 46
}
border-spacing: 1px;
.productListing-heading { font-family: Verdana, Arial, sans-serif; font-size: 10px; background: #b6b7cb; color: #FFFFFF; font-weight: bold; } And change it to: TABLE.productListing { border: 0px; border-style: solid; border-color: #cccccc; border-spacing: 1px; } .productListing-heading { font-family: Verdana, Arial, sans-serif; font-size: 12px; background: #fafafa; color: #000000; font-weight: bold; } This gives style to the Shopping Cart Listings (and other listings).
Page 47
Now our Shop looks like this:
You'll notice we still have those awful blue buttons, so we must find a new button set. The nicest looking buttons I have come across are available at: http://www.oscommerce.com/community/contributions,1684 (courtesy of Joel McLaughlin). Download and follow the instructions of how to install them – it's basically just a case of overwriting the old Buttons! Easy – but remember not to overwrite the file: button_quick_find.gif as that is one we made earlier on in this eBook. Of course you can use any button set that you like! Whatever goes best with your design.
Page 48
1 more thing I don't like is those awful “clipart” graphics on each page. These are simple to remove – all you need do is delete them from your webspace totally. So just delete all the files inside the folder /images/ that begin “table_”. Then go into admin > configuration > images > and action the following: Small Image Height 0 Heading Image Height 0 Subcategory Image Height 0 Calculate Image Size true Image Required false If you've basically done everything in this eBook, then your Store should now look somewhat like this:
We just need to do one more thing, and that is compare our finished Site to the Magazine Advert. If they are almost identical, then there is no way we could ever use this site (as we might be accused of copying). You can plainly see that
Page 49
there is really very little similarity between the two – so in my opinion, what we have made here would be fine to use for a live Oscommerce site! You've learned a lot of skills. I hope that I have given you the confidence to take any design and integrate it to Oscommerce. When making a new design, you should always; 1. Make broad brushstrokes first. Get your layout in place. 2. And then make detailed changes as required. Of course, you can now move forward and utilise the skills that this book has given to you. As a very quick example, I decided that the Product Pages look a little too much like Oscommerce, particularly in the content area. So what I did was add a border around the Product Image, like this:
How did I do this? I found a nice “Sun Flower” border image over at www.istockphoto.com. Then I reduced it in size to allow it to easily contain the small Product Image, and saved it as borderbg.gif into the /images/ folder.
Page 50
I then opened up product_info.php and found this code: | And changed it to this: | I have marked the changes in bold, to allow you to see more easily the extra piece of code! Now open up stylesheet.css and add this code: .border-background { background-image: url(images/borderbg.gif); width: 149px; height: 149px; padding-top: 22px; } Save it and refresh a product page, and you now have a border around your image. How easy is that? Go on, give it a try.
GOOD LUCK with your Oscommerce Sites in the future!
Page 52
Appendix of Sites Recommended CSS Tutorial: http://www.w3schools.com/css/default.asp Recommended HTML Tutorials: http://www.w3schools.com/html/default.asp http://www.htmlgoodies.com Useful osCommerce Sites: http://www.oscommerce.com http://www.oscommerce.info http://forums.oscommerce.com Recommended Commercial osCommerce Sites: http://www.oscommerce-templates.co.uk Recommended Graphics Sites: http://www.polishmypixels.com http://www.istockphoto.com
Page 53
Daniel Toriola
Management Consultant
Learning Success Assoc...
contact me
About Sharing ideas with others. The documents may contain basic information you already know. The documents are shared, also keeping in mind the people who don't know. Also, the documents might be useful to those who think they know bu (More...)y they don't know that they don't know.
|