Jump to content



Photo
- - - - -

Convert OSCommerce 2.2RC2a to table-less CSS


  • Please log in to reply
233 replies to this topic

#221   npn2531

npn2531
  • Members
  • 1,136 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 14 October 2010 - 21:25

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.

#222   spoofy

spoofy
  • Members
  • 181 posts
  • Real Name:Spoofy

Posted 15 October 2010 - 05:57

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

#223   npn2531

npn2531
  • Members
  • 1,136 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 15 October 2010 - 06:35

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, 15 October 2010 - 06:36.


#224   blr044

blr044
  • Members
  • 1,009 posts
  • Real Name:Bennett
  • Gender:Male
  • Location:USA

Posted 15 October 2010 - 06:40

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


#225   spoofy

spoofy
  • Members
  • 181 posts
  • Real Name:Spoofy

Posted 15 October 2010 - 07:10

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.

#226   npn2531

npn2531
  • Members
  • 1,136 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 15 October 2010 - 07:41

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?

#227   blr044

blr044
  • Members
  • 1,009 posts
  • Real Name:Bennett
  • Gender:Male
  • Location:USA

Posted 15 October 2010 - 07:50

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.

#228   npn2531

npn2531
  • Members
  • 1,136 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 15 October 2010 - 08:02

Got it! Thanks!

#229   spoofy

spoofy
  • Members
  • 181 posts
  • Real Name:Spoofy

Posted 19 October 2010 - 03:23

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, 30 October 2010 - 19:58.


#230   Marekw

Marekw
  • Members
  • 3 posts
  • Real Name:Marek

Posted 30 October 2010 - 19:46

I have a problem with Polish language in the OSC is CSS. Please see:

[IMG]http://images40.fotosik.pl/343/aa5b81c6d8bf260cm.png[/IMG]

This is eg. German version (is ok):

[IMG]http://images45.fotosik.pl/360/772f3a057543266fm.png[/IMG]

How to fix this bug?

#231   Marekw

Marekw
  • Members
  • 3 posts
  • Real Name:Marek

Posted 30 October 2010 - 20:58

I have a problem with Polish language in the OSC is CSS. Please see:

[IMG]http://images38.fotosik.pl/355/623ab6dce4377fcem.png[/IMG]

This is eg. German version (is ok):

[IMG]http://images45.fotosik.pl/360/772f3a057543266fm.png[/IMG]

How to fix this bug?



#232   blr044

blr044
  • Members
  • 1,009 posts
  • Real Name:Bennett
  • Gender:Male
  • Location:USA

Posted 30 October 2010 - 22:27

I realize there is three thread out there regarding tableless web site. One is for bug fixes and so I am posting here. If not correct, you may move to the other one. I did download the new ver 2.3 for testing. This is not a live store, presently it is located on my hard drive

I have seen a few sites where the footer contains some links of information. Below I have included a snapshot of what I am trying to do.
[img]http://greatdiscounts4u.com/images/footinfo.jpg[/img]

Below is the code before any modifications located in footer.php:
require(DIR_WS_INCLUDES . 'counter.php');
?>

<div class="grid_24 footer">
  <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>
</div>

<?php
  if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>

<div class="grid_24" style="text-align: center; padding-bottom: 20px;">
  <?php echo tep_display_banner('static', $banner); ?>
</div>

<?php
  }
?>

<script type="text/javascript">
$('.productListTable tr:nth-child(even)').addClass('alt');
</script>

This is after the edition of code:
require(DIR_WS_INCLUDES . 'counter.php');
?>

<div class="grid-24 align-center">
 <div class="grid_8 push_2">
		<h2>Search</h2>

<!-- Search box by Chris-->
     <div class="search-box">
                <form name="quick_find" action="https://www.niora.com/advanced_search_result.php" method="get">                                    
    <input type=text name="keywords" size="10" maxlength="25" class="search-field" value="Search..." onclick="this.value='';" onblur="if(!this.value) {this.value='Search...'; }">   
                <input type="hidden" name="search_in_description" value="1" />
                <input type="hidden" name="inc_subcat" value="1" />
                <input type="submit" name="search" value="" class="search-go" border="0" width="79" height="25"> 
                </form>
        </div>  
		</div>

		<!-- /one third -->

		<div class="grid_8 push_2">
			<h2>Get in touch</h2>
			<div class="grid_4 center-align">
				<p>
					<strong>GreaDiscounts4u </strong>
					<br />1001 McNutt RD 3 297<br />Conway, AR 72034<br /><a href="mailto:#">sales@greatdiscounts4u.com</a></p>
				<p>Tel: 501.205.9456<br /></p>
			</div>
		</div>

		<!-- /one third -->

		<div class="grid_8 push_2 omega">
			<h2>Site Map</h2>
    <div class="grid_8 pull_1 alpha">
    <ul>
    <?php
   	echo '<a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . BOX_INFORMATION_SHIPPING . '</a><br>';
    echo '<a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a><br>';
    echo '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a><br>';
    echo '<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a>';
    ?>
    </ul>
   </div>
  </div>
		<!-- /one third -->

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

<div class="grid_24 footer">
  <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>
</div>

<?php
  if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>

Still working with the links, but have tried s few steps in trying to center the text under Get in Touch. Even used a few push_x and pull_x to make it work. But all fails. So not sure if I'm going overboard or not by the way I have done it. So am looking for a suggestion/comment.

Thank you.

Edited by blr044, 30 October 2010 - 22:30.


#233   npn2531

npn2531
  • Members
  • 1,136 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 30 October 2010 - 23:11

You really only need to focus on this:


                        <div class="grid_4 center-align">
                                <p>
                                        <strong>GreaDiscounts4u </strong>
                                        <br />1001 McNutt RD 3 297<br />Conway, AR 72034<br /><a href="mailto:#">sales@greatdiscounts4u.com</a></p>
                                <p>Tel: 501.205.9456<br /></p>
                        </div>
                


1) check typos, make sure that center-align is not supposed to be center_align or align_center. (you have it two different ways in your code above)
2) Look real close for overriding selectors. Make sure in reset.css or anywhere else, that <p>, <strong> don't have any thing conflicting. (To test, remove them)
3) You can always do something like
#footer p {
text-align: center;
}

to override anything else. (assuming #footer is the id that this is all contained in)

Really 90% of the time when I have something like this that seems simple and that should work, it is something buried in the stylesheets that is overriding it. Or a typo.

Edited by npn2531, 30 October 2010 - 23:12.


#234   leonardo2212

leonardo2212
  • Members
  • 110 posts
  • Real Name:Leonardo Marusic

Posted 13 June 2011 - 20:48

Dear all!
I have 2 problems:

1. does anyone has a solution how to fix problem with IE?
My right boxes appears under products...
here is the adress: leo . hr/catalog_leo/

2. On product_info - when you clic product what appears is photo, info - thats all ok, and one table containing Rewiews; Manuf Info; notifications; Tell a friend - how to change language in this table? I changed on everything (page is in croatian language), but i cant find how to dhange this one...
Maybe this is stupid, but im not a pro so please help! :-)

Thank you for great contribution and hard work!