PDA

View Full Version : osCommerce Layout Modified



MahmoodDar
01-31-2003, 06:19 PM
Hiya all

I would like to know as what are the steps needed to be taken to achieve this sort of changes in osCommerce

http://www.memoryworld.de/

Can this be done through Dreamweavers MX Design Mode or it should only be done through Code View.

Moreover, does one need to create an extra Style Sheet?

Thanks

michael_s
01-31-2003, 08:14 PM
Yes and Yes.

Can be done in dreamweaver in either mode. But that is some really nice work, so you better be good at using photoshop too! :)

Probably not an extra stylesheet, just a few style additions. It is a pretty well thought out site over there.

MahmoodDar
02-02-2003, 01:05 PM
HIya msaek

I have read its View Source and it has two Style Sheets attached.
One " stylesheet.css" and other "style.css"

I have tried to change the layout in Dreamweaver but i cant find a way through php, what i tried was that i ran the default.php and copied in view source and then made the adjustments to the html (Static). But the problem came out that it wasnt getting modified as php does.

How has www.memoryworld.com done that in PHP.?

By the way i am good at photshop and flash mx but not PHP :(

MahmoodDar
02-02-2003, 01:19 PM
alright , how would i add a gif in the middle of the InfoBox, in between the Left Corner gif and the right corner gif. the Style Sheet only changes the colour.

For Example, do i have to make the changes here in /catalog/includes/classes/boxes.php


class infoBoxHeading extends tableBox {
function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
$this->table_cellpadding = '0';

if ($left_corner) {
$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
} else {
$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
}
if ($right_arrow) {
$right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
} else {
$right_arrow = '';
}
if ($right_corner) {
$right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
} else {
$right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
}


and the default.php


<td height="14" class="infoBoxHeading" nowrap><img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14"></td>

[/code]

lango
02-02-2003, 01:42 PM
msasek, Please excuse the butt in.

Mahmood:

the imortant part of the infoboxHeading is this:


$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"', 'text' => $left_corner),
array('params' => 'width="100%" height="14" class="infoBoxHeading"', 'text' => $contents[0]['text']),
array('params' => 'height="14" class="infoBoxHeading"', 'text' => $right_corner));
$this->tableBox($info_box_contents, true);
}
}

I found to add as you say a gif between both corners would go something like this if you still require text do it as a background:


$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"', 'text' => $left_corner),
array('params' => 'background="images/infobox/background.gif" width="100%" class="infoBoxHeading"', 'text' => $contents[0]['text']),

array('params' => 'height="14" class="infoBoxHeading"', 'text' => $right_corner));
$this->tableBox($info_box_contents, true);
}
}

Remember to remove any background colour from you stylesheet.css for infoboxHeading.
Hope this helps.

MahmoodDar
02-02-2003, 11:10 PM
Thanks Lango

Ill give this a try

Also, ill check it out in the latest OSCDox Guide.

MahmoodDar
02-03-2003, 02:48 AM
I read the guide a bit and I want to add a new box in the right column.
I want that box to hold Login Box.

Do i go about as same as with the Test Page explained in the Osdox Guide.

MahmoodDar
02-03-2003, 05:42 AM
Hiya

I have changed the layout of the cart a bit.

I have changed the InfoBox Header Image between the right and left corner gifs. Thanks to Lango for the help :)

Now i want to place gifs around the Right and Left sides of the WHOLE InfoBox. I tried it with increasing the margin and adding a think border but it doesnt fit well.

Is there a way to define images for the Right and Left Sides of the InfoBox through StyleSheet or any other way

Thanks

lango
02-03-2003, 06:59 AM
Mahmood

before I can help any further, can you check this out and advise if this is what you mean.

www.themetest.dcpc.co.uk

you can change the theme at

www.themetest.dcpc.co.uk/admin

Login with:

username tester
password tester

configuration----mystore--- at the bottom you will see Site Thema Options


Lango

MahmoodDar
02-03-2003, 08:42 AM
HIya lango

