Jump to content
Sign in to follow this  
npn2531

Convert OSCommerce 2.2RC2a to table-less CSS

Recommended Posts

Camino and Opera show the same issue.

 

Camino is actually a little worse.

 

cami-flaw.png

 

 

Alan, perhaps the positioning given the image, the arrow, is not appropriate for Opera or Camino. Go to line 476 on stylesheet.css and play with this:

 

 img.right_arrow{
float:right;
left:10px;
}

 

and see if that helps.


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

It is possible. The programming is the same, it's the html that's different.

 

However, Each of the converted pages needs the converted new files includes/template_bottom.php and includes/template_top.php AND the converted includes/languages/english.php, includes/classes/boxes.php, and the converted stylesheet.css.

 

The new stylesheet.css and the includes/languages/english.php are going to conflict. It will not be hard to rename the new stylesheet, upload it as a second stylesheet and change the stylesheet call in the header of each new page to match. The english file I'm not sure about, but all the new english file is going to do is cause the header titles in the existing infoboxes to be a bit screwy.

 

 

Okay thanks I will play with a copy store and see how I get on coverting, but before I do I have sts installed and wondered if it be an issue.

 

As far as I can see it maybe an issue/ not actually needed to have both????.

 

Thanks


Getting better with mods but no programmer am I.

Share this post


Link to post
Share on other sites

Alan, perhaps the positioning given the image, the arrow, is not appropriate for Opera or Camino. Go to line 476 on stylesheet.css and play with this:

 

 img.right_arrow{
float:right;
left:10px;
}

 

and see if that helps.

OK, that break in the verticals only happens in Camino, Opera shows exactly the same issue as Firefox. I'm not going to worry too much about Camino, it's a low penetration browser, kind of a Mac native Firefox, built with Cocoa. It's useful for geeks though.

 

About that

</head>

tag?

 

:blush:


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

I'm not familiar STS, but it is really difficult for me to imagine that there would be any way it would work to have both installed. I think it would be a nightmare to sort it out.

 

However, your second question is an interesting one. A template program has a lot of advantages. Look for example at Wordpress. In a couple of mouse clicks, you can have a completely new website. On the other hand if you don't like the template, or need to make changes, then a program with a template installed is more complex than a program without a template structure.

 

I personally prefer the less complex alternative. And CSS provides a powerful tool to redesign a website. You can change nearly anything from the stylesheet. You do need to know CSS, but CSS is like HTML. It is not programming, it's not coding. It is just learning the rules and practice. Look at this site http://www.csszengarden.com/

It an ongoing 'contest' to demonstrate the flexibility of CSS. The rules are simple, - see who can make the coolest site, by doing nothing more than changing the stylesheet and the images.

 

In other words, you can literally have the stylesheet and the images folder be the 'template'. And jeez, that is really nice, to be able to design a site, by never (or nearly never) having to open more than the stylesheet. My ideal it is have the website open on one computer, and the stylesheet on an second. Then I just design away, making changes to the stylesheet one one computer and hitting the refresh button on the other computer.

 

That ideal is the reason why I took the time to do this conversion.

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

OK, that break in the verticals only happens in Camino, Opera shows exactly the same issue as Firefox. I'm not going to worry too much about Camino, it's a low penetration browser, kind of a Mac native Firefox, built with Cocoa. It's useful for geeks though.

 

About that

</head>

tag?

 

:blush:

 

 

Hi Alan,

 

Look in template-top.php. There is a closing tag right at the top, that functions as the common closing head tag for all the pages. The purpose is to give you the option of installing javascript between the head tags site wide, or just for a single page, or a combination.

 

it should look like this:

 

 <?php
/* Niora www.niora.com  */
?>
</head>
<body>

 

There should be no closing tags on any of the top level catalog pages. I just checked the version posted on the website and, like it is supposed to, there are no closing head tags on the catalog pages. If you do have closing tags on any your pages, then somehow I must have posted in the first version wrong.

 

The fix is easy, just make sure that the closing tag is the first thing in includes template-top.php, and delete the closing head tag in all the catalog pages. The closing head tag if it is in the catalog pages will be directly above. Hopefully it will not be there.

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


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'm not familiar STS, but it is really difficult for me to imagine that there would be any way it would work to have both installed. I think it would be a nightmare to sort it out.

 

However, your second question is an interesting one. A template program has a lot of advantages. Look for example at Wordpress. In a couple of mouse clicks, you can have a completely new website. On the other hand if you don't like the template, or need to make changes, then a program with a template installed is more complex than a program without a template structure.

 

