Jump to content
npn2531

OSC to CSS v2

Recommended Posts

OSC to CSS version 2.0 :Convert OSCommerce 2.2RC2a to tableless CSS

 

The new version of OSC to CSS has been posted at

 

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

 

 

Support, demos and screenshots at:

 

www.niora.com/css-oscommerce.php

 

NEW FEATURES FOR V2:

 

960 Grid System:

The 960 grid system facilitates alignment, proportion and layout issues. It speeds up design, creates consistency and solves cross browser problems.

 

4 new JQuery Features:

Product Information Tabs, SuperFish Horizontal Navigation Bar, Json 'add to Cart' lightbox, and Pretty Photo

 

Reorganized Stylesheets/ and Cleaner layout:

CSS selectors are more intuitive and cleanly organized. Stylesheets are separated by component and function to facilitate quick design. The layout within the catalog pages is simplified, better notated and consistent.

 

Infoboxes:

Infoboxes are completely mobile, and can be placed anywhere on the shop and styled independently depending on their location

 

Buttons:

Buttons are CSS generated and have their own stylesheet. This feature can revert to standard buttons easily.


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

Great contribution!!

 

Just a couple of teething problems

 

1. The instructions say to add reset.css first but the copy and paste for application_top does not mention it and also the ui-select.css is not there.

 

2. My browser is showing column_left and below that main page and below that column_right. I will have a play and see what it is.

 

Other than that, I can now start adding contribs. I added 32 admin contribs whilst awaiting this one!

 

Thanks

Edited by pdcelec

Share this post


Link to post
Share on other sites

Good catch. The instructions are indeed missing the part about the files reset.css and ui_tabs. (Plus the having 'upgrade' in the title of the instructions is a bit confusing. ) I'll post new instructions shortly. Please however, send me a link to your site so I can take a look before I post anything.

 

The reset.css and ui_tabs.css file are included in the download (I just checked the OSCommerce site) and should be in your catalog/css folder. Add the call to the two in application_top.php and your alignment issue should resolve.

 

In other words, what you paste into application_top.php should be:

 

$doctype='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">';

$stylesheet='
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/css-buttons.css" />
<link rel="stylesheet" href="css/superfish.css" />
<link rel="stylesheet" href="css/json-addtocart-themes.css" />
<link rel="stylesheet" href="css/ui_tabs.css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></ script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/ javascript"></script>
<script type="text/javascript" src="javascript/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="javascript/superfish.js"></script>
<script type="text/javascript" src="javascript/osc_cart.js"></script>
';

Edited by npn2531

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

ps,

 

The alignment issue you are describing is kind of classic for floating issues. The rock solid 960 grid system fits all the pieces perfectly in place, with perfect width, exactly 960 pixels across. Thats why the reset.css is important. It resolves the discrepancies in how the different browsers calculate the 'box model' (google css and box model). It 'prevents' IE, for example, from adding width to any block level div that has a border other than '0'.

 

If the website is calculated at 961px across instead of 960px, which can happen without the reset.css, then everything stacks up.


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

my link is electricalcity dot co dot uk

 

In the categories box, there is a dash missing at the start <!-categories--> should be <!--categories-->

 

the alignment is ok in Firefox and Chrome but not in IE8. I am going through it and hoping to validate it as XHTML1.1 as I did with your version 1. I have added a couple of contribs so far with no probs. Tomorrow, I will be installing loads

Share this post


Link to post
Share on other sites

Change the doctype in application_top.php to :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

That should help resolve the IE issue. It may nudge a header down a few pixels, though, and you may have to play with top padding in some of the header elements.

 

Breadcrumbs:

If you go to includes/header.php and give the breadcrumbs more room they may stop wrapping around. ie change:

<!--Breadcrumbs -->
<div class="grid_6 alpha">

to

<!--Breadcrumbs -->
<div class="grid_8 alpha">

 

and

<!--currencies/manufacturers in header-->
<div class="grid_3 push_3 omega">

 

to:

<!--currencies/manufacturers in header-->
<div class="grid_2 push_2 omega">

 

 

I see that you have the JQuery features working fine. That's a relief.


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

I have tried the suggestions but there is still a problem in IE8. I will continue to try and resolve it as that seems to be the only thing at fault at the moment. BTW, I have successfully added a couple of contributions with no problems so far.

Share this post


Link to post
Share on other sites

I have tried the suggestions but there is still a problem in IE8. I will continue to try and resolve it as that seems to be the only thing at fault at the moment. BTW, I have successfully added a couple of contributions with no problems so far.

