Edit themes/yourtheme/theme.php with a plain text editor. Find the section (variable definition) for
$template_album_list_cat
and edit as suggested below. If that section doesn't exist in your custom theme, copy
// HTML template for the album list
$template_album_list_cat = <<<EOT
<!-- BEGIN c_stat_row -->
<tr>
<td colspan="{COLUMNS}" class="tableh1" align="center"><span class="statlink">{STATISTICS}</span></td>
</tr>
<!-- END c_stat_row -->
<!-- BEGIN c_header -->
<tr class="tableb_compact">
<!-- END c_header -->
<!-- BEGIN c_album_cell -->
<td width="{COL_WIDTH}%" valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="1" valign="top" class="tableh2">
<span class="alblink"><a href="{ALB_LINK_TGT}"><b>{ALBUM_TITLE}</b></a></span>
</td>
</tr>
<tr>
<td colspan="3">
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
</td>
</tr>
<tr>
<td align="center" valign="middle" class="thumbnails">
<img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" class="image" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
<a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
</td>
<td>
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
</td>
<td width="100%" valign="top" class="tableb_compact">
{ADMIN_MENU}
<p>{ALB_DESC}</p>
<p class="album_stat">{ALB_INFOS}</p>
</td>
</tr>
</table>
</td>
<!-- END c_album_cell -->
<!-- BEGIN c_empty_cell -->
<td width="{COL_WIDTH}%" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td height="1" valign="top" class="tableh2">
<b> </b>
</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
</td>
</tr>
<tr>
<td width="100%" valign="top" class="tableb_compact" >
<div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="1" border="0" class="image" style="border:0;margin-top:1px;margin-bottom:0" alt="" /></div>
</td>
</tr>
</table>
</td>
<!-- END c_empty_cell -->
<!-- BEGIN c_row_separator -->
</tr>
<tr class="tableb_compact">
<!-- END c_row_separator -->
<!-- BEGIN c_footer -->
</tr>
<!-- END c_footer -->
<!-- BEGIN c_tabs -->
<tr>
<td colspan="{COLUMNS}" style="padding: 0px;">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
{TABS}
</tr>
</table>
</td>
</tr>
<!-- END c_tabs -->
<!-- BEGIN c_spacer -->
<img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END c_spacer -->
EOT;
from themes/sample/theme.php into a new line before
?>
of the file themes/yourtheme/theme.php
Then add the inline styling or (even better) apply custom class names. For your ease of use, I have added silly colors to the code to make the sections stand out:
// HTML template for the album list
$template_album_list_cat = <<<EOT
<!-- BEGIN c_stat_row -->
<tr>
<td colspan="{COLUMNS}" class="tableh1" align="center"><span class="statlink">{STATISTICS}</span></td>
</tr>
<!-- END c_stat_row -->
<!-- BEGIN c_header -->
<tr class="tableb_compact">
<!-- END c_header -->
<!-- BEGIN c_album_cell -->
<td width="{COL_WIDTH}%" valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="1" valign="top" class="tableh2" style="background-color:purple">
<span class="alblink"><a href="{ALB_LINK_TGT}"><b>{ALBUM_TITLE}</b></a></span>
</td>
</tr>
<tr>
<td colspan="3">
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
</td>
</tr>
<tr>
<td align="center" valign="middle" class="thumbnails" style="background-color:red">
<img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" class="image" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
<a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
</td>
<td>
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
</td>
<td width="100%" valign="top" class="tableb_compact" style="background-color:green">
{ADMIN_MENU}
<p>{ALB_DESC}</p>
<p class="album_stat">{ALB_INFOS}</p>
</td>
</tr>
</table>
</td>
<!-- END c_album_cell -->
<!-- BEGIN c_empty_cell -->
<td width="{COL_WIDTH}%" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td height="1" valign="top" class="tableh2">
<b> </b>
</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
</td>
</tr>
<tr>
<td width="100%" valign="top" class="tableb_compact" >
<div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="1" border="0" class="image" style="border:0;margin-top:1px;margin-bottom:0" alt="" /></div>
</td>
</tr>
</table>
</td>
<!-- END c_empty_cell -->
<!-- BEGIN c_row_separator -->
</tr>
<tr class="tableb_compact">
<!-- END c_row_separator -->
<!-- BEGIN c_footer -->
</tr>
<!-- END c_footer -->
<!-- BEGIN c_tabs -->
<tr>
<td colspan="{COLUMNS}" style="padding: 0px;">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
{TABS}
</tr>
</table>
</td>
</tr>
<!-- END c_tabs -->
<!-- BEGIN c_spacer -->
<img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END c_spacer -->
EOT;
It's better still to use class names instead, so finally the code that you should add looks like this:
// HTML template for the album list
$template_album_list_cat = <<<EOT
<!-- BEGIN c_stat_row -->
<tr>
<td colspan="{COLUMNS}" class="tableh1" align="center"><span class="statlink">{STATISTICS}</span></td>
</tr>
<!-- END c_stat_row -->
<!-- BEGIN c_header -->
<tr class="tableb_compact">
<!-- END c_header -->
<!-- BEGIN c_album_cell -->
<td width="{COL_WIDTH}%" valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="1" valign="top" class="tableh2 custom_alblist_cat_title">
<span class="alblink"><a href="{ALB_LINK_TGT}"><b>{ALBUM_TITLE}</b></a></span>
</td>
</tr>
<tr>
<td colspan="3">
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
</td>
</tr>
<tr>
<td align="center" valign="middle" class="thumbnails custom_alblist_cat_thumb">
<img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" class="image" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
<a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
</td>
<td>
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
</td>
<td width="100%" valign="top" class="tableb_compact custom_alblist_cat_desc">
{ADMIN_MENU}
<p>{ALB_DESC}</p>
<p class="album_stat">{ALB_INFOS}</p>
</td>
</tr>
</table>
</td>
<!-- END c_album_cell -->
<!-- BEGIN c_empty_cell -->
<td width="{COL_WIDTH}%" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td height="1" valign="top" class="tableh2">
<b> </b>
</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
</td>
</tr>
<tr>
<td width="100%" valign="top" class="tableb_compact" >
<div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="1" border="0" class="image" style="border:0;margin-top:1px;margin-bottom:0" alt="" /></div>
</td>
</tr>
</table>
</td>
<!-- END c_empty_cell -->
<!-- BEGIN c_row_separator -->
</tr>
<tr class="tableb_compact">
<!-- END c_row_separator -->
<!-- BEGIN c_footer -->
</tr>
<!-- END c_footer -->
<!-- BEGIN c_tabs -->
<tr>
<td colspan="{COLUMNS}" style="padding: 0px;">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
{TABS}
</tr>
</table>
</td>
</tr>
<!-- END c_tabs -->
<!-- BEGIN c_spacer -->
<img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END c_spacer -->
EOT;
This being said, the new CSS classes that I have added are:
- custom_alblist_cat_title
- custom_alblist_cat_thumb
- custom_alblist_cat_desc
All that is left to do is editing themes/yourtheme/style.css and adding at the very end (into a new line):
.custom_alblist_cat_title {
background-color:purple;
}
.custom_alblist_cat_thumb {
background-color:red;
}
.custom_alblist_cat_desc {
background-color:green;
}
Well, you should of course consider using more decent colors, but this should get you started.
Bottom line: if you want to see core behaviour changed, find the part of the theme that is controlling the section your want to see changed. Copy that section into your custom theme. Edit the stuff you want to see changed. Pretty easy once you figured out how the Coppermine themeing engine works.