I personally prefer the less complex alternative. And CSS provides a powerful tool to redesign a website. You can change nearly anything from the stylesheet. You do need to know CSS, but CSS is like HTML. It is not programming, it's not coding. It is just learning the rules and practice. Look at this site http://www.csszengarden.com/

It an ongoing 'contest' to demonstrate the flexibility of CSS. The rules are simple, - see who can make the coolest site, by doing nothing more than changing the stylesheet and the images.

 

In other words, you can literally have the stylesheet and the images folder be the 'template'. And jeez, that is really nice, to be able to design a site, by never (or nearly never) having to open more than the stylesheet. My ideal it is have the website open on one computer, and the stylesheet on an second. Then I just design away, making changes to the stylesheet one one computer and hitting the refresh button on the other computer.

 

That ideal is the reason why I took the time to do this conversion.


Getting better with mods but no programmer am I.

Share this post


Link to post
Share on other sites

I will think about this some more, got a lot of things in my head I need to look at/ try. reducing page size by using smaller files is something I am looking at.

 

I may use a cross breed to see how I get on using what I can pinch from both.

 

Really like the conversion,

 

Thanks


Getting better with mods but no programmer am I.

Share this post


Link to post
Share on other sites

Just a quicky question if you're watching, seems silly but it could save me some time.

 

Where do you define $stylesheet so as to make it global or define it at all?

 

I'm in a multi file search of your download (a fresh unpack) and nowhere is $stylesheet defined.

 

I got it up and running with only two errors (remember I merged it into the latest git version) but as soon as it loaded I knew it wasn't finding any stylesheet. I thought this has to be a simple goof on my part but I'm not so sure now.

 

I was expecting to see it defined somewhere as I went along, probably in application top but then I forgot all about it.

Edited by AlanR

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

It's not actually in the file set of the contribution, but is something you have to paste into your existing application_top.php. The code is in the installation_html file and with the added docfile declaration should look like this:

 

$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" type="text/css" href="stylesheet.css">'; 

 

I suggest a spot in the installation file to paste it in, near the bottom of includes/application_top.php, but it is not critical, just as as long as it properly within php tags.

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

Oh, the old “read the directions” trick huh?

 

I'm too old for that kinda stuff. ;)


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

Well, it's going now and versioned so I'll make the change above for the doctype and switch to the apple-gray-template (which I quite like) and see what else I need to play with.

Edited by AlanR

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

I'm puzzled

 

There's one line which has been modified in several files in the newest git version which causes issues.

 

I'll just give login.php for example although the problem occurs in several files which use a submit button.

 

The line as in the contribution is...

 

