Latest News: (loading..)
Sign in to follow this  
Followers 0
npn2531

Convert OSCommerce 2.2RC2a to table-less CSS

234 posts in this topic

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

pm me an email and I will attach the zip file. This is the product_info.php from the demo at www dot css-oscommerce dot com.

Share this post


Link to post
Share on other sites

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

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

Putting a product on 'special' with OSC to CSS is one and the same as the stock OSC. It will show the struck through reg price and the new discount price. OSC to CSS uses these selectors in styles.css for this:

span.productprice{
font-family: Verdana, Arial, sans-serif;font-size: 12px;font-weight: bold;
}

span.pl-specialprice, span.productspecialprice {
color: #79C1E6;
}

span.pl-specialpricestrike, span.productspecialprice-strike, .productspecialprice-strike {
text-decoration: line-through;
}

Edited by npn2531

Share this post


Link to post
Share on other sites

Leonardo,

 

I have successfully used this contribution for extra images on OSC to CSS:

 

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

 

It's a great JQuery add-on, it also has 'Pretty Photo' and is nicely linked up to the database, and has lots of extra images.

Share this post


Link to post
Share on other sites

Below is some text in the content area of OSC to CSS which is for demo purposes only. I have tried a few ways to insert space between the two sections:

 

<div class="grid_4 alpha">
<h4>960 Grid System</h4>
This new version, v2.0, 
incorporates the 
<a href="http://960.gs/"  target="blank">960 grid system</a>.
The 960 grid system greatly facilitates alignment, proportion and 
layout issues. It speeds up design, creates consistency and solves 
cross browser problems.</div>

<div class="grid_4 alpha">
<h4><a href="http://addons.oscommerce.com/info/7459">Jquery/Json 'Add to Cart'</a></h4>
Click 'add to cart' and without the page refreshing a JQuery lightbox-like popup appears to let the customer know a product has been 
added to the cart. Complete with drop downs for options and links to 'continue' and 'checkout'. 
</div>

<div class="clear"></div>

 

To separate the above from the below, I have used

 

<br/><br/><br/><br/>

 

or

 

<div class="spacer"></div>

 

 

<div class="grid_4 alpha">
<h4><a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/">JQuery Product Information Tabs</a></h4>
The product information page comes installed with tabbed panels. Infoboxes have been installed to fill the
panels with product reviews, manufacturer info and more.
</div>

<div class="grid_4 alpha">
<h4><a href="http://users.tpg.com.au/j_birch/plugins/superfish/">Jquery SuperFish NavBar</a></h4>
SuperFish Navigation Bar</a>, <a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/">UI Tabs</a>, 
<a href="http://addons.oscommerce.com/info/7459">Jquery/Json 'Add to Cart'</a> and  also on the products page.</div>

<div class="clear"></div>

 

So is both of them acceptable or should the <br/> be <br /> istead?

 

Thanks in advance.

Share this post


Link to post
Share on other sites

Below is some text in the content area of OSC to CSS which is for demo purposes only. I have tried a few ways to insert space between the two sections:

 

<div class="grid_4 alpha">
<h4>960 Grid System</h4>
This new version, v2.0, 
incorporates the 
<a href="http://960.gs/"  target="blank">960 grid system</a>.
The 960 grid system greatly facilitates alignment, proportion and 
layout issues. It speeds up design, creates consistency and solves 
cross browser problems.</div>

<div class="grid_4 alpha">
<h4><a href="http://addons.oscommerce.com/info/7459">Jquery/Json 'Add to Cart'</a></h4>
Click 'add to cart' and without the page refreshing a JQuery lightbox-like popup appears to let the customer know a product has been 
added to the cart. Complete with drop downs for options and links to 'continue' and 'checkout'. 
</div>

<div class="clear"></div>

 

To separate the above from the below, I have used

 

<br/><br/><br/><br/>

 

or

 

<div class="spacer"></div>

 

 

<div class="grid_4 alpha">
<h4><a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/">JQuery Product Information Tabs</a></h4>
The product information page comes installed with tabbed panels. Infoboxes have been installed to fill the
panels with product reviews, manufacturer info and more.
</div>

