If you have any suggestions for this page, please send email to scott@turnstyle.com.

Over time, CSS classes will be coded into Andromeda for even greater control.

Step 1: Set up an Andromeda skin
For optimal browser compatibility, you should start by making an Andromeda skin file. You can set font colors in your skin, but not font size or face.

Step 2: Make a blank CSS file
To use CSS with Andromeda, you need to create an external CSS file. Start by creating a blank text file named style.css (or whatever) and saving it in the same folder with your Andromeda script. Make sure to apply the appropriate file permissions, if necessary.

Step 3: Tell Andromeda to include your CSS file
Create (or modify) your Andromeda prefs file, to include a setting pointing cssLinkHref to style.css. Use either an absolute or relative url. For more information about prefs files, click here. This will add the following HTML to your site's HEAD:

<link rel="stylesheet" type="text/css" href="style.css">

You can then even add that HTML to other pages on your site so they all share the same style. (handy!)

sample andromedaPrefs.php

<?php #cssLinkHref[tab]  style.css ?>

sample andromedaPrefs.asp

<% 'cssLinkHref[tab]  style.css %>

Simple case: Standalone Andromeda
Copy and paste the code below into your style.css file. It sets the font size and face of folder and file links, navigation bar and other links, and non-link text. Play around with it, and get more settings from this page.

/* folder and file links */ A FONT { FONT-SIZE: 16px; FONT-FAMILY: Helvetica, Arial; } /* navigation bar and other links */ A { FONT-SIZE: 12px; FONT-FAMILY: Tahoma; } /* non-link text */ FONT { FONT-SIZE: 12px; FONT-FAMILY: Tahoma; }

More complex case: Andromeda 'wrapped' within another interface
If you're running Andromeda within another interface, you might want to isolate it, so that you can modify its attributes separately from the rest of your site.

Start by wrapping your Andromeda within a SPAN tag. This lets us assign a CLASS to Andromeda. Once that's done we can modify it separately. The example below assigns opening and closing SPAN tags to the absoluteHeader and absoluteFooter preferences. For more info about integrating Andromeda into another site, click here.

sample andromedaPrefs.php

<?php #cssLinkHref[tab]  style.css #absoluteHeader[tab]  <span class="andromeda"> #absoluteFooter[tab]  </span> ?>

sample andromedaPrefs.asp

<% 'cssLinkHref[tab]  style.css 'absoluteHeader[tab]  <span class="andromeda"> 'absoluteFooter[tab]  </span> %>

Now if you copy and paste the code below into your style.css file, it only sets fonts within Andromeda. Play around with it, and get more settings from this page.

/* folder and file links */ .andromeda A FONT { FONT-SIZE: 16px; FONT-FAMILY: Helvetica, Arial; } /* navigation bar and other links */ .andromeda A { FONT-SIZE: 12px; FONT-FAMILY: Tahoma; } /* non-link text */ .andromeda FONT { FONT-SIZE: 12px; FONT-FAMILY: Tahoma; }