This is exactly what I am talking about. By the way, the site looks really good.

How can I edit my stylesheet or add another to make a theme similar to that. Is this the contribution from Oscommerce.

lango
02-03-2003, 09:16 AM
Basically this theme mod is based around Ian Wilson's loaded4 snapshot.

It uses the same principal folders as the contribution from Ferhat Kurt
What I did was move the following files to the thema folder:

column_left.php
column_right.php
header.php
footer.php

and then call each file from this folder e.g.


<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
replace with
<?php require(DIR_WS_CLASSES . 'thema/' . SITE_THEMA . '/header.php'); ?>

This way all the themes can be different.

next I moved the modules folder to the thema folder and now call all these files from the thema folder.

To answer your question on side gif. for each infobox you will need to change the
function tableBox in the file boxes.php found in the classes folder.

Halfway down you will see the following code:


} else {
$tableBox_string .= ' <td';
if ($contents[$i]['align'] != '') $tableBox_string .= ' align="' . $contents[$i]['align'] . '"';
if ($contents[$i]['params']) {
$tableBox_string .= ' ' . $contents[$i]['params'];
} elseif ($this->table_data_parameters != '') {
$tableBox_string .= ' ' . $this->table_data_parameters;
}
$tableBox_string .= '>' . $contents[$i]['text'] . '</td>' . "\n";
}


replace with the following:


} else {
$tableBox_string .= ' <td align="left" width="'.SIDE_BOX_LEFT_WIDTH.'" background="images/infobox/box_bg_l.gif"><img src="images/infobox/box_bg_l.gif" width="'.SIDE_BOX_LEFT_WIDTH.'" height="1"></td> <td';
if ($contents[$i]['align'] != '') $tableBox_string .= ' align="' . $contents[$i]['align'] . '"';
if ($contents[$i]['params']) {
$tableBox_string .= ' ' . $contents[$i]['params'];
} elseif ($this->table_data_parameters != '') {
$tableBox_string .= ' ' . $this->table_data_parameters;
}
$tableBox_string .= '>' . $contents[$i]['text'] . '</td> <td width="'.SIDE_BOX_RIGHT_WIDTH.'" background="images/infobox/box_bg_r.gif"><img src="images/infobox/box_bg_r.gif" width="'.SIDE_BOX_RIGHT_WIDTH.'" height="1"></td>' . "\n";
}

You can see that I have set two variables SIDE_BOX_LEFT_WIDTH and SIDE_BOX_RIGHT_WIDTH

At the very bottom of your boxes.php file and the following:


define('SIDE_BOX_LEFT_WIDTH', '8');
define('SIDE_BOX_RIGHT_WIDTH', '10');

and set the width to the width of each gif you use.

MahmoodDar
02-03-2003, 05:44 PM
Hiya lango thanx again for the info :)


Where can I download Ian Wilson's Loaded 4 ?

What is exactly i need to do to install Site Thema Options

michael_s
02-03-2003, 10:26 PM
Look in the weblinks section in the options menu. We have a link to the loaded snapshot :)

MahmoodDar
02-04-2003, 03:36 AM
Thanks masek

I searched for Loaded in OsCommerce and i found the link. I downloaded it yesterday and installed it. It only changes the colours of the infoboxes along with the right and left gifs of Infoboxes. I am able to achieve this result through CSS.

But what I am looking for is to change the Sides of the Infoboxes with Graphics (and not colour). Just like Lango has done with his site.

It is exactly what I want. Lango, I need to ask one more question and that is whether the procedure you have described above is enough to make the changes to the Infoboxes to achieve graphics.

Thanks Once again to both for your help especially lango :)

P.S. By the way masek, could you add Ecommerce Sub-Category in "Web Links " as i have many useful links to Ecommerce Solution Providers.

lango
02-04-2003, 04:12 AM
I will get back to you when I get home from work.

In the mean time backup you boxes.php file and try the code above.

I found this the best way to learn (trial & error).
Again so long as you back up each file you change first then you should have no problems.

