Jump to content
Sign in to follow this  
npn2531

Convert OSCommerce 2.2RC2a to table-less CSS

Recommended Posts

I think, in playing with the ability to roller, I have found some type of bug..

 

I was looking at your basic osc template and you seem to be calling ALL of your javascript files from outside of the <head> tags and within the <body> tags.. this is a major issue for most scripts because they need to be called first in order for them to work properly.

 

I have NO IDEA how this is happening but no matter where I place the script source code in the index.php file, they are ending up in the body and NOT in the head..

 

I think it has something to do with how you are calling the template top file and/or the header files?? I have NO CLUE..

 

I have basically tried adding my script source codes directly after the <head> tag in the index.php page AND tried adding it right before the </head> tag in the template_top.php

 

Any thoughts?? Cause the only javascript that seems to be working is the lightbox that you had pre-installed.. and lightboxes aren't really relient on that stuff..

Hi Lindsay,

 

Check includes/template_top.php. The closing head tag is there above the opening body tag. That way if you want to add a javascript function site wide, you place it above the </head> in includes/template_top.php. If you want to place only on a specific page you place above

<?php require(DIR_WS_INCLUDES . 'template-top.php'); ?>

on the specific file.


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 think, in playing with the ability to roller, I have found some type of bug..

 

I was looking at your basic osc template and you seem to be calling ALL of your javascript files from outside of the <head> tags and within the <body> tags.. this is a major issue for most scripts because they need to be called first in order for them to work properly.

 

I have NO IDEA how this is happening but no matter where I place the script source code in the index.php file, they are ending up in the body and NOT in the head..

 

I think it has something to do with how you are calling the template top file and/or the header files?? I have NO CLUE..

 

I have basically tried adding my script source codes directly after the <head> tag in the index.php page AND tried adding it right before the </head> tag in the template_top.php

 

Any thoughts?? Cause the only javascript that seems to be working is the lightbox that you had pre-installed.. and lightboxes aren't really relient on that stuff..

Hi Lindsay,

 

I

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

need some help with the osc to css button output.

 

I tried to add a contribution that basically adds a class of "rollover" to all tep_image_button instances via a simple change in the htmloutput.php file.. This essentially should turn all buttons into a rollver, but unfortunately it does not and i am THINKING it is because you have changed the html output..

 

Any thoughts on this??

 

 

here is the addon in question

It is done differently. I have posted instructions and examples on how to do a roll over button on the CSS-OSC here:

http://www.niora.com/oscommerce-ultimate-buttons.php

 

PS - because you are using OSC to CSS you do not need change includes/functions/html_output.php. It is mostly already done. Just make sure the class="buttons_submit" in on the referenced functions.

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

Firstly thanks for this contribution.

 

One thing I'm having problems with is the size of the header. If there is an error on the page or I try to use a bigger logo than the one included in the contribution it pushes everything down overlapping the info boxes and the main text. I can get around this by editing the header.php file and add <div> </div> at the top and bottom (see below)and then set the margin top to 0px in #page section of the css file.

 

Is this the best way to do this or is there a cleaner way of doing it?

 

<div>

<!-- BOF HEADER -->

<?php /*** Begin Header Tags SEO ***/ ?>

<span id="header-logo">

<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'logo.gif', (tep_not_null($header_tags_array['logo_text']) ? $header_tags_array['logo_text'] : STORE_NAME)) . '</a>'; ?>

</span>

<?php /*** End Header Tags SEO ***/ ?>

<span id="header-navimages">

<?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>  <a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>  <a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?>

</span>

<div class="divider-header"></div>

 

 

<div id="header-navaccount">

<?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>

</div>

<div id="header-breadcrumbs">

<?php echo $breadcrumb->trail(' » '); ?>

</div>

 

<div class="divider-header"></div>

<?php

if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {

?>

<div class="header-error"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['error_message']))); ?></div>

<?php

}

 

if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {

?>

<div class="header-info"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['info_message']))); ?></div>

<!-- EOF HEADER -->

</div>

Share this post


Link to post
Share on other sites

Here is a cleaner way: Adjust the size of the header (or rather the space needed for the header) from the stylesheet. Open the stylesheet.css and find these two selectors:

 

#header {
position: absolute;top: 0px;width:945px;padding:0px 0px 0px 0px;margin:10px 0px 0px 0px;background-color: transparent; 
}

#page {
float: left;width: 945px;padding:0px 0px 0px 0px;margin:115px 0px 10px 0px;border:0px solid #666666;background-repeat:repeat-y;background-position:0px 0px;
}

 

Note the #header position is 'absolute'. That means it ignores the placement of anything else. Which is why it is overlapping your page content, or the #page container, when you make the header image bigger.

 