You can do what web developers have done since the dark ages. Isolate the situation and write a special rule in the stylesheet for IE that fixes that one glitch. In other words a CSS rule that all other browsers ignore.

It is not really difficult to do. Here is a website that walks you through it:

http://www.positioniseverything.net/articles/cc-plus.html or google 'IE' 'conditional statements' or similar.

 

If you describe the problem and how I can observe it, I will see if I can't come up with something.


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

Hi there, I want to remove column_right and although I can remove the column_right references in template_bottom, I'm struggling with the 960.css to enlarge the centre grid to fill the space column_right leaves. If you would be able to point me in the right direction it would be appreciated.

 

Thanks in advance.

Share this post


Link to post
Share on other sites

Hi there, I want to remove column_right and although I can remove the column_right references in template_bottom, I'm struggling with the 960.css to enlarge the centre grid to fill the space column_right leaves. If you would be able to point me in the right direction it would be appreciated.

 

Thanks in advance.

 

Each column is written to be 2 grid 'units' wide and the center column is 8 'units' wide. The enter site is 12 'units' Remove the right column, and the left and center are still 2 and 8 wide.

You can easily change the width of the left column by doing the following:

1) open template_bottom.php, and as you have done comment out or remove the right column. However be sure you also comment out or remove the containing grid_2 div, ie

remove all this:

<div class="grid_2" id="column_right">
	<?php 
	require(DIR_WS_INCLUDES . 'column_right.php'); 
	?>
</div><!--close column right-->

 

2) open template_top.php and change the class="grid_2" paired with the id-"column_left" to class="grid_4" ie it should end up looking like this:

 

<div class="grid_4" id="column_left">
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
</div>

 

 

3) finally you need to expand the infoboxes. Open up includes/classes/boxes.php

find this about line 78:

$this->table_parameters = 'class="grid_2 alpha" ';

 

change to:

$this->table_parameters = 'class="grid_4 alpha" ';

 

This will give you a pretty wide left column. Not ideal proportions.

To make the the column_left 3 units wide use 3 instead of 4 in the above instructions. Now, unfortunately, the center column is still 8 units wide. You will need to go through each catalog and module page and change each row of divs to be a combination of 9 units wide instead of 8 units wide. ( and in template_top.php change <div class="grid_8" id="content"> to <div class="grid_9" id="content">)

 

I will be releasing a left_column (or right_column) grid_3, center section grid_9 version in about a week for those, like myself, who prefer only one column.

Edited by npn2531

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

hi

In template_bottom.php its says includes/classes/boxes.php

change this line:

$this->table_parameters = 'class="grid_4 alpha" ';

to this:

$this->table_parameters = 'class="grid_2 alpha"

 

But in includes/classes/boxes.php it says $this->table_parameters = 'class="infobox"';

 

I am assuming that this is not the correct boxes.php file

Share this post


Link to post
Share on other sites

In includes/classes/boxes.php the place to change is here, about line 76

 

