tutorialtastic

Coppermine: Theme Basics

Coppermine is controlled by an intense PHP theming system but changing the look is not as hard as it looks. The majority of the layout is controlled from within a single HTML file, which contains keywords that 'insert' parts of gallery where required. I've based this tutorial on the tutorial.html file in the Classic theme directory (Themes ยป classic).

The entire template can be deconstructed, terrible tables removed and placed into any layout you choose. While all template keywords must be included for the template to work, it is possible to use HTML commenting (<!-- comment -->) to remove unwanted parts of the template. Here are the template keywords that are relevant to the direct appearance of the gallery and what they display by default:

Keyword Default Value
{CUSTOM_HEADER}
{GAL_NAME} Coppermine Photo Gallery
{GAL_DESCRIPTION} Your online photo album
{SYS_MENU} Home :: My Gallery :: (etc)
{SUB_MENU} Album List :: Last uploads :: (etc)
{LANGUAGE_SELECT_FLAGS}
{THEME_SELECT_LIST}
{LANGUAGE_SELECT_LIST}
{ADMIN_MENU} [Config] [Categories] (etc)
{GALLERY} (Two Tables) Random files & Last Additions
{CUSTOM_FOOTER}
{VANITY} (Various validation buttons)

Customise the theme like you would a typical layout, only instead of writing out the content simply use the template tag. I recommend that you only edit the content between <body> and </code>, it's really the only stuff that's relevant. Need an example to help you along? Why not try something like this:

(header/meta coppermine stuff)
<body>
   <div id="container">
   <!-- {CUSTOM_HEADER} -->
      <div id="header">{GAL_NAME} <br /> {GAL_DESCRIPTION}</div>
      <div id="navigation">{SYS_MENU}</div>
      <div id="subnavigation">{SUB_MENU}</div>
   <!-- {LANGUAGE_SELECT_FLAGS} -->
   <!-- {THEME_SELECT_LIST} -->
   <!-- {LANGUAGE_SELECT_LIST} -->
      <div id="admin_nav">{ADMIN_MENU}</div>
      <div id="gallery_tables">
      {GALLERY}
      </div>
   <!-- {CUSTOM_FOOTER} -->
      <div id="validation">{VANITY}</div>
   </div>
</body>
</html>

This can then be customised in the stylesheet (in the same directory as the template file) like any normal layout using normal CSS styling.

Tags: coppermine, script-modding,
Last Updated On: 15th February 06 by Jem
Bookmark At: StumbleUpon, Digg

tutorialtastic — ultimately better than pixelfx
Copyright © Jem Turner 2003-08. (About | Disclaimer | Link In)