However, note the #page margin:115px 0px 0px 0px. That first number 115px is the top margin in pixels above the #page container or div . Increase that number to push the content down more and allow for the increased size of your header.

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

Here is a cleaner way: Adjust the size of the header (or rather the space needed for the header) from the stylesheet. Open the stylesheet.css and find these two selectors:

 

#header {
position: absolute;top: 0px;width:945px;padding:0px 0px 0px 0px;margin:10px 0px 0px 0px;background-color: transparent; 
}

#page {
float: left;width: 945px;padding:0px 0px 0px 0px;margin:115px 0px 10px 0px;border:0px solid #666666;background-repeat:repeat-y;background-position:0px 0px;
}

 

Note the #header position is 'absolute'. That means it ignores the placement of anything else. Which is why it is overlapping your page content, or the #page container, when you make the header image bigger.

 

However, note the #page margin:115px 0px 0px 0px. That first number 115px is the top margin in pixels above the #page container or div . Increase that number to push the content down more and allow for the increased size of your header.

 

Not sure why I didn't try that in the first place works perfectly - thanks.

 

One other question I downloaded the 1st March update that you uploaded. Does this contain any code from the contributions that you have tried with OSC to CSS?

 

Thanks.

Edited by srr

Share this post


Link to post
Share on other sites

Not sure if you have another thread for the apple template you created. But would it be possible for you to provide a copy of the source files for the images in this template so that I can change the colour?

 

I would be very grateful.

 

Thanks.

Share this post


Link to post
Share on other sites

Go to :

 

blue_button

 

and you can pull it off the site.

 

Thanks for that. Would you also be able to provide the ones for the info box's and the topbar etc?

 

Thanks again.

Share this post


Link to post
Share on other sites

I have a problem with installing "jQuery - Ultimate Product Pack" on top of the OSC to CSS contribution. I have seen it working on the demo site: demo site. Could someone please post or email me the product_info.php file. I have the admin part working and it's only when displaying a product that the page layout is messed up.

 

Vidar

Share this post


Link to post
Share on other sites

I'm positive the problem is with the page height as this affects the info boxes. However I really like the these boxes, are they compatible with OsCommerce v2?

 

Hello Linus,

 

These alignment issues are resolved in the Version 2 of OSc to CSS which I should have posted in about a week. The infoboxes are reworked and the entire layout is on the rock solid 960 grid system. (Google 'Grid 960' or visit 960.gs ). You can see the new version in progress at www dot alpha-clear dot com/ninesixty.


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

I have installed the osc to css conversion and think it is a great contribution. Having just read the last post about version 2, I am holding back on installing contributions to the site. The site is only 3 days old and I dont want to add loads of contributions till osc css ver 2 is available unless you can tell me if there will be much to upgrade from ver 1.

Thanks

Share this post


Link to post
Share on other sites

Hi Pdcelec,

 

It will be tedious to upgrade if you have installed contributions. A lot of stuff is going to be different. The new version will be far easier to learn and work with. If you haven't done much in the way of installing contributions I would hold off. It will be easy however to simply upload the new version directly on top of the old version. That will be just a matter of overwriting the catalog files.

 

One thing you could do, however is upload your products and configure your store . There will be no changes to the database, or changes to the admin.

 

I should have it ready this week.


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

Trying to to download the latest full package dated 15 Sept, 2010. After clicking the download link, I get the red X ->an error occurred when unzipping.

Share this post


Link to post
Share on other sites

I just tried the download, it works okay. There is something a little goofy on your end. I'm sure it is one little annoying and obscure setting somewhere that will be easy to change. (I'm guessing, I really don't know)

 

The download system on OSCommerce is really good, though.


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 just tried the download, it works okay. There is something a little goofy on your end. I'm sure it is one little annoying and obscure setting somewhere that will be easy to change. (I'm guessing, I really don't know)

 

The download system on OSCommerce is really good, though.

I did try the full contribution for an earlier date and also the updates, with no problem. So it is just that one date 15 Sept, 2010. Just for my information, I even tried a few other contributions, all with no problems. So do not know why that one problem with that one date. Even tried your other contribution, it was a success.

Edited by blr044

Share this post


Link to post
Share on other sites

I don't know why it is a problem, there is nothing I can do. Maybe the darn internet tubes need cleaning or something.

 

The bulk mail engine is my favorite, it is just simple and rock steady. I'm glad you like it.


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've tried and retried to download OSC to CSS dated 15 Sept, 2010. Even closed browser completely and even made sure cache was cleared, still no luck. Image below:

 

osc_to_css.jpg

 

