Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Modifying the layout


UnoBJ

Recommended Posts

Hi.

 

At the moment my OsCommerce store lookes like THIS.

 

And i would like it too look like THIS.

 

Notice the InfoBoxes, i want them to be stuck togheter like one big menu.

I've looked in the StyleSheet.css but i cant fint the cellspacing options.

 

Where do i change this?.

 

Thanks in advance // UnoBJ

Link to comment
Share on other sites

I checked that .php file and found.

  class tableBox {
   var $table_border = '0';
   var $table_width = '100%';
   var $table_cellspacing = '0';
   var $table_cellpadding = '2';
   var $table_parameters = '';
   var $table_row_parameters = '';
   var $table_data_parameters = '';

And i set cellpadding to "0" but no effect, is it hidden in the document?.

If so, where? :S... (not good at PHP).

Link to comment
Share on other sites

Keep looking on the page, there is more than one table setting.

Wendy James

 

Creativity is allowing yourself to make mistakes. Art is knowing which ones to keep.

Link to comment
Share on other sites

You can edit every single .php file in your main folder to achive this...

 

example from products_info.php

 

  <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">

 

change to:

 

 <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="0">

Link to comment
Share on other sites

Many thanks man, that helped alot (even though it was alot of .php files to edit ^^).

 

Anyway, I've got one more question.

Take a look at THIS picture.

 

As you can se the whole left menu (left columm) is aligned exactly below the "header navigation", it is also aligned perfectly to the left.

 

At the moment my Webshop looks like THIS. Theres a space about 5 pixels thick between the left columm and the header_navigation and the left side. I Would like to get rid of that glitch, is that possible?.

Link to comment
Share on other sites

Many thanks man, that helped alot (even though it was alot of .php files to edit ^^).

 

Anyway, I've got one more question.

Take a look at THIS picture.

 

As you can se the whole left menu (left columm) is aligned exactly below the "header navigation", it is also aligned perfectly to the left.

 

At the moment my Webshop looks like THIS. Theres a space about 5 pixels thick between the left columm and the header_navigation and the left side. I Would like to get rid of that glitch, is that possible?.

 

In every .php file again.... :lol:

 

You can adjust it in this line...

 

<table border="0" width="100%" cellspacing="3" cellpadding="3">

Link to comment
Share on other sites

Thanks alot (Again!).

 

But theres one little prob with this, in order to get it perfectly aligned i must set cellpadding and cellspacing to "0". But that causes everything in the middle columm to move to the left right beside the left columm.

 

Take a look at THIS picture and you will see what i mean (red circle to the left).

 

Is this something i would have to deal with in order to get the menu aligned or can i make the stuff in the middle move about 5 pixels to the right?.

 

Once again, thanks for helping me out, its really appriciated!.

 

// UnoBJ.

Link to comment
Share on other sites

Thanks alot (Again!).

 

But theres one little prob with this, in order to get it perfectly aligned i must set cellpadding and cellspacing to "0". But that causes everything in the middle columm to move to the left right beside the left columm.

 

Take a look at THIS picture and you will see what i mean (red circle to the left).

 

Is this something i would have to deal with in order to get the menu aligned or can i make the stuff in the middle move about 5 pixels to the right?.

 

Once again, thanks for helping me out, its really appriciated!.

 

// UnoBJ.

 

Insert a 5px spacer table after the the left column table.

Link to comment
Share on other sites

In which PHP document should i do that?.

 

left_column.php or in every .php document in the /catalog/ dir?.

 

I've tried adding in the .php files in the /catalog/ dir but i think im placing the table at the wrong place because it seriously messes upp the layout. Where should i place it?.

Link to comment
Share on other sites

I fixed it now, i added a <table width="5"> instead of a <td width="5">, that was the problem... Thanks alot.

 

EDIT: Okay, since you seem to be an living OsCommerce database i might as well ask some more questions :rolleyes: .

 

How do i get rid of the stupid pictures marked with an red circle on THIS picture?...

Link to comment
Share on other sites

You can add it to includes/column_left.php or you can place a gif in the width you want the space to be in , but then again in every .php file.

 

If you do you can put it after the call for the left column.

 

<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

Link to comment
Share on other sites

Well, im gonna go sleep soon so i thought i could throw in more question and the answer might be there as a pleasant suprise when i wake up in the morning :D...

 

At the moment my shop looks quite good, but theres are som more tweaks i would like to add. First, now the meny is perfectly aligned to the left and top but I would like to get rid of the header in the "Categories-menu".

 

Take a look at THIS picture, if you look att the categories menu in the left column you can see that the header is gone, i think it looks real neat.

 

At the moment my shop looks like THIS, the header in the categories menu is there. I cant really see how to get rid of it without removing all the menu-headers...

 

Figure it out and you will advance to level 8 :thumbsup: ...

Link to comment
Share on other sites

Well, im gonna go sleep soon so i thought i could throw in more question and the answer might be there as a pleasant suprise when i wake up in the morning :D...

 

At the moment my shop looks quite good, but theres are som more tweaks i would like to add. First, now the meny is perfectly aligned to the left and top but I would like to get rid of the header in the "Categories-menu".

 

Take a look at THIS picture, if you look att the categories menu in the left column you can see that the header is gone, i think it looks real neat.

 

At the moment my shop looks like THIS, the header in the categories menu is there. I cant really see how to get rid of it without removing all the menu-headers...

 

Figure it out and you will advance to level 8  :thumbsup: ...

 

In includes/boxes/categories.php

 

Delete or comment out this code:

 

$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

 new infoBoxHeading($info_box_contents, true, false);

Link to comment
Share on other sites

However these links do help the customer know where he is and aid navigation which is usually the main priority in a shopping cart.

 

Personally I wouldn't remove them for aesthetic reasons.

Link to comment
Share on other sites

Man u are simply the best :D...

 

One more (...).

 

Can i remove the pictures marked with a red circle, u can see it on THIS picture.

 

2 ways...

 

1. go into every .php file where this picture shows ( again :lol: )

 

And remove this line: (Example is from create_account.php)

 

 <td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_account.gif', HEADING_TITLE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>

 

 

2. Or use this contribution Remove Default Image

Link to comment
Share on other sites

Those are all located in catalog/images, named table_background_???.gif

 

Rather than finding all the php files where they're referenced, you could just replace those images with a copy of pixel_trans.gif (a transparent gif also in the catalog/images directory), renaming each copy with the same name as the file you want to replace.

 

For instance, rename table_background_account.gif to old-table_background_account.gif so that you can restore if you need to. Make a copy of pixel_trans.gif, and call it table_background_account.gif. Move that copy to your catalog/images directory.

Link to comment
Share on other sites

Those are all located in catalog/images, named table_background_???.gif 

 

Rather than finding all the php files where they're referenced, you could just replace those images with a copy of pixel_trans.gif (a transparent gif also in the catalog/images directory), renaming each copy with the same name as the file you want to replace.

 

For instance, rename table_background_account.gif to old-table_background_account.gif so that you can restore if you need to.  Make a copy of pixel_trans.gif, and call it table_background_account.gif.  Move that copy to your catalog/images directory.

 

The contibution "Remove default images" does just that, it contains all these pictures already made, you then just upload them to the images folder.

Link to comment
Share on other sites

That worked very well, thanks both of you (you are now level 8!).

 

I wonder one more thing, when i click on a category alot of images of SubCatergories displays. I dont want this function, i think its very unnecessary for my webshop since we wont have many SubCategories.

I tried replacing those pics with the transparent one but it still displays the SubCategories name under the transparent pictures. I would like to get rid of that, i guess the function is in a .php file but where? :S...

Link to comment
Share on other sites

That worked very well, thanks both of you (you are now level 8!).

 

I wonder one more thing, when i click on a category alot of images of SubCatergories displays. I dont want this function, i think its very unnecessary for my webshop since we wont have many SubCategories.

I tried replacing those pics with the transparent one but it still displays the SubCategories name under the transparent pictures. I would like to get rid of that, i guess the function is in a .php file but where? :S...

 

its in index.php

Link to comment
Share on other sites

I commented this line ("//" in front of it to make it a comment)

      // echo '                <td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>' . $categories['categories_name'] . '</a></td>' . "\n";

 

Was that the correct one?.

Link to comment
Share on other sites

I commented this line ("//" in front of it to make it a comment)

      // echo '                <td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>' . $categories['categories_name'] . '</a></td>' . "\n";

 

Was that the correct one?.

 

That is only for the top right picture.

 

The code for the categories links/pictures is this:

 

you can comment it out or delete it.

 

  if (isset($cPath) && strpos('_', $cPath)) {
// check to see if there are deeper categories within the current category
     $category_links = array_reverse($cPath_array);
     for($i=0, $n=sizeof($category_links); $i<$n; $i++) {
       $categories_query = tep_db_query("select count(*) as total from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$category_links[$i] . "' and c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "'");
       $categories = tep_db_fetch_array($categories_query);
       if ($categories['total'] < 1) {
         // do nothing, go through the loop
       } else {
         $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.categories_image, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$category_links[$i] . "' and c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "' order by sort_order, cd.categories_name");
         break; // we've found the deepest category the customer is in
       }
     }
   } else {
     $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.categories_image, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$current_category_id . "' and c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "' order by sort_order, cd.categories_name");
   }

   $number_of_categories = tep_db_num_rows($categories_query);

   $rows = 0;
   while ($categories = tep_db_fetch_array($categories_query)) {
     $rows++;
     $cPath_new = tep_get_path($categories['categories_id']);
     $width = (int)(100 / MAX_DISPLAY_CATEGORIES_PER_ROW) . '%';
     echo '                <td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>' . $categories['categories_name'] . '</a></td>' . "\n";
     if ((($rows / MAX_DISPLAY_CATEGORIES_PER_ROW) == floor($rows / MAX_DISPLAY_CATEGORIES_PER_ROW)) && ($rows != $number_of_categories)) {
       echo '              </tr>' . "\n";
       echo '              <tr>' . "\n";
     }
   }

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...