<div class="grid_4 alpha">
<h4><a href="http://users.tpg.com.au/j_birch/plugins/superfish/">Jquery SuperFish NavBar</a></h4>
SuperFish Navigation Bar</a>, <a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/">UI Tabs</a>, 
<a href="http://addons.oscommerce.com/info/7459">Jquery/Json 'Add to Cart'</a> and  also on the products page.</div>

<div class="clear"></div>

 

So is both of them acceptable or should the <br/> be <br /> istead?

 

Thanks in advance.

Share this post


Link to post
Share on other sites

For w3 validation, use <br />. However, you can argue that is it is a bit more 'professional', more visually consistent, to use a CSS class similar to what you mentioned above:

 

<div class="spacer"></div>

 

The reason is that the vertical space the <br /> clears, is tied to the line height at that point, plus you need more than one <br />to 'clear' an element such as an image that is taller than the line height, whereas with a class in the stylesheet you can control the top or bottom margin more consistently. for example:

 

.spacer{
margin-bottom:5px
clear: both;
}

 

or perhaps

 

.spacer-tall{
margin: 5px 0px 5px 0px;
clear: both;
}

Share this post


Link to post
Share on other sites

Hello members, after a week of implementing HT SEO onto this contribution, the index page is just not right.

 

1. At the default page, content area is blank.

2. Right column and footer is all unorganized but which can be fixed just by correcting some <div></div> and spacers which isn't a problem.

3. After selecting category, category images in one single column.

4. Selecting sub-category, the description which should be on the category page is located on sub-category page instead, but display the code instead of the description.

 

The instructions does state that Header Tags SEO will work.

 

So am wondering if anyone here has added that contribution and it is working fine. Because would like to compare index pages, if all possible.

 

Thank you all in advance. Any comment would be very much appreciated. This is located in a dummy directory and is password protected. Only testing at this time. So if one needs to take look at site, I will have to remove the comment out the PW.

Share this post


Link to post
Share on other sites

Are you using OSC to CSS v2? I'm asking because in v1 there are some extra div tags in some the infoboxes put there in a less than 100% successful attempt to deal with those boxes wrapped in conditional statement in the left and right columns.

 

My guess, however, is that from reading your 3 and 4 above, there is a typo somewhere. Almost always when I have code showing, it is a result of either dropping off the final '>' on some tag, or having a ?> or <?php out of place. Not hard things to do.

 

If you want to pm or post a link to you site, I will take a look. BTW, did you see the lastest post today on 2.3?

http://forums.oscommerce.com/topic/364291-oscommerce-v-23-when/

Share this post


Link to post
Share on other sites

Are you using OSC to CSS v2? I'm asking because in v1 there are some extra div tags in some the infoboxes put there in a less than 100% successful attempt to deal with those boxes wrapped in conditional statement in the left and right columns.

 

If you want to pm or post a link to you site, I will take a look. BTW, did you see the lastest post today on 2.3?

http://forums.oscommerce.com/topic/364291-oscommerce-v-23-when/

 

Using ver 2.0. URL is www dot greatdiscounts4u dot com/osc_to_css. As for number four, the code does appear, because I do realize reason for the code instead of desc, is because of a typo. And also I am sure it is located in the wrong location. Because desc should be top of the category listing page, not on the sub-category listing.

 

Note: I did add this and a few others already, mostly to do with security.

Share this post


Link to post
Share on other sites

If you view the source on your page, you find this:

<div class="grid_8" id="content">
<!--  /*** Begin Header Tags SEO ***/  -->
   if (isset($HTTP_GET_VARS['manufacturers_id']))
     $db_query = tep_db_query("select manufacturers_htc_title_tag as htc_title, manufacturers_htc_description as htc_description from " . TABLE_MANUFACTURERS_INFO . " where languages_id = '" . (int)$languages_id . "' and manufacturers_id = '" . (int)$HTTP_GET_VARS['manufacturers_id'] . "'");
   else
     $db_query = tep_db_query("select categories_htc_title_tag as htc_title, categories_htc_description as htc_description from " . TABLE_CATEGORIES_DESCRIPTION . " where categories_id = '" . (int)$current_category_id . "' and language_id = '" . (int)$languages_id . "'");

   $htc = tep_db_fetch_array($db_query);

