Jump to content
Sign in to follow this  
npn2531

Convert OSCommerce 2.2RC2a to table-less CSS

Recommended Posts

Hi Leonardo,

 

The problem is that OSC to CSS v2 is not compatible with the template version. Since you have not done any modifications, by far the easiest thing to do is start over. Install a new stock verision of OSCommerce and then install OSC to CSS v2. What's happening with your installation is that the shop cannot find any of the stylesheets. It nothing you've done, but that OSC to CSS v2 just won't work on top of the template version, with out a lot of work.

 

What you get from the template version, amounts to the ability replacing the stylesheets and images from the admin, that's about it. I, or anyone else has not moved forward on the template version. If you really need the template version, then you will need to move the CSS folder from the OSC CSS v2 to the template folder and then rewrite all the reference paths in application_top.php, for starters.

 

You won't gain much, and it will be a nightmare and in the end you will have a more complex cart.

 

Best to let the template version die in it's infancy and go straight to OSC to CSS v2.


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

Ok, thought I did something wrong... :-)

I will start over. I like very much this elegant grey template.... :-)

Thank you!

 

Hi Leonardo,

 

The problem is that OSC to CSS v2 is not compatible with the template version. Since you have not done any modifications, by far the easiest thing to do is start over. Install a new stock verision of OSCommerce and then install OSC to CSS v2. What's happening with your installation is that the shop cannot find any of the stylesheets. It nothing you've done, but that OSC to CSS v2 just won't work on top of the template version, with out a lot of work.

 

What you get from the template version, amounts to the ability replacing the stylesheets and images from the admin, that's about it. I, or anyone else has not moved forward on the template version. If you really need the template version, then you will need to move the CSS folder from the OSC CSS v2 to the template folder and then rewrite all the reference paths in application_top.php, for starters.

 

You won't gain much, and it will be a nightmare and in the end you will have a more complex cart.

 

Best to let the template version die in it's infancy and go straight to OSC to CSS v2.

Share this post


Link to post
Share on other sites

Hi!

I did it, its working fine now...

 

Now I have another Q. Can I use contribution to add more pics per product...?

 

THX!

 

Ok, thought I did something wrong... :-)

I will start over. I like very much this elegant grey template.... :-)

Thank you!

Share this post


Link to post
Share on other sites

Hi,

 

I am *loving* this contribution! It has speeded things up for me tremendously.

 