MahmoodDar
02-04-2003, 04:21 AM
Thanks Lango

Ill be waiting. Also, ill back up the boxes directory.

I am trying out these changes.

http://www.dcpcwebdevelopment.co.uk/instructions/

MahmoodDar
02-04-2003, 06:07 AM
I have followed the instructions from http://www.dcpcwebdevelopment.co.uk/instructions/

The body and the banner seems to load fine but i am gettin this error message:



Warning: Failed opening 'DIR_WS_THEMESblue/theme_boxes/categories.php' for inclusion (include_path='.;c:\php4\pear') in e:\inetpub\wwwroot\cart\includes\column_left.php on line 33

Warning: Failed opening 'DIR_WS_THEMESblue/theme_boxes/manufacturers.php' for inclusion (include_path='.;c:\php4\pear') in e:\inetpub\wwwroot\cart\includes\column_left.php on line 38

Fatal error: Failed opening required 'DIR_WS_THEMESblue/theme_boxes/whats_new.php' (include_path='.;c:\php4\pear') in e:\inetpub\wwwroot\cart\includes\column_left.php on line 40


How do i correct this error?

And this is my Column_left.php file


if ( (USE_CACHE == 'true') && !SID) {
echo tep_cache_categories_box();
} else {
include(DIR_WS_THEMES . $newtheme . '/theme_boxes/categories.php');
}
if ( (USE_CACHE == 'true') && !SID) {
echo tep_cache_manufacturers_box();
} else {
include(DIR_WS_THEMES . $newtheme . '/theme_boxes/manufacturers.php');
}
require(DIR_WS_THEMES . $newtheme . '/theme_boxes/whats_new.php');
require(DIR_WS_THEMES . $newtheme . '/theme_boxes/search.php');
require(DIR_WS_THEMES . $newtheme . '/theme_boxes/information.php');
?>

lango
02-04-2003, 07:24 AM
:oops: During an update to the instructions I seem to have deleted step 2

Do as follows:2.

Open up catalog/includes/configure.php and add the following around line 27



define('DIR_WS_THEMES', DIR_WS_INCLUDES . 'theme/');


I will update instructions when I can get to my FTP

MahmoodDar
02-04-2003, 07:43 AM
Lango

Do i have to do the changes which you have described after installing Ian Wilson's Loaded 4.

Also, i didnt understand this part

and then call each file from this folder e.g.



<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
replace with
<?php require(DIR_WS_CLASSES . 'thema/' . SITE_THEMA . '/header.php'); ?>

lango
02-04-2003, 09:07 AM
Mahmood,

As it says on the instruction site the thema mod does not work with the Loaded4 snapshot.

What I gave you is an example of what I have done using the loaded4 snapshot.

As Ian Wilson is due release Loaded5 as soon as the OSC team release MS1 (I believe maybe This Friday).

I will post the loaded4(5) thema mod on the site.



Also, i didnt understand this part

and then call each file from this folder e.g.
Code:


<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
replace with
<?php require(DIR_WS_CLASSES . 'thema/' . SITE_THEMA . '/header.php'); ?>

If you ARE using the loaded4 snapshot copy your header.php file from the includes folder and paste lets say into the thema number 1 folder.
No you must change all occurances of the following:


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

with:

<?php require(DIR_WS_CLASSES . 'thema/' . SITE_THEMA . '/header.php'); ?>

When you now change the thema via admin it will look for the header.php file in the corresponding thema folder.

Try changeing the site thema to 2 and you will get an error.
paste your header.php into folder 2 and it will go away.

Try changing the code in header.php in the thema folder2 and hopefully you will see what I mean.

MahmoodDar
02-04-2003, 11:04 AM
I am not trying it on Loaded 4 but i am trying it on a fresh installation. It worked fine :)

Thanks, the Step 2 was the part which was missing.