?>

 

Somewhere after the '<!-- /*** Begin Header Tags SEO ***/ -->' and before the 'if(asset' there is a '<?php' needed. Once this is properly in place, and that code is rended as code and not as html, the out of place category/subcategory issue may resolve without you needing to do anything else.

Share this post


Link to post
Share on other sites

Did get my default page back again, content text was missing. That was just a dumb mistake. :huh:

Share this post


Link to post
Share on other sites

Better a dumb mistake, than some unfathomable issue you struggle with endlessly!

Share this post


Link to post
Share on other sites

As selecting a category and all the way to selecting a item, there aren't any errors on the pages. At http www dot greatdiscounts4u dot com/osc_to_css/movies-c-3.html the category list is in a single column instead of three across. Believe it has to do with where I need to insert a <div class="grid_? alpha somplace. going through each location by inserting and removing to see what works.

 

But with no errors, but still no description on the category page. Still searching for possible cause.

Share this post


Link to post
Share on other sites

Somehow you've got, instead of 'pl' (letter p letter l) in the products listing, a 'p1' (letter p number one) for the categories. I cannot remember where in the files the pl class is added (which is where it should be fixed) , but to test my theory, if you go to your stylesheet and add a p1 (letter p number one) to this, your categories should float horizontally.

 

.pl, .pl-odd, .pl-even, .productlisting-new, .categorylisting{
float:left;
border:1px solid #A6BFB9;
border-width:0px 0px 0px 0px;
margin:20px 10px 30px 10px; 
padding:10px 21px 18px 0px;
width:150px;
}

 

change to:

.p1, .pl, .pl-odd, .pl-even, .productlisting-new, .categorylisting{
float:left;
border:1px solid #A6BFB9;
border-width:0px 0px 0px 0px;
margin:20px 10px 30px 10px; 
padding:10px 21px 18px 0px;
width:150px;
}

Edited by npn2531

Share this post


Link to post
Share on other sites

Somehow you've got, instead of 'pl' (letter p letter l) in the products listing, a 'p1' (letter p number one) for the categories. I cannot remember where in the files the pl class is added (which is where it should be fixed) ,

 

Thanks, I guess sometimes the number 1 and the lower case L is hard to see, especially font size of 11 or less.

Share this post


Link to post
Share on other sites

I had to paste it a text doc and change the font before I was sure I was seeing a 1 instead of an L. If you find the place to fix it other than the stylesheet let me know. I can't believe I can't find it, I put it there (where ever there is) in the first place.

Share this post


Link to post
Share on other sites

Great effort here! I just went through a highly modified store and converted it to css v1. Took me a good 4 days to do each file.

 

My only rant is that v2.3 of oscommerce is out now

Share this post


Link to post
Share on other sites

Well, there is also OSC to CSS v2, but yes, 2.3 is also CSS 960 grid and frankly looks pretty good. 2.3 is going to have all the security updates. But now you are familiar with the grid system and that's worth a couple of days.

Edited by npn2531

Share this post


Link to post
Share on other sites

I had to paste it a text doc and change the font before I was sure I was seeing a 1 instead of an L. If you find the place to fix it other than the stylesheet let me know. I can't believe I can't find it, I put it there (where ever there is) in the first place.

 

I found it around line 112:

 

    $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 '                <div class="pl categories"><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></div>' . "\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";
     }
   }

// needed for the new products module shown below
   $new_products_category_id = $current_category_id;
?> 

Share this post


Link to post
Share on other sites

Well, there is also OSC to CSS v2, but yes, 2.3 is also CSS 960 grid and frankly looks pretty good. 2.3 is going to have all the security updates. But now you are familiar with the grid system and that's worth a couple of days.

I did just a little bit research before deciding to upgrade to your version 1 in regards to using a css framework. I opted not to use it based on a lot feedbacks I read about limiting yourself by using a 3rd party framework.

 

Unfortunately the 2.3 system does use the framework.

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  
Followers 0