I do have two issues with IE (and how lucky I am that it's only two, eh?) Probably the one that I haven't resolved is some silly RTM issue, but if someone can easily take a quick glance and just tell me where I messed up, I'd really appreciate it.

 

I used the basic template that came with the contrib, just modified it some. It looks perfect in FF, and breaks in IE, of course.

 

First issue was that the content "container_12" div was disappearing in IE, spilling all the contents onto the body background. I fixed that by adding "min-height: 120%;" to the container_12 styles.

 

Secondly, down at the bottom of this page http://natrlobs.sc22.info/index.php you can see in IE where the right column extends down far enough to mess up the footer div. I've put borders around the three relevant divs to make this obvious. Somehow, it appears that IE believes the footer div is inside the column_right div, but the HTML quite clearly insists it is not. In Firebug, I can see nothing at all out of place.

 

AND, I have <div class="clear"> all over the place. Not helping. There's one at the end of column_right, one just outside column_right, and several more sprinkled around just for luck.

 

Anyone more familiar with the 960 system than me? Thanks!!

Share this post


Link to post
Share on other sites

The container_12 is a pretty rock solid component, and works. Using min-height to fix it simply means you did not identify what the problem is. Make sure you are using the 'alpha' and 'omega' classes where they are needed. They are used to nest components, to set equal unit grids within grids without margins and without them grid units will 'spill' out. Make double sure you have closed all of your divs in the proper place. Also be careful with the <div class="clear"></div> You only use to clear floats, ie when you wish to stop lining stuff up horizontally. Note the the class 'clear' has a 'no display' value in the style sheet. That mean nothing between the opening div and the closing div will display. If have opened a div with a class of clear, and have not closed it then nothing will display after that opening div.


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

The container_12 is a pretty rock solid component, and works. Using min-height to fix it simply means you did not identify what the problem is. Make sure you are using the 'alpha' and 'omega' classes where they are needed.

 

Awww, you mean I have to know what the heck I'm doing? LOL! Okay, okay. Off to read the manual. Thanks!! The contribution is really wonderful--I don't know what I would have done without it.

Share this post


Link to post
Share on other sites

Have been working/practicing in seeing what can be accomplished using this add-on. When at the product info page, the image displays as 400 x 400, even though the settings in admin -> images is set at 135 width.

 

Did browse through the css files and the javascript searching where this might control this. In admin in editing categories/products, I inserted the image (400 px x 400px)as I have always done in my live store - ver 2.2RC2A.

 

Also when viewing what addons at have been tested to work with this new design. I see ULTIMATE Seo Uris 5 r141 is listed twice. So by chance, would one of ULTIMATE Seo Uris 5 r141, should actually be Ultimate SEO URLs?

 

Thanks in advance.

 

Bennett

Share this post


Link to post
Share on other sites

Well, I did go read the manual--very helpful, and I've been over all the relevant files, and found some issues that I changed, and I've managed to resolve the first issue I had with the container_12 div collapsing in IE.

 

The second problem, though is still confusing. It appears that IE believes the footer div is inside the column_right div...but it isn't. It's not so in the HTML, and Firebug doesn't see it that way.

 

However, if I add an extra </div> below the column_right </div>, then IE is happy...but Firefox is not.

 

Perhaps I am not fully understanding the subtleties of the alpha/omega relationship, but as far as I can tell, it shouldn't apply here. This doesn't seem to be a margin issue at all or have anything to do with floats or widths. It looks as if IE is somehow reading the HTML differently than FF. I've never seen this before.

 

Any ideas? Here's the site. http://natrlobs.sc22.info/index.php

Share this post


Link to post
Share on other sites

A lot of people wish that IE would just go away and leave the internet alone. However, you can rather easily write a CSS statement that only IE will read. Here is a useful link that explains it.:

http://www.learn-css-tutorial.com/BrowserIssues.cfm


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

A lot of people wish that IE would just go away and leave the internet alone. However, you can rather easily write a CSS statement that only IE will read. Here is a useful link that explains it.:

http://www.learn-css-tutorial.com/BrowserIssues.cfm

 

Thanks. I do know how to do that. But it somehow looks as if IE is reading *HTML* differently. I bet I can find some javascript to let me stick a </div> in there for that one stupid browser.

 

And lo, upon the land, a cry was heard, "bloody stupid IE!!"

Share this post


Link to post
Share on other sites

Have been working/practicing in seeing what can be accomplished using this add-on. When at the product info page, the image displays as 400 x 400, even though the settings in admin -> images is set at 135 width.

 

Thanks in advance.

 

Bennett

 

Maybe I need to break this down a bit. When I insert images in categories/products, they are 400 pixels square. The images is stored in root/images/. So, where I must look to control image sizes so that when at product_info page, they display as 135 wide and then when I click enlarge image, then I should see the 400 pixels image.

Edited by blr044

Share this post


Link to post
Share on other sites

For anyone who had the same issue I did, some weird html disparity between Firefox and IE, here is what worked for me. I don't pretend it's a reasonable solution, but I'm in a hurry to finish up this project. I used an IE conditional comment:

<!--[if IE ]>
 </div>
<![endif]-->

 

Yes, it's ugly and stupid. But it'll do for now. :)

Share this post


Link to post
Share on other sites

The images is stored in root/images/. So, where I must look to control image sizes so that when at product_info page, they display as 135 wide and then when I click enlarge image, then I should see the 400 pixels image.

 

 

Am sorry, but due to the fact, I was not able to find what needs to be, I removed OSC to CSS contribution. Started all over. I installed 2-2RC2A in a new directory in the root of my store. Did test it. Went to admin -> catregories/products edit the image. Settings for images is set at 100px width and saved. At store end, product_listing and product_info, image displays as 100px width. Click the enlarge image button, the pop-up displays the 400 400 pixel image. Which is correct.

 

But once I overwrite the files with OSC to CSS module, again at product_info, it displays the 400 x 400 pixel images, which is not correct.

 

So if anyone has any ideas for which file I need to look in so as to correct this code.

 

Thanks in advance.

Share this post


Link to post
Share on other sites

Here is the code from product_info.php from a stock install:

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

 

Note the

SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT

 

Add that after

$product_info['products_name'],

 

in the same line in the OSC and CSS contribution and you will restore the jmage handling to normal stock functioning.


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