Now to add images i only have to edit


} else {
* * * * * $tableBox_string .= '* * <td';
* * * * * if ($contents[$i]['align'] != '') $tableBox_string .= ' align="' . $contents[$i]['align'] . '"';
* * * * * if ($contents[$i]['params']) {
* * * * * * $tableBox_string .= ' ' . $contents[$i]['params'];
* * * * * } elseif ($this->table_data_parameters != '') {
* * * * * * $tableBox_string .= ' ' . $this->table_data_parameters;
* * * * * }
* * * * * $tableBox_string .= '>' . $contents[$i]['text'] . '</td>' . "\n";
* * * * }
* * * * $tableBox_string .= '* </tr>' . "\n";
* * * * if ($contents[$i]['form']) $tableBox_string .= '</form>' . "\n";
* * * }

Also, how will I be able to change the Theme of Admin as you have it on your site.

And will you post the updated version on the same link you posted above

MahmoodDar
02-04-2003, 11:37 AM
I have done the changes to boxes.php

But it hasnt affected the InfoBoxes.

I have specified both the width as well as height for the images and placed them in /catalog/images/infobox/

Also, i made the changes in theme_boxes too. And I am not using Loaded 4 Snapshot. I am using the original osCommerce but I have tweaked it like you described in your site.

But i still cant get the gifs to work

lango
02-04-2003, 01:03 PM
:?:
This has got rather confusing.

You started off asking about changing the infoBox Headers and where using a straight install of the latest snapshot with no theme mod installed.

Then I sort of digrest onto loaded4.

Now I think you have installed the theme mod from www.dcpcwebdevelopment.co.uk

If this is the case you now need to add the code into the file thema_boxes.php file in the includes\Theme\black_orange folder.

I have attached the file thema_boxes.php for you

MahmoodDar
02-04-2003, 05:41 PM
Lango, I have installed theme mod from http://www.dcpcwebdevelopment.co.uk

I did the changes in includes\Theme\black_orange etc. but its still not displaying the images.


Who would I add image to the bottom of the InfoBox.

Lango, should I stick with the theme mod from http://www.dcpcwebdevelopment.co.uk or is it the Loaded 4 is better.

MahmoodDar
02-05-2003, 09:59 AM
Lango do you have a solution to this

lango
02-05-2003, 10:54 AM
Mahmood,


I did the changes in includes\Theme\black_orange etc. but its still not displaying the images.

Looking at the image you posted, I would say success. :wink:

You need to alter the cellpadding to "0" in contentBoxHeading in the theme_boxes.php file.

MahmoodDar
02-05-2003, 08:34 PM
HIya Lango

It worked wonderfully.

This is where i did the changes, posting it here so that someone else can also work it out too.


