The following is a rough outline, with background, on what you need to do to create your own skin in ccHost.

Create the Skin

• Go to the cctemplates directory
• Copy all the files skin-simple*.* to skin-joesoft*.*
• In skin-joesoft.xml on approx. line 25, replace the reference to string:skin-simple-map.xml with string:skin-joesoft-map.xml
• Log in with the admin you created during setup
• Click 'Manage Site'
• Scroll down and click 'Settings'
• Select 'joesoft' from the the skins drop down and Submit

You now have your own sand box.

What Makes a 'Skin'

Each skin has three unique files, a style sheet, a template map and a main template.

CSS Style Sheet

100% (or close) of the style information is here, not in the code, not in the templates. You should be able to hork things pretty good if you never do anything but edit this one file.

Template Map and Main Page

You only need to mess with templates if you really hate the layout and can't position using CSS (hey, it happens and yes, we use tables occasionally)

We use phpTAL for our templates. (It's 90% amazing, 10% head scratching crazy.)

Hint: phpTAL is 100% XML so

<hr> 
<img src=""> 

don't work, It's

<hr/> 
<img src="" />

Each area of the screen in ccHost/Mixter is represented with a template macro

<metal:block define-macro="show_remix_children">
 <tal:block define="reply record/local_menu/remix/replyremix | nothing" on-error=""/>
 <tal:block define="do_children record/has_children | reply | record/is_orphan_original" tal:on-error="" />
 <div id="cc_upstream_mixes" tal:condition="do_children" >
     <p tal:condition="record/is_orphan_original" id="noonesampled" tal:content="php: CC_lang('(no one has sampled this)')" /> 
/* .... etc ...*/
</metal:block>

These templates blocks are shared amongst skins and many outer templates refer to inner ones:

<metal:block define-macro="show_remix_children">
...
             <metal:block use-macro="${remix_line}" />
...
</metal:block>

In the example above, the actual implementation of 'remix_line' is determined by the Template Map file. In skin-joesoft-map.xml you see that you inherit the default map from skin-blank. If you want to override a specific template, you add a single block to your map file that will do that for you (see skin-ccmixter-map.xml for an example):

<tal:block define="
   remix_line string:skin-joesoft.xml/joesofts_remix_line;
"
 />

Now you're (finally) ready to write some XHMTL. In skin-joesoft.xml add your template:

<metal:block define-macro="joesofts_remix_link">
...
    <a class="js_remix_link" href="${rs/file_page_url}">${rs/upload_name}</a>
...
</metal:block>

Hint: Don't put too many macros in the same XML file, it slows down page rendering. A lot.

Viewing Variables

You can dump various records at any time, right onto the screen.

First, you must enable CcHost#Outputting_Debug_Messages#debug mode.

Then, as long as you logged in as admin, on any page browse to:

 http://localhost/?dump_page=1

Tthat will list out all the global variables available to you (the user record is the currently logged in user).

Upload an MP3 (or image or whatever) to your system. Then on the song's page add the dump_rec query:

 http://localhost/media/files/3?dump_rec=1

That will list out all the variables in a given upload record (the user record here is the one that uploaded the thing).

Go crazy.

Support

At some point you'll probably request something that requires code changes, I think you'll find us very responsive to most things, however, you might be surprised how much interactivity policy is defined in the templates themselves.

After you reach a certain point we'll give you access to one of the many dev mirror sites we have all around the web and you can use that to test out your skin against real ccMixter data and it gives us a chance to praise you, point out issues, add internal hacks and make suggestions.