if (isset($HTTP_POST_VARS['action']) && ($HTTP_POST_VARS['action'] == 'process')) {

 

The updated line is...

 

if (isset($HTTP_POST_VARS['action']) && ($HTTP_POST_VARS['action'] == 'process') && isset($HTTP_POST_VARS['formid']) && ($HTTP_POST_VARS['formid'] == $sessiontoken)) {

 

This is presumably done to help prevent automated registrations and other operations.

 

The unmodified system (without the CSS) works fine. Once the mod is installed the pages simply refresh.

 

I've looked fairly hard and tried this and that to try and understand why this is a problem but it's pretty obscure, at least to me. Any ideas?

 

You only need to try the change one file to see the problem, login.php is fine.

Edited by AlanR

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

If it occurs in all pages uniformly, it is most likely something in includes/application_top.php. The only changes to application_top.php are with contributions, esp. the Header Tags and SEO. Try it with a brand new application_top.php from the OSCommerce site.

 

When I get some time tomorrow I'll try the same thing.


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
Try it with a brand new application_top.php from the OSCommerce site.

I'm not using application_top from you, I started with a fresh version from git and there were no changes to application_top other than the stylesheet and the doctype definitions.

 

That's why I'm puzzled, as I said it's pretty obscure, most likely something to do with sessions.

 

It works without the extra tests but I figure the more secure the better, might as well fix it now if I can.


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

Actually my last post might have given me a clue but I'm in the middle of something else so I can't take time to experiment now. It might be really simple, probably is.


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

The issue must be with OSCommerce and not the contribution. Here is a test site I installed about 2 months ago. http://www.adult-acne-treatments.com/catalog/login.php

It is clean install with no contributions.

 

On that site I just replaced on login.php :

if (isset($HTTP_POST_VARS['action']) && ($HTTP_POST_VARS['action'] == 'process')) {

 

with:

if (isset($HTTP_POST_VARS['action']) && ($HTTP_POST_VARS['action'] == 'process') && isset($HTTP_POST_VARS['formid']) && ($HTTP_POST_VARS['formid'] == $sessiontoken)) {

 

In other words the code from git version you posted above. Sure enough, If you try and sign on, if you hit the submit button, the page just refreshes. If you just hit the submit button without filling in the email and password, instead of getting an error message, the page refreshes.

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
In other words the code from git version you posted above. Sure enough, If you try and sign on, if you hit the submit button, the page just refreshes. If you just hit the submit button without filling in the email and password, instead of getting an error message, the page refreshes.

 

It generates a new session id each time, that's a clue.

 

I tested by blocking cookies in my browser, forcing the session id into the url. Each submit results in a fresh session id.


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

I think Mark may need to revisit this change. I tried blocking cookies on the vanilla site based on the github version and it's impossible to log in. Could be this change makes the system too fragile, it's not just an issue with your mod.

 

I'll make a note on the github commit.


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

I was tidying things up a bit and it kind of offended me to use a variable name for something which is a constant so I put the stylesheet and the doctype definitions in configure.php, at the bottom, like so.

 

  define('DB_SERVER', 'localhost');
 define('DB_SERVER_USERNAME', 'root');
 define('DB_SERVER_PASSWORD', 'password');
 define('DB_DATABASE', 'osc');
 define('USE_PCONNECT', 'false');
 define('STORE_SESSIONS', 'mysql');

 define('STYLESHEET', '<link rel="stylesheet" type="text/css" href="stylesheet.css">');
 define('DOC_TYPE', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
');
?>

configure.php is the closest thing we have to a constants.php includes file aside from filenames.php and I didn't want to make things too complicated.

 

Then I changed all occurrences of $stylesheet and $doctype to the corresponding constant names.

 

The odd little return at the end of the DOC_TYPE definition forces the next line in the source down to the next line.


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

Actually the definition for STYLESHEET needs that odd return as well to keep the source code looking pretty.


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

I don't like putting the two definitions in confige at all. For starters the stylesheet is not a constant. You can use, often people do, more than one stylesheet for a page. You can use, and often it is a good idea for some pages to use different stylesheets than other pages. Really the stylesheet is not a constant. With the variable set up like it is, you can simply delete the $stylesheet from the header of a page and put in something unique. You can also just list one stylesheet after the other in the definition. Some pages for example may have elements to print, and you might want to use a unique stylesheet for that.

 

The doctype, is not in the confige now, and again, for all I know some people may choose to use different doctypes for different pages.


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're right about different styles for different places.

 

phpBB uses a sophisticated stylesheet system with the stylesheets “compiled” into the database. It's kind of like being able to edit the style sheet from the admin section. I use 6 or 7 stylesheets in phpBB but they all get merged into one in the db. You can achieve the same thing in a way by adding additional style sheets in other ways.

 

I don't know about trying to change definitions on the fly from page to page, users will see unexpected results because some users will have the stylesheet cached in their browsers, it can't be trusted. You learn this real fast with phpBB, you have to purge your browser cache every time you tweak your stylesheet or else you won't see your changes.

 

The solution for that is to add more definitions if a page needs different parameters.

Edited by AlanR

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

Here's a couple examples

 

<link href="./styles/prosilver/theme/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="./style.php?sid=9b911f947ab35d15612dc7fbe2eadf0e&id=1&lang=en" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="./styles/prosilver/theme/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="./styles/prosilver/theme/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="./styles/prosilver/theme/large.css" rel="alternate stylesheet" type="text/css" title="A++" />


<link rel="stylesheet" href="http://www.dailykos.com/css/widewads.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://www.dailykos.com/ads/adblocker.blogads.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://www.dailykos.com/css/wpoll_neu.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://images2.dailykos.com/images/admin/poll_table.css" type="text/css" media="all" />
<link href="http://images2.dailykos.com/assets/weekly.css" rel="stylesheet" type="text/css" />
<link href="http://images2.dailykos.com/assets/image_upload.css" rel="stylesheet" type="text/css" />


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

To just type in $stylesheet= 'stylesheet.cc'; is as you point out is using it as a constant, but with the stylesheet declaration in application-top.php you would have the option of easily doing something like this:

 

 

if 'browsertype'==opera { (please ignore my shorthand for the proper syntax)

 

$stylesheet='stylesheet_opera.css

}else{

$stylesheet='stylesheet.css'

}

 

Then it is not a constant.


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

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  

×