npn2531 Posted October 5, 2010 Author Share Posted October 5, 2010 (edited) 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 October 5, 2010 by npn2531 Quote 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 More sharing options...
npn2531 Posted October 5, 2010 Author Share Posted October 5, 2010 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. Quote 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 More sharing options...
leonardo2212 Posted October 5, 2010 Share Posted October 5, 2010 Thank you! :-) 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. Quote Link to comment Share on other sites More sharing options...
blr044 Posted October 7, 2010 Share Posted October 7, 2010 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. Quote Link to comment Share on other sites More sharing options...
npn2531 Posted October 7, 2010 Author Share Posted October 7, 2010 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. Quote 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 More sharing options...
npn2531 Posted October 7, 2010 Author Share Posted October 7, 2010 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; } Quote 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 More sharing options...
blr044 Posted October 14, 2010 Share Posted October 14, 2010 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. Quote Link to comment Share on other sites More sharing options...
npn2531 Posted October 14, 2010 Author Share Posted October 14, 2010 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/ Quote 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 More sharing options...
blr044 Posted October 14, 2010 Share Posted October 14, 2010 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. Quote Link to comment Share on other sites More sharing options...
npn2531 Posted October 14, 2010 Author Share Posted October 14, 2010 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. Quote 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 More sharing options...
blr044 Posted October 14, 2010 Share Posted October 14, 2010 Did get my default page back again, content text was missing. That was just a dumb mistake. :huh: Quote Link to comment Share on other sites More sharing options...
npn2531 Posted October 14, 2010 Author Share Posted October 14, 2010 Better a dumb mistake, than some unfathomable issue you struggle with endlessly! Quote 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 More sharing options...
blr044 Posted October 14, 2010 Share Posted October 14, 2010 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. Quote Link to comment Share on other sites More sharing options...
npn2531 Posted October 14, 2010 Author Share Posted October 14, 2010 (edited) 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 October 14, 2010 by npn2531 Quote 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 More sharing options...
blr044 Posted October 14, 2010 Share Posted October 14, 2010 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. Quote Link to comment Share on other sites More sharing options...
npn2531 Posted October 14, 2010 Author Share Posted October 14, 2010 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. Quote 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 More sharing options...
spoofy Posted October 15, 2010 Share Posted October 15, 2010 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 Quote My Contributions: Google XML Sitemap SEO compatible with Ultimate SEO URL by FWR Media ::: Accurate & Precise Bread Crumb Trail Link to comment Share on other sites More sharing options...
npn2531 Posted October 15, 2010 Author Share Posted October 15, 2010 (edited) 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 October 15, 2010 by npn2531 Quote 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 More sharing options...
blr044 Posted October 15, 2010 Share Posted October 15, 2010 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; ?> Quote Link to comment Share on other sites More sharing options...
spoofy Posted October 15, 2010 Share Posted October 15, 2010 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. Quote My Contributions: Google XML Sitemap SEO compatible with Ultimate SEO URL by FWR Media ::: Accurate & Precise Bread Crumb Trail Link to comment Share on other sites More sharing options...
npn2531 Posted October 15, 2010 Author Share Posted October 15, 2010 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? Quote 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 More sharing options...
blr044 Posted October 15, 2010 Share Posted October 15, 2010 Thanks, was the p1 there to begin with? Also, what page is this from? In the original file, it is pl and is located in the index.php on line 79. Quote Link to comment Share on other sites More sharing options...
npn2531 Posted October 15, 2010 Author Share Posted October 15, 2010 Got it! Thanks! Quote 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 More sharing options...
spoofy Posted October 19, 2010 Share Posted October 19, 2010 (edited) 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 October 30, 2010 by Jan Zonjee Quote My Contributions: Google XML Sitemap SEO compatible with Ultimate SEO URL by FWR Media ::: Accurate & Precise Bread Crumb Trail Link to comment Share on other sites More sharing options...
Marekw Posted October 30, 2010 Share Posted October 30, 2010 I have a problem with Polish language in the OSC is CSS. Please see: This is eg. German version (is ok): How to fix this bug? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.