Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Convert OSCommerce 2.2RC2a to table-less CSS


npn2531

Recommended Posts

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

Oscommerce site:

 

 

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

Link to comment
Share on other sites

  • Replies 228
  • Created
  • Last Reply

Top Posters In This Topic

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.

Oscommerce site:

 

 

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

Link to comment
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.

Link to comment
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.

Oscommerce site:

 

 

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

Link to comment
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;
}

Oscommerce site:

 

 

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

Link to comment
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.

Link to comment
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://www.oscommerce.com/forums/topic/364291-oscommerce-v-23-when/

Oscommerce site:

 

 

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

Link to comment
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://www.oscommerce.com/forums/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.

Link to comment
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.

Oscommerce site:

 

 

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

Link to comment
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.

Link to comment
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

Oscommerce site:

 

 

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

Link to comment
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.

Link to comment
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.

Oscommerce site:

 

 

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

Link to comment
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

Oscommerce site:

 

 

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

Link to comment
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;
?> 

Link to comment
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.

Link to comment
Share on other sites

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;
?> 

Thanks, was the p1 there to begin with? Also, what page is this from?

Oscommerce site:

 

 

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

Link to comment
Share on other sites

Hey George,

 

Just read your article: www.niora.com/css-oscommerce.php?articles_id=41

 

So if I wanted to convert the content area specifically for the category listing and products info how do you suggest I do that?

 

 

Thanks

Edited by Jan Zonjee
Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...