Around Line 158:
class contentBox extends tableBox {
function contentBox($contents) {
$info_box_contents = array();
$info_box_contents[] = array('text' => $this->contentBoxContents($contents));
$this->table_cellpadding = '10';
$this->table_class = 'tableBackground';
$this->tableBox($info_box_contents, true);
}




Replace the above with :



class contentBox extends tableBox {
function contentBox($contents) {
$info_box_contents = array();
$info_box_contents[] = array('text' => $this->contentBoxContents($contents));
$this->table_cellpadding = '0';
$this->table_class = 'tableBackground';
$this->tableBox($info_box_contents, true);
}


This is the only line which needs to be changed


$this->table_cellpadding = '0';

Lango, i tried to add an image at the bottom of all the InfoBoxes.

i tried it with


<tr>
*** <td><img src="http://www.link-to-sampleimage.com"></td>
* </tr>*



But it didnt work, i also increased the padding and margin but the image didnt show up.
Where do I need to make the changes as to reflect it in the main page, so that i can place Graphics under all the Infoboxes as to give them a Box look and feel.

lango
02-05-2003, 11:59 PM
Try this:

http://forums.oscommerce.com/viewtopic.php?t=29064&highlight=infobox

MahmoodDar
02-06-2003, 01:52 AM
I have tried out the above link Lango, but it just messes up the cellpadding of the infoboxes. It was "0" alright , i changed to something else but it didnt have any effect.

I made the changes in theme_boxes.php in WhatsNew directory and the categories.php in WhatsNew theme_boxes Directory.

lango
02-07-2003, 11:02 PM
Mahmood,

If as you say you want to add the same footer graphics as the header to your infobox's, just call the same function as the header.


$info_box_contents = array();
$info_box_contents[] = array('align' => 'left',
'text' => ' '
);
new infoBoxHeading($info_box_contents, $newtheme, false, false);

Note the
'text' => ' '

here is best_sellers.php as an example:


<?php
/*
$Id: best_sellers.php,v 1.19 2002/06/05 20:59:08 dgw_ Exp $

osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com

Copyright (c) 2001 osCommerce

Released under the GNU General Public License
*/
?>
<!-- best_sellers //-->
<?php
if ($cPath) {
$best_sellers_query = tep_db_query("select distinct p.products_id, pd.products_name, p.products_ordered from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_CATEGORIES . " c where p.products_status = '1' and p.products_ordered > 0 and p.products_id = pd.products_id and pd.language_id = '" . $languages_id . "' and p.products_id = p2c.products_id and p2c.categories_id = c.categories_id and (c.categories_id = '" . $current_category_id . "' OR c.parent_id = '" . $current_category_id . "') order by p.products_ordered DESC, pd.products_name limit " . MAX_DISPLAY_BESTSELLERS);
} else {
$best_sellers_query = tep_db_query("select p.products_id, pd.products_name, p.products_ordered from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_ordered > 0 and p.products_id = pd.products_id and pd.language_id = '" . $languages_id . "' order by p.products_ordered DESC, pd.products_name limit " . MAX_DISPLAY_BESTSELLERS);
}

if (tep_db_num_rows($best_sellers_query) >= MIN_DISPLAY_BESTSELLERS) {
?>
<tr>
<td class="boxesTable">
<?php
$info_box_contents = array();
$info_box_contents[] = array('align' => 'left',
'text' => BOX_HEADING_BESTSELLERS
);
new infoBoxHeading($info_box_contents, $newtheme, false, false);

$rows = 0;
$info_box_contents = array();
while ($best_sellers = tep_db_fetch_array($best_sellers_query)) {
$rows++;
$info_box_contents[] = array('align' => 'left',
'text' => tep_row_number_format($rows) . '. <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $best_sellers['products_id'], 'NONSSL') . '">' . $best_sellers['products_name'] . '</a>');
}

new infoBox($info_box_contents);
$info_box_contents = array();
$info_box_contents[] = array('align' => 'left',
'text' => ' '
);
new infoBoxHeading($info_box_contents, $newtheme, false, false);

?>
</td>
</tr>
<?php
}
?>
<!-- best_sellers_eof //-->

MahmoodDar
02-08-2003, 11:35 AM
Thanks as always Lango for the help

I t works smoothly but it displays the heading box text too.

Ill look into it right now :)

Thanks a lot

judoka
05-22-2003, 01:58 PM
Hi everybody, I am using CVC2.2 loaded version5, I've downloaded and am trying to install the loaded4-5 theme. I have follow all the file replacement instructions using notepad and cut and paste with no problems so far, but I am having a problem with the database instruction. There are a total of 3 "Install the following into Your database" instructions that I must install however I can not seen to find how to make these install. I have gone into mysql\data\mydatabase and I can see 3 sessions file (FRM, MYD, and MYI files) how ever when I try to view them with notepad all I see is just some codeing. :? :? Can you please tell me if I am going about this correctly or am I looking in the wrong area? I also saw the following post by lango "During an update to the instructions I seem to have deleted step 2

Do as follows:2.

Open up catalog/includes/configure.php and add the following around line 27

Code:

define('DIR_WS_THEMES', DIR_WS_INCLUDES . 'theme/'); " do I need to make this change for loaded4-5 theme? I'm not should which theme this refers to. Thanks for any and all help. :)