Multiple Stylesheets

[♥Skittles]

I'm in the process of converting my website from a "homemade" javascript cart to osCommerce. This site uses CSS layout, and it is necessary to have all the osCommerce pages use my existing stylesheets.

 

I started out adding the link tag in the html header:

 

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="../support/mystylesheet1.css">
<link rel="stylesheet" type="text/css" href="../support/mystylesheet2.css">
</head>

 

I soon realized that this was not the most efficient way of doing this. Using the same concept as osCommerce uses, I put the link list in a separate file in the includes directory. I named it header_css.php. Then using Notetab Pro, I replaced the link to stylesheet.css in every catalog file that used it, with the code to include the new file:

 

<?php
/* stylesheets */
if (file_exists(DIR_WS_INCLUDES . 'header_css.php')) { require(DIR_WS_INCLUDES . 'header_css.php'); }
else { echo '<link rel="stylesheet" type="text/css" href="stylesheet.css">' . "\n"; }
?>
</head>

 

I set it up to replace the existing link tag, but it could just as easily be added directly below the link tag, like this:

 

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<?php
/* additional stylesheets */
if (file_exists(DIR_WS_INCLUDES . 'header_css.php')) { require(DIR_WS_INCLUDES . 'header_css.php'); }
?>
</head>

 

Order is important, so the default stylesheet needs to be listed first, in case you've made any changes to the same elements in your stylesheet.

 

I use this with just the link tags in header_css.php, and it works fine. But it would be fairly easy to use different stylesheets based on the calling page using a conditional statement.

 

As of 8/16/2006, the osCommerce version of the site is only on my development server (on my computer). However, the url is http://www.callofthewildphoto.com/. I'll post here when the changes are online.

 

-Skittles