That did not change anything. Below is the code found in prodiuct_info after installing OSC to CSS:

 

	<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

 

And after adding your suggestion, it now looks like this:

 

	<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, $product_info['products_name'], 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

Share this post


Link to post
Share on other sites

That did not change anything. Below is the code found in prodiuct_info after installing OSC to CSS:

 

	<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

 

And after adding your suggestion, it now looks like this:

 

	<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, $product_info['products_name'], 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

 

 

I think I've resolved this issue for myself. On my product_info.php file, there are two groups of <script> that deal with the image in the product display. The first is around line 157-159, and is not commented out.

 

The second group is just below this at 161-163, and is commented out. Just reverse this--comment out the section from 157-159, and uncomment the one from 161-163. Before I did this, the image on my page was appearing at 1000px--the size of the image itself, and the source was outputting some inline css telling it to be that size. Tat's probably where your 400px is coming from--just the size of the image itself.

Share this post


Link to post
Share on other sites

I have a different, related question concerning multiple product images. I had previously installed "Simple Multi Image Add-on (Un-Limited) with FancyBox Popups," though I can't say whether it was working on the front end. My client *loves* the way the PrettyPhoto pop-up looks, so I'd like to keep that.

 

Is there a different multi-image add-on I should use, or can anyone suggest a way to integrate what I have already--the existing contrib is already installed in the admin and if there's some way to pull that output into my page, and still keep the PrettyPhoto function and appearance, that would be great.

 

The client would just like to see her image array on the image detail page. Right now, there's only one image on there. http://natrlobs.sc22.info/product_info.php?cPath=26&products_id=29

 

Does PrettyPhoto have a "next image" function?

Share this post


Link to post
Share on other sites

Mran is correct, when I converted the page to CSS, I left the original programming in place, but commented out. The new programming is added just below is coded to work with pretty photo. However, this contribution:

http://addons.oscommerce.com/info/7195

not only has pretty photo complete with the next image function, and will look the same as the pretty photo installed on OSC to CSS, and when installed will resolve the image resizing issues. In fact you will end up with the capacity for multiple images, and best of all can call you images out of the database. It is tedious contribution to install but worth it.

 

The current pretty photo does has the next image function, the problem is that their is only one image on product_info.php, so the programming doesn't put up the arrows for the next image because their is no next image. The contribution noted above however is coded to bring up the next product, so that is why it presents the arrows for the next image


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

The second group is just below this at 161-163, and is commented out. Just reverse this--comment out the section from 157-159, and uncomment the one from 161-163. Before I did this, the image on my page was appearing at 1000px--the size of the image itself, and the source was outputting some inline css telling it to be that size. Tat's probably where your 400px is coming from--just the size of the image itself.

 

Thanks Miranda, it's fine now.

Share this post


Link to post
Share on other sites

Mran is correct, when I converted the page to CSS, I left the original programming in place, but commented out. The new programming is added just below is coded to work with pretty photo. However, this contribution:

http://addons.oscommerce.com/info/7195

not only has pretty photo complete with the next image function, and will look the same as the pretty photo installed on OSC to CSS, and when installed will resolve the image resizing issues. In fact you will end up with the capacity for multiple images, and best of all can call you images out of the database. It is tedious contribution to install but worth it.

 

 

Thank you, George, I'll look into this. (tiny wail from deep inside, "oh noes!!!!! Another huge contrib to intall!!!)

Share this post


Link to post
Share on other sites

George, would you possibly be willing to make a zip file of the catalog edits for the jQuery Ultimate Product Pack under OSC to CSS, if you already have them done? Or anyone? I'm going pretty cross-eyed here, and am a bit mystified as to where to put some of it. File comparison is much more of a challenge when the two files are very different to begin with.

 

Even if you have one that is pretty customized, I think it might be a lot easier than trying to read from the table-based edits. Thanks a bunch if you can help--I bet a lot of people might find it nearly as useful as your OSC>CSS contrib.

Share this post


Link to post
Share on other sites

Oh, sorry, I hope im not boring, I want also for my full prices to be crossed and prices with discount shown. Its same discount for everyone, 10 %. How can I do this?

 

Thanks again!

 

Hello!

 

I have a question: can I use any more pics contribution with OSC to CSS? I want to have more images of my product....

 

Thank you!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×