diff options
author | chrisaga <chrisaga@piwigo.org> | 2006-06-24 08:56:59 +0000 |
---|---|---|
committer | chrisaga <chrisaga@piwigo.org> | 2006-06-24 08:56:59 +0000 |
commit | 300eaed89232caa09695e2a947c4e92c1d2d229a (patch) | |
tree | 6acc228e7a4e887d882137c0de8cae03ee499821 /template | |
parent | 235cd535398d706ba8c26314660549bba9be555f (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 'template')
-rw-r--r-- | template/yoga/content.css | 45 | ||||
-rw-r--r-- | template/yoga/fix-ie5-ie6.css | 28 | ||||
-rw-r--r-- | template/yoga/index.tpl | 35 | ||||
-rw-r--r-- | template/yoga/layout.css | 1 | ||||
-rw-r--r-- | template/yoga/thumbnails-fix-ie5-ie6.css | 27 | ||||
-rw-r--r-- | template/yoga/thumbnails.css | 47 | ||||
-rw-r--r-- | template/yoga/thumbnails.tpl | 33 |
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 --> |