var $web_path = "/phpfspot";
- var $thumb_width = "200";
+ var $thumb_width = "150";
var $photo_width = "800";
body {\r
- background-color: rgb(255,255,255);\r
- color: rgb(26,151,15);\r
- font-family: Arial, Helvetica, sans-serif;\r
- font-style: normal;\r
- border-style: none;\r
- border-color: rgb(15,15,15);\r
+ background-color: #000000;\r
+ color: rgb(26,151,15);\r
+ font-family: Arial, Helvetica, sans-serif;\r
+ font-style: normal;\r
+ border: solid 1px #ffffff;\r
+ border-color: rgb(15,15,15);\r
+ padding: 10px;\r
}\r
\r
-#content {\r
- padding-top: 20px;\r
- margin-left: 25%; width: auto;\r
+#frame {\r
+ padding: 10px;\r
+ background-color: #ffffff;\r
}\r
\r
-#tags {\r
- font-size: 14px;\r
- padding-top: 20px;\r
- width: 150px; \r
- position: relative; \r
- top: 0; \r
- left: 0; \r
- float: left;\r
+table, tr, td {\r
+ border-collapse: collapse;\r
+ padding: 0px;\r
+ empty-cells: show;\r
+ vertical-align: top;\r
}\r
\r
-#logo {\r
- font-weight: bolder;\r
+td.tags {\r
+ font-size: 14px;\r
+ width: 150px;\r
+ padding: 2px;\r
+ padding-top: 10px;\r
+ border-top: solid 1px #000000;\r
+ border-right: solid 1px #000000;\r
+}\r
+\r
+td.available_tags,td.selected_tags {\r
+ border-bottom: solid 1px #000000;\r
+ padding-top: 10px;\r
+ padding-bottom: 10px;\r
+ padding-right: 10px;\r
+}\r
+\r
+td.logo {\r
+ font-weight: bolder;\r
+ height: 40px;\r
+ border-bottom: solid 1px #000000;\r
+}\r
+\r
+td.content {\r
+ border-top: solid 1px #000000;\r
+}\r
+\r
+td.menu {\r
+ padding-top: 5px;\r
+ padding-bottom: 5px;\r
+}\r
+\r
+td.index_header {\r
+ background-color: #eeeeee;\r
+ padding: 10px;\r
+ vertical-align: middle;\r
}\r
\r
img {\r
- border-style: none;\r
+ border: none;\r
+}\r
+\r
+img.thumb {\r
+}\r
+\r
+a {\r
+ font-size: 14px;\r
+ color: #008200;\r
+ text-decoration: none;\r
+}\r
+\r
+a:visited, a:active {\r
+ color: #00ff00;\r
+} \r
+a:hover {\r
+ color: #00aa44;\r
+}\r
+\r
+#matrix {\r
+ padding: 10px;\r
+}\r
+\r
+td.thumb {\r
+ padding: 1px;\r
+ text-align: center;\r
+}\r
+\r
+#outter {\r
+ padding: 10px;\r
+ background-color: #eeeeee;\r
+}\r
+\r
+#inner {\r
+ padding: 7px;\r
+ -moz-border-radius: 1em;\r
+ border-radius: 1em;\r
+ border: dashed 1px #888888;\r
+\r
}\r
{include file="header.tpl"}
<body onload="refreshAvailableTags(); refreshSelectedTags();">
- <div id="logo">{$page_title}</div>
- <div id="tags">
- {include file="tags.tpl"}
- </div>
- <div id="content">
- {include file="welcome.tpl"}
+ <div id="frame">
+ <table>
+ <tr>
+ <td class="logo" colspan="2">
+ {$page_title}
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2" class="menu">
+ <a href="javascript:showPhotoIndex();">Photo Index</a>
+ <a href="javascript:Tags('reset', 0);">Reset Tags</a>
+ </td>
+ </tr>
+ <tr>
+ <td class="tags">
+ <div id="tags">
+ {include file="tags.tpl"}
+ </div>
+ </td>
+ <td class="content">
+ <div id="content">
+ {include file="welcome.tpl"}
+ </div>
+ </td>
+ </tr>
+ </table>
</div>
</body>
{include file="footer.tpl"}
<!-- Image Matrix -->
<table>
<tr>
- <td colspan="{$columns}">
- {$count} images have been found for the selected tags
+ <td class="index_header">
+ <b>Photo Index</b><br />
+ {if $count == 1}
+ {$count} image has been found for the selected tags
+ {else}
+ {$count} images have been found for the selected tags
+ {/if}
</td>
</tr>
-{section name="row" loop=$rows step=1}
<tr>
- {section name="col" loop=$columns step=1}
<td>
- {if $images[row][col] }
- <a href="javascript:showImage({$images[row][col]});">
- <img src="phpfspot_img.php?idx={$images[row][col]}&width={$width}" />
- </a>
- {/if}
+ <div id="matrix">
+ <table>
+ {section name="row" loop=$rows step=1}
+ <tr>
+ {section name="col" loop=$columns step=1}
+ <td class="thumb">
+ {if $images[row][col] }
+ <div id="outter">
+ <div id="inner">
+ <a href="javascript:showImage({$images[row][col]});">
+ <img class="thumb" src="phpfspot_img.php?idx={$images[row][col]}&width={$width}" />
+ </a>
+ </div>
+ </div>
+ {else}
+
+ {/if}
+ </td>
+ {/section}
+ </tr>
+ {/section}
+ </table>
+ </div>
</td>
- {/section}
</tr>
-{/section}
</table>
<!-- /Image Matrix -->
<table>
<tr>
<td>
- The following tags are available:
+ Available Tags:
</td>
</tr>
<tr>
- <td>
- <div id='available_tags'></div>
+ <td class="available_tags">
+ <div id="available_tags"></div>
</td>
</tr>
<tr>
<td>
- The following tags have been selected:
+ Selected Tags:
</td>
</tr>
<tr>
- <td>
- <div id='selected_tags'></div>
+ <td class="selected_tags">
+ <div id="selected_tags"></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
- <tr>
- <td>
- <a href="javascript:showPhotoIndex();">Photo Index</a>
- <a href="javascript:Tags('reset', 0);">Reset Tags</a>
- </td>
- </tr>
</table>