How do I link stylesheets outside of the theme.cfg file and have them work in Interchange?

Posted August 4, 2005

It’s been a long time since I posted, gosh, almost a year since I typed in this section. But now at work I am in the process of working on my second fully customizable interchange ecommerce website. I worked on one soon after I started, but that one fell through right near the end.

Let me back up, if you are already here, you probably know what interchange is, but it isn’t common knowledge, not as much as Smarty or Mambo. Interchange, in my limited understanding, is a flexible ecommerce open source code base written with a PERL base. The base setup or “store” as it is referred to has components that are customizable, and has in general a ton to work with, but is very confusing. I don’t tend to use the online admin interface too much, relying on my other development knowledge to allow me to work in Dreamweaver and Homesite primarily. Learn more at the interchange developers website.

Enough of that, what I am going to be discussing here today is simple, stylesheets in Interchange. In Interchange, all of the styles that make up the look of the “store” are located in the theme.cfg file. If you haven’t found this yet, you are really at a beginning level. Usually when I start a site, I have the base store, and in that store is this folder structure where your theme.cfg file should be located;

catalogs > shop1(Shop name) > templates > blueyellow (default store)

Catalogs is where you start, not public_html like traditional website data. In the public_html area there may actually be a link pointing back to the catalogs folder. Shop1 is the name I chose, but can be anything, you just have to pay attention. We have multiple shops set up for development before transfered to the primary server, all the way up to Shop5. Blueyellow is the default style the store is setup to appear online. You can change that in the admin interface, but that is a seperate entry in itself. You will see other styles in the templates folder, including purpleyellow and grayorange. All of the base “stores” look pretty much the same, except there are in a color scheme represented by the name, hence Blue - Yellow.

Within you chosen style folder (blueyellow) you should see a file called theme.cfg. Open this file in Homesite, Notepad, or some other text based editor and take a look at it. You will see something like this;

# This file defines the variables for templating.

ParseVariables Yes

# Theme images directory
Variable THEME blueyellow
Variable THEME_IMG_DIR __THEME__/
Variable THEME_LOGO __THEME_IMG_DIR__/logo.gif

ifdef LOGO
Variable THEME_LOGO __LOGO__
endif

##
## Set a default CSS theme which can be overriden in Preferences
##

ifndef THEME_CSS
Variable THEME_CSS >>EOV
>STYLE TYPE=”text/css”>

BODY { background-color: #FFFFFF;
font-family: Helvetica;
font-size: 12px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

TD { font-family: Helvetica;
And on and on….

Anyone with any basic HTML sense knows that the latter part of this is a stylesheet. This is what determines most of the look of the base Interchange store and can be edited to your liking. This is just a basic framework however, and if you are designing an Interchange site, I recommend pretty much starting from scratch unless your customer really doesn’t appreciate the benefits of an identity and branding.

Here is the kicker. In your browser you need to be logged into the admin interface as you are developing because everytime you change something in this sheet and ftp it to your server, the changes won’t take place until you click a link called “apply changes”. This basically recompiles the database and such with your changes and re-renders it out to the screen. This is one too many steps, and takes a ton of time. After a handful of sites, I said, there has got to be a better way to do this. I did find a different way that skips the “apply changes”, but structurally it isn’t the best.

I actually cut and removed all of the styles from the stylesheet and put them in a regular sheet with a .css extension. Then I made a styles directory in my images folder (in with templates, pages, and session among others) and published it to my server. I them made a regular link in my template regions to the sheet and published those. (Template regions is a whole other entry to write, but if you want to find your base templates, look in the “regions” folder once you are inside of the store base site like blueyellow)

This works! I was so happy. Publish and refresh the page and Interchange updates, no apply changes and wait for recompile. I do have a problem with the fact that it is not in a styles folder in the root of the site, but to save time this is more important.

Now, by doing it this way, it does become a stylesheet. You can parse through the sheet like you can when it is a theme.cfg file for any ITC variables through Interchange. That can be a downside I guess. I don’t really understand the point in how much time those variables really save, but maybe there are set more for consistency.

Today I actually explored putting the stylesheet in both the root, and in the pages directory, neither seem to work. I tried resetting the permissions on the directory and the file to match those set on images and their directories, but it didn’t seem to work. I assume that it is something I need to setup in one of the databases, but I am not sure. I am not a hardcore programmer, so most of that stuff is a little foreign to me.