class cssinfoBoxHeading extends csstableBox {
   function cssinfoBoxHeading($contents,  $left_corner = true, $right_corner = true,  $right_arrow = false) {
     $this->table_parameters = 'class="grid_2 alpha" '; 
     if ($right_arrow == true) {

       $right_arrow = '<a  href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . '../images/cssv2-arrow-right.png','arrow right','','',ICON_ARROW_RIGHT,'right_arrow') . '</a>';
     } else {
       $right_arrow = '';
     }

:

 

change the class="grid_2 alpha" to class="grid_4 alpha", or class="grid_3 alpha"

 

 

 

This line below is not the place to change :

$this->table_parameters = 'class="infobox"';


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

You can do what web developers have done since the dark ages. Isolate the situation and write a special rule in the stylesheet for IE that fixes that one glitch. In other words a CSS rule that all other browsers ignore.

It is not really difficult to do. Here is a website that walks you through it:

http://www.positioniseverything.net/articles/cc-plus.html or google 'IE' 'conditional statements' or similar.

 

If you describe the problem and how I can observe it, I will see if I can't come up with something.

 

I have tried the conditional statements and I am struggling. The problem is that column_left, main page and column_right are all stacked vertically on the left in IE8 browser.All other browsers are fine. I have tried the dev tools in IE8 with outline divs set to on and I cannot see where the problem lies. I must admit that css is not something that I have studied much until now but I am trying to learn it along with the other parts of web manipulation. When I view your test site ..../ninesixty, I get the same results

Share this post


Link to post
Share on other sites

The grid 960 system has strict rules on about adding borders, margins, padding to the left and right. It only takes one pixel to stack things up. The fix will be finding the offending selector one of the stylesheets, most likely in styles.css. On one or maybe two selectors a left or right border, padding, margin, or a pixel too much width has been added where it shouldn't be. I will start working through styles.css and see if I can't find it. The technique will simply be to work down the stylesheet removing borders then, padding, margins or finally widths from the selectors and see what fixes it. Most likely a border.

 

 

It is also not beyond the realm of possibility that the problem is in one of the stylesheets for the JQuery elements, but not likely. However, don't touch the 960.css stylesheet. It is the pure unadulterated stylesheet from 960.gs site.


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 grid 960 system has strict rules on about adding borders, margins, padding to the left and right. It only takes one pixel to stack things up. The fix will be finding the offending selector one of the stylesheets, most likely in styles.css. On one or maybe two selectors a left or right border, padding, margin, or a pixel too much width has been added where it shouldn't be. I will start working through styles.css and see if I can't find it. The technique will simply be to work down the stylesheet removing borders then, padding, margins or finally widths from the selectors and see what fixes it. Most likely a border.

 

 

It is also not beyond the realm of possibility that the problem is in one of the stylesheets for the JQuery elements, but not likely. However, don't touch the 960.css stylesheet. It is the pure unadulterated stylesheet from 960.gs site.

 

I have narrowed it down a bit. If you turn off the information box in column_left, everything is fine. Now to find the prob with the information box

Share this post


Link to post
Share on other sites

I have tried the conditional statements and I am struggling. The problem is that column_left, main page and column_right are all stacked vertically on the left in IE8 browser.All other browsers are fine. I have tried the dev tools in IE8 with outline divs set to on and I cannot see where the problem lies. I must admit that css is not something that I have studied much until now but I am trying to learn it along with the other parts of web manipulation. When I view your test site ..../ninesixty, I get the same results

 

Before I get started, are you seeing this issue on all the pages, some of the pages, or just the index?

 

try adding this to your stylesheet:

 

.divider-tall{
clear:both;
}

 

That's left over from the old version and I see I didn't get them all, at least on the index page.

 

That has been replaced by two selectors:

 

.clear and .spacer

 

In others words,

class="divider-tall"

 

should be class="clear spacer"


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

I get it on all pages. I have gone a stage further and found that if the information inside the box is remmed out then the box itself appears fine and the page is fine. I will keep digging

Share this post


Link to post
Share on other sites

On the information box includes/boxes/information.php, There is a typo. The closing /ul is missing the final >.

 

If that doesn't fix it then just change the unordered list to just line breaks. There is a large default left margin on unordered lists. ie change this:

 


'<div class="clear"></div><ul><li><a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . BOX_INFORMATION_SHIPPING . '</a></li>' .
                                        '<li><a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a></li>' .
                                        '<li><a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a></li>' .
                                        '<li><a href="' . tep_href_link('faqs.php') . '">' . 'Faqs' . '</a></li>' .
                                        '<li><a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a></li></ul');

 

to this:

 

'<div class="clear"></div><a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . BOX_INFORMATION_SHIPPING . '</a><br>' .
                                        '<a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a><br>' .
                                        '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a><br>' .
                                        '<a href="' . tep_href_link('faqs.php') . '">' . 'Faqs' . '</a><br>' .
                                        '<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a><br>');

Edited by npn2531

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 demo site at ninesixty should look fine on your end now. I have changed the unordered list to line breaks.

 

Adding the missing > has cured the problem!!!! Yes the alphaclear looks fine to me. Onto the next!!!!

Share this post


Link to post
Share on other sites

Whew! Thanks for working on this and spotting the issue. I'll get this fix posted on the contribution.

 

 

I will be using this a basis for my site so it is the least I can do. I have successfully installed the following with no isuuse

 

Categories enable/disable 1.6

KISS MT

KISS ER

PHP5.3 compatibility (replacing HTTP_GET_VARS and HTTP_POST_VARS with _GET and _POST) and replaced all the ereg functions

 

Currently adding Sams anti hacker ( this ones a bit more challenging to integrate but I will get there)

 

Thanks for a great contrib

Share this post


Link to post
Share on other sites

Yes valid css 2.1!!!

 

Next mission is to validate it as XHTML 1.0 STRICT and maybe even XHTML1.1

 

I have found another problem whilst doing this,

 

The currencies are not changing.

 

More detective work required. I am learning alot doing this

 

Just found the manufacturers_info.php has tables in it. Sorry

Edited by pdcelec

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

×