Am asking if a member could download it and attach the file to a email if not to large to send. Email address is russell044 at gmail dot com

 

Thanks in advance.

Edited by blr044

Share this post


Link to post
Share on other sites

Am asking if a member could download it and attach the file to a email if not to large to send. Email address is russell044 at gmail dot com

 

I send you the addon in 3 formats, check your mailbox for something you got from multimixer, maybe it will land in the spam folder

Share this post


Link to post
Share on other sites

Trying to to download the latest full package dated 15 Sept, 2010. After clicking the download link, I get the red X ->an error occurred when unzipping.

 

There is a problem with this package. At my end it dit not unzip with WinRar but it worked with WinZip...


---------------

regards

sijo

---------------

 

Contrib: JMrating10 - Rate your products / osCommerce VTS - Virus & Threat Scanner

 

(osCommerce VTS now also checks for leading and trailing whitespace and also have a grep function)

Share this post


Link to post
Share on other sites

I send you the addon in 3 formats, check your mailbox for something you got from multimixer, maybe it will land in the spam folder

 

Thanks George and Stein for the help.

 

Yes, I had to download WinZip to try and :thumbsup: and not use PKWare.

Edited by blr044

Share this post


Link to post
Share on other sites

First of all, I have downloaded this contribution, and for a limit time, it is in it's own directory for testing purposes. I have a few comments/questions regarding this mod.

 

1. I notice in the demo web site, there is a slight difference when viewed using IE8 and FF. You can see it in the left and right column.

 

2. Also I notice the lines in the content area is solid even though in styles.css - it as:

 

.dotted-line{

border-bottom:1px dotted #999999;

}

 

3. On my test site, it appears as a dotted line between the grids.

 

4. What's the difference between grid_6 alpha and grid_6 omega?

 

5. My information box contents list begins with a square bullet compared to numbers - ex. 1, 2, and etc.

 

6. I did as instructed, used the latest 2.2RC2A ver and then ver 2.0 of OSC to CSS plus the two updates after version 2.0

 

7. When viewing through the demo site last week, I came across a page with grid layouts templates. Now I jut can not fine it.

 

8. I had to remove the the superfish horizontal navigation menu because the number of my categories. But I always could rearrange the categories in the future so that the top nav menu will accommodate the complete list of categories.

 

9. When it states grid_8 - does it mean the text will cover an area equal of 8 grids?

 

My test site is located at wwww dot greatdiscounts4u dot com / osc_to_css/

 

Thanks for taking to read through these and answering my questions/comments.

 

Bennett

Share this post


Link to post
Share on other sites

IE, FF and browsers issues: if you can solve this sort of thing definitively, you will be a Rock Star. It's an issue with all websites. People create hacks, tricks and separate stylesheets, etc to deal with this. In fact the 960.gs is an attempt to deal with it as well. Here is a good resource:

http://www.positioniseverything.net/articles/cc-plus.html

 

Dotted line issue: There is another selector somewhere, it could be in text.css, that is overriding this. Try this:

#content .dotted-line{
border-bottom:1px dotted #999999;
}

 

Alpha and Omega. Important concepts in the 960.gs system. You can nest a grid_6 within a grid_6 only if you specify that the inner, the nested, grid_6 will have no left and right margins. class="grid_6 alpha" means no margins, and contents are to be aligned left. Omega, no margins and aligned right. Without alpha and omega you can't nest equal unit grids.

 

Go to 960.gs and also learn what the classes 'prefix_x', 'suffix_x' , 'push_x', 'pull_x' mean. They are totally awesome. For example. class="grid_3 push_1" will create a grid unit that is 4 wide, but the content area is only 3 wide but pushed over 1. You can push it right over the adjacent grid unit if you like. class="grid_3 prefix_1" will create a unit four wide, but with an empty space or margin 1 wide on the left. etc, etc.

 

Square units instead of numbers. Somewhere in the text or styles css there is a selector defining the style of the ordered lists. Use the same technique as above. Create a ol style prefixed by #content or #header etc., or find and change the existing selector.

 

Grid layout - go to 960.gs and get their download. It in you will find the grid templates. Yes, 960.gs is the entire web address. talk about branding!

 

grid_8, yes the text will cover a unit of 8 grid units minus a margin of 10px left and right


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

IE, FF and browsers issues: if you can solve this sort of thing definitively, you will be a Rock Star. It's an issue with all websites. People create hacks, tricks and separate stylesheets, etc to deal with this. In fact the 960.gs is an attempt to deal with it as well. Here is a good resource:

http://www.positioniseverything.net/articles/cc-plus.html

 

 

Thanks for this bit of info.

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  

×