aboutsummaryrefslogtreecommitdiffstats
path: root/template
diff options
context:
space:
mode:
authorchrisaga <chrisaga@piwigo.org>2006-06-24 08:56:59 +0000
committerchrisaga <chrisaga@piwigo.org>2006-06-24 08:56:59 +0000
commit300eaed89232caa09695e2a947c4e92c1d2d229a (patch)
tree6acc228e7a4e887d882137c0de8cae03ee499821 /template
parent235cd535398d706ba8c26314660549bba9be555f (diff)
feature 434: split thumbnails in template so customization could be easyer
git-svn-id: http://piwigo.org/svn/trunk@1384 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--template/yoga/content.css45
-rw-r--r--template/yoga/fix-ie5-ie6.css28
-rw-r--r--template/yoga/index.tpl35
-rw-r--r--template/yoga/layout.css1
-rw-r--r--template/yoga/thumbnails-fix-ie5-ie6.css27
-rw-r--r--template/yoga/thumbnails.css47
-rw-r--r--template/yoga/thumbnails.tpl33
7 files changed, 111 insertions, 105 deletions
diff --git a/template/yoga/content.css b/template/yoga/content.css
index 3e49c9d88..1fcc4630a 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -29,51 +29,6 @@ BODY#theNBMPage #content
text-align: center;
}
-/* Thumbnails customization */
-#content UL.thumbnails SPAN.thumbLegend {
- font-size: 80%; /* font size */
- overflow: hidden; /* oversized legend is clipped */
-}
-
-/* Thumbnail "elastic" layout */
-#content UL.thumbnails {
- margin: 0;
- padding: 0;
- list-style: none;
- text-align: center; /* to center the whole collection in #content */
-}
-#content UL.thumbnails LI { display: inline }
-
-#content UL.thumbnails SPAN.wrap1 {
- margin: 0 5px 5px 5px;
- display: table-cell; display: inline-table; display: inline-block;
- vertical-align: top; /* OK with Opera and IE6 not Geko */
- text-align: center; /* to center the thumbnail and legend in Geko/Opera */
-}
-#content UL.thumbnails SPAN.wrap2 {
- margin: 0; /* important reset the margins */
- display: table-cell; /* block prevents vertical-align here */
- vertical-align: middle; /* Ok with Opera and Geko not IE6 */
-}
-#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL {
- display: block;
- border-bottom: none;
-}
-#content UL.thumbnails IMG {
- margin-bottom: -4px; /* why ??? something wrong with Geko and Opera ignored by IE6*/
-}
-
-/* label and input used for caddie in admin section */
-#content UL.thumbnails SPAN.wrap2 LABEL {
- position: relative;
-}
-:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
- position: absolute;
- left: 0;
- top: 0;
-}
-
#content .navigationBar, #content .additional_info {
margin: 10px 0;
text-align: center;
diff --git a/template/yoga/fix-ie5-ie6.css b/template/yoga/fix-ie5-ie6.css
index e78b0bda4..1a9a28415 100644
--- a/template/yoga/fix-ie5-ie6.css
+++ b/template/yoga/fix-ie5-ie6.css
@@ -1,6 +1,8 @@
/* $Id$ */
/* Issues in IE from 5 to 6 only not to be used with IE7 */
+@import "thumbnails-fix-ie5-ie6.css";
+
/* fix lack of :hover behaviour for non link objects */
BODY {
behavior:url("template-common/csshover.htc");
@@ -21,32 +23,6 @@ UL.tagSelection LI INPUT,
background-color: transparent;
}
-/* fix IE with another layout for thumbnails */
-#content UL.thumbnails SPAN.wrap2 {
- display: block;
- position: relative;
- text-align: left;
-}
-#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL {
- overflow: visible;
- position: absolute;
- top: 50%;
- text-align: center;
-}
-#content UL.thumbnails IMG.thumbnail {
- position: relative;
- top: -50%;
- /*\*//*/
- margin-top: -40%;
- /**/
-}
-#content UL.thumbnails SPAN.wrap2 input {
- position: absolute;
- left: 0;
- top: -50%; /* same as other browsers but not so pretty */
-}
-
/* fix category thumbnails on main page */
#content UL.thumbnailCategories {
width: 99%; /* buggy IE box model */
diff --git a/template/yoga/index.tpl b/template/yoga/index.tpl
index cb4d7d01e..85b91d1de 100644
--- a/template/yoga/index.tpl
+++ b/template/yoga/index.tpl
@@ -76,40 +76,7 @@
<!-- END calendar -->
{MONTH_CALENDAR}
-
-<!-- BEGIN thumbnails -->
-<ul class="thumbnails">
- <!-- BEGIN line -->
- <!-- BEGIN thumbnail -->
- <li class="{thumbnails.line.thumbnail.CLASS}">
- <span class="wrap1">
- <span class="wrap2">
- <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
- <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
- alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
- title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
- </a>
- </span>
- <span class="thumbLegend">
- <!-- BEGIN element_name -->
- {thumbnails.line.thumbnail.element_name.NAME}
- <!-- END element_name -->
- <!-- BEGIN category_name -->
- [{thumbnails.line.thumbnail.category_name.NAME}]
- <!-- END category_name -->
- {thumbnails.line.thumbnail.IMAGE_TS}
- <!-- BEGIN nb_comments -->
- <br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
- <!-- END nb_comments -->
- </span>
- </span>
- </li>
- <!-- END thumbnail -->
- <!-- END line -->
-
-</ul>
-<!-- END thumbnails -->
-
+{THUMBNAILS}
{CATEGORIES}
<!-- BEGIN cat_infos -->
diff --git a/template/yoga/layout.css b/template/yoga/layout.css
index 79cb2911f..c39d46293 100644
--- a/template/yoga/layout.css
+++ b/template/yoga/layout.css
@@ -3,6 +3,7 @@
/* template css */
@import "menubar.css";
@import "content.css";
+@import "thumbnails.css";
@import "image.css";
@import "popuphelp.css";
@import "default-layout.css";
diff --git a/template/yoga/thumbnails-fix-ie5-ie6.css b/template/yoga/thumbnails-fix-ie5-ie6.css
new file mode 100644
index 000000000..9f12c797e
--- /dev/null
+++ b/template/yoga/thumbnails-fix-ie5-ie6.css
@@ -0,0 +1,27 @@
+/* $Id: $ */
+/* fix IE with another layout for thumbnails */
+#content UL.thumbnails SPAN.wrap2 {
+ display: block;
+ position: relative;
+ text-align: left;
+}
+#content UL.thumbnails SPAN.wrap2 A,
+#content UL.thumbnails SPAN.wrap2 LABEL {
+ overflow: visible;
+ position: absolute;
+ top: 50%;
+ text-align: center;
+}
+#content UL.thumbnails IMG.thumbnail {
+ position: relative;
+ top: -50%;
+ /*\*//*/
+ margin-top: -40%;
+ /**/
+}
+#content UL.thumbnails SPAN.wrap2 input {
+ position: absolute;
+ left: 0;
+ top: -50%; /* same as other browsers but not so pretty */
+}
+
diff --git a/template/yoga/thumbnails.css b/template/yoga/thumbnails.css
new file mode 100644
index 000000000..dfc4bb9dc
--- /dev/null
+++ b/template/yoga/thumbnails.css
@@ -0,0 +1,47 @@
+/* $Id: $ */
+
+/* Thumbnails customization */
+#content UL.thumbnails SPAN.thumbLegend {
+ font-size: 80%; /* font size */
+ overflow: hidden; /* oversized legend is clipped */
+}
+
+/* Thumbnail "elastic" layout */
+#content UL.thumbnails {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ text-align: center; /* to center the whole collection in #content */
+}
+#content UL.thumbnails LI { display: inline }
+
+#content UL.thumbnails SPAN.wrap1 {
+ margin: 0 5px 5px 5px;
+ display: table-cell; display: inline-table; display: inline-block;
+ vertical-align: top; /* OK with Opera and IE6 not Geko */
+ text-align: center; /* to center the thumbnail and legend in Geko/Opera */
+}
+#content UL.thumbnails SPAN.wrap2 {
+ margin: 0; /* important reset the margins */
+ display: table-cell; /* block prevents vertical-align here */
+ vertical-align: middle; /* Ok with Opera and Geko not IE6 */
+}
+#content UL.thumbnails SPAN.wrap2 A,
+#content UL.thumbnails SPAN.wrap2 LABEL {
+ display: block;
+ border-bottom: none;
+}
+#content UL.thumbnails IMG {
+ margin-bottom: -4px; /* why ??? something wrong with Geko and Opera ignored by IE6*/
+}
+
+/* label and input used for caddie in admin section */
+#content UL.thumbnails SPAN.wrap2 LABEL {
+ position: relative;
+}
+:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
diff --git a/template/yoga/thumbnails.tpl b/template/yoga/thumbnails.tpl
new file mode 100644
index 000000000..97ec3e3a3
--- /dev/null
+++ b/template/yoga/thumbnails.tpl
@@ -0,0 +1,33 @@
+<!-- $Id: $ -->
+<!-- BEGIN thumbnails -->
+<ul class="thumbnails">
+ <!-- BEGIN line -->
+ <!-- BEGIN thumbnail -->
+ <li class="{thumbnails.line.thumbnail.CLASS}">
+ <span class="wrap1">
+ <span class="wrap2">
+ <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
+ <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
+ alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
+ title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
+ </a>
+ </span>
+ <span class="thumbLegend">
+ <!-- BEGIN element_name -->
+ {thumbnails.line.thumbnail.element_name.NAME}
+ <!-- END element_name -->
+ <!-- BEGIN category_name -->
+ [{thumbnails.line.thumbnail.category_name.NAME}]
+ <!-- END category_name -->
+ {thumbnails.line.thumbnail.IMAGE_TS}
+ <!-- BEGIN nb_comments -->
+ <br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
+ <!-- END nb_comments -->
+ </span>
+ </span>
+ </li>
+ <!-- END thumbnail -->
+ <!-- END line -->
+
+</ul>
+<!-- END thumbnails -->