From dc3c040399475f7b68497919c39c90adcca4caa5 Mon Sep 17 00:00:00 2001 From: chrisaga Date: Sat, 3 Dec 2005 17:33:38 +0000 Subject: improve template : split theme from template itself rest of the job : template (yoga), themes (clear dark), and php to handle them git-svn-id: http://piwigo.org/svn/trunk@960 68402e56-0260-453c-a942-63ccdbb3a9ee --- template/yoga/about.tpl | 7 +- template/yoga/category.tpl | 4 +- template/yoga/comments.tpl | 2 +- template/yoga/content.css | 27 ++---- template/yoga/default-colors.css | 111 ++----------------------- template/yoga/default-layout.css | 1 + template/yoga/header.tpl | 18 ++-- template/yoga/identification.tpl | 10 +-- template/yoga/menubar.css | 11 --- template/yoga/notification.tpl | 2 +- template/yoga/password.tpl | 2 +- template/yoga/picture.tpl | 20 ++--- template/yoga/popuphelp.tpl | 2 +- template/yoga/profile.tpl | 2 +- template/yoga/register.tpl | 2 +- template/yoga/search.tpl | 4 +- template/yoga/theme/clear/theme.css | 78 +++++++++++++++++ template/yoga/theme/clear/themeconf.inc.php | 9 ++ template/yoga/theme/dark/images/tableh1_bg.png | Bin 0 -> 271 bytes template/yoga/theme/dark/images/tableh2_bg.png | Bin 0 -> 307 bytes template/yoga/theme/dark/theme.css | 109 ++++++++++++++++++++++++ template/yoga/theme/dark/themeconf.inc.php | 9 ++ 22 files changed, 252 insertions(+), 178 deletions(-) create mode 100644 template/yoga/theme/clear/theme.css create mode 100644 template/yoga/theme/clear/themeconf.inc.php create mode 100644 template/yoga/theme/dark/images/tableh1_bg.png create mode 100644 template/yoga/theme/dark/images/tableh2_bg.png create mode 100644 template/yoga/theme/dark/theme.css create mode 100644 template/yoga/theme/dark/themeconf.inc.php (limited to 'template/yoga') diff --git a/template/yoga/about.tpl b/template/yoga/about.tpl index 71abb3ce3..6efa0e9ee 100644 --- a/template/yoga/about.tpl +++ b/template/yoga/about.tpl @@ -1,8 +1,11 @@
-

{lang:About}

diff --git a/template/yoga/category.tpl b/template/yoga/category.tpl index ae3720c2b..d4306c936 100644 --- a/template/yoga/category.tpl +++ b/template/yoga/category.tpl @@ -104,10 +104,10 @@

{TITLE}

diff --git a/template/yoga/comments.tpl b/template/yoga/comments.tpl index 725fb6184..6bf28d33b 100644 --- a/template/yoga/comments.tpl +++ b/template/yoga/comments.tpl @@ -3,7 +3,7 @@
    -
  • {lang:home}
    • +
  • {lang:home}

{lang:User comments}

diff --git a/template/yoga/content.css b/template/yoga/content.css index f56058d5e..26182b09b 100644 --- a/template/yoga/content.css +++ b/template/yoga/content.css @@ -1,12 +1,8 @@ /* $Id$ */ #content { - margin-left: 24em; margin-right: 1em; margin-bottom: 1em; /* when it's longer than menu bar */ } -BODY#theAdminPage #content { - margin-left: 14em; -} BODY#theCommentsPage #content, BODY#theRegisterPage #content, @@ -21,33 +17,18 @@ BODY#theNotificationPage #content margin: 1em; } -#content H2 { +#content H2, H3 { margin-bottom: 1ex; } #content H3 { - margin-bottom: 1ex; + text-align: center; } /* Thumbnails customization */ -#content UL.thumbnails SPAN, #content UL.thumbnails SPAN.wrap2 A { - width: 140px; /* max thumbnail width + 2px */ -} -#content UL.thumbnails SPAN.wrap2 { - height: 140px; /* max thumbnail height + 2px */ -} -#content UL.thumbnails SPAN.wrap2 { - border: 1px solid #aaaaaa; /* thumbnails border color and style */ - -moz-border-radius: 4px; /* round corners with Geko */ - border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */ -} -#content UL.thumbnails SPAN.wrap2:hover { - border-color: yellow; /* thumbnails border color when mouse cursor is over it */ -} #content UL.thumbnails SPAN.thumbLegend { font-size: 80%; /* font size */ height: 3em; /* max legend height (don't set auto to be Geko friendly)*/ - display: block; /* display: none; if you don't want legend */ overflow: hidden; /* oversized legend is clipped */ } @@ -179,7 +160,9 @@ ul.categoryActions { } #content DIV.comment BLOCKQUOTE { - margin: 1em 0.5em 0.5em 150px; /* margin-left corresponds to maximum thumbnail width + ~10px */ + margin-top: 1em; + margin-right: 0.5em; + margin-bottom: 150px; padding: 0.5em; } diff --git a/template/yoga/default-colors.css b/template/yoga/default-colors.css index 3f26e9208..5e76de8aa 100644 --- a/template/yoga/default-colors.css +++ b/template/yoga/default-colors.css @@ -1,34 +1,6 @@ -BODY { - color:#696969; /* dimgray */ - /*color:#111111;*/ - background: #ffffff; -} - -H1 { - color: #696969; - background: transparent; -} - -H2 { - color: #696969; - background: #d3d3d3; -} - -H3 { - color: #696969; - background: #ffffff; -} - -A { - color: #005e89; - background: transparent; -} - -A:hover { - color: #858460; -} - +/* $Id$ */ +/* others */ .pleaseNote { background: #9c9c9c; color: #ffff99; @@ -36,45 +8,10 @@ A:hover { font-weight: bold; } -#imageHeaderBar { - background: #d3d3d3; -} -#imageToolBar { - background: #eeeeee; - border: 1px solid #d3d3d3; -} #imageToolBar * { background: inherit; } -#imageToolBar A, #imageToolBar A:hover { - border-bottom: none; -} -#imageToolBar A:hover { - background: #d3d3d3; -} - -#theImage IMG { - border: 3px solid #d3d3d3; -} -A.navThumb, A.navThumb:hover { - border-bottom: none; -} - - -#content { - border: 1px solid #d3d3d3; - background:#eeeeee; -} - -#content H3 { - text-align: center; -} - -#content UL.thumbnail IMG { - border: 1px solid #a0a0a0; -} - /* So that non-links are slightly greyed out */ #content .navigationBar { color: #696969; @@ -83,43 +20,10 @@ A.navThumb, A.navThumb:hover { color: #000000; } - -#menubar DL { - border: 1px solid #d3d3d3; - background: #eeeeee; -} - -#menubar DT { - color: #696969; - background: #d3d3d3; -} - -#menubar DD { - background:#eeeeee; -} - -/* User comments */ -#content DIV.comment { - border: 1px solid gray; -} - -#content DIV.comment A.illustration IMG { - border: 1px solid gray; -} - -#comments DIV.comment BLOCKQUOTE { - border: 1px solid #d3d3d3; - border-left: 2px solid #696969; -} - /* Tables & forms */ -.throw { - background-color:white; -} input, select, textarea { color:black; - background-color: lightgrey; - border: 1px solid gray; + background-color: #d3d3d3; /* lightgrey */ } #errors { /* Errors display */ @@ -129,7 +33,7 @@ input, select, textarea { text-align: left; margin: 5px; border: 1px solid red; - background-image: url(admin/images/errors.png); + background-image: url(../../template-common/icons/admin/errors.png); background-repeat: no-repeat; background-position: top right; padding: 10px 50px 10px 10px; @@ -146,20 +50,15 @@ input, select, textarea { #infos { text-align: left; background-color: palegreen; - background-image: url(admin/images/infos.png); + background-image: url(../../template-common/icons/admin/infos.png); background-repeat: no-repeat; background-position: top right; color: darkgreen; font-weight: bold; margin: 5px; - border:1px solid gray; padding: 10px 50px 10px 10px; } LEGEND { font-style: italic; } - -FIELDSET { - border: 1px solid gray; -} diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css index 6b5c32122..bbfd46006 100644 --- a/template/yoga/default-layout.css +++ b/template/yoga/default-layout.css @@ -3,6 +3,7 @@ @import "content.css"; @import "image.css"; @import "popuphelp.css"; +@import "../../template-common/default-layout.css"; /* $Id$ */ diff --git a/template/yoga/header.tpl b/template/yoga/header.tpl index 5bead6cfc..612fa0121 100644 --- a/template/yoga/header.tpl +++ b/template/yoga/header.tpl @@ -4,19 +4,13 @@ - - + - - - - +the "text/nonsense" prevents gecko based browsers to load it --> + + + + diff --git a/template/yoga/identification.tpl b/template/yoga/identification.tpl index 93e425a28..f5195e011 100644 --- a/template/yoga/identification.tpl +++ b/template/yoga/identification.tpl @@ -3,9 +3,9 @@
    -
  • {lang:Forgot your password?}
    • -
  • {lang:register}
    • -
  • {lang:home}
    • +
  • {lang:Forgot your password?}
    • +
  • {lang:register}
    • +
  • {lang:home}

{lang:Identification}

@@ -48,8 +48,8 @@

- {L_REGISTER} - {lang:Forgot your password?} + {L_REGISTER} + {lang:Forgot your password?}

diff --git a/template/yoga/menubar.css b/template/yoga/menubar.css index f5a7c80a3..3b136fced 100644 --- a/template/yoga/menubar.css +++ b/template/yoga/menubar.css @@ -1,10 +1,5 @@ #menubar { - /* Do not put font-size: 90% here for it makes it harder to have correct - margin for contentarea */ float: left; - left: 0px; - - width: 22em; margin: 0 0 10px 1em; padding: 0; /* Fix against the "double margin of a floated item" IE bug */ @@ -13,10 +8,6 @@ text-align: left; /* follow-up of the "be nice to IE5" rule */ } -BODY#theAdminPage #menubar { - width: 12em; -} - #menubar DL, #menubar DT, #menubar DD { margin: 0; padding: 0; display: block; } @@ -24,11 +15,9 @@ BODY#theAdminPage #menubar { /* H2 properties copied here */ #menubar DT { font-weight: bold; /* default for h2 */ - margin: 0; padding: 5px 10px; font-size: 120%; - text-align: center; } diff --git a/template/yoga/notification.tpl b/template/yoga/notification.tpl index 721b13982..d4b178b42 100644 --- a/template/yoga/notification.tpl +++ b/template/yoga/notification.tpl @@ -2,7 +2,7 @@

{lang:Notification}

diff --git a/template/yoga/password.tpl b/template/yoga/password.tpl index 685e4e605..081722cc1 100644 --- a/template/yoga/password.tpl +++ b/template/yoga/password.tpl @@ -3,7 +3,7 @@

{lang:Password forgotten}

diff --git a/template/yoga/picture.tpl b/template/yoga/picture.tpl index 04b5b6ff5..6932eb1f6 100644 --- a/template/yoga/picture.tpl +++ b/template/yoga/picture.tpl @@ -14,32 +14,32 @@
- {L_SLIDESHOW} - {L_PICTURE_METADATA} + {L_SLIDESHOW} + {L_PICTURE_METADATA} - {lang:representative} + {lang:representative} {favorite.FAVORITE_ALT} - {L_DOWNLOAD} + {L_DOWNLOAD} - {L_ADMIN} + {L_ADMIN} - {lang:caddie} + {lang:caddie}
- + - {L_UP_ALT} + {L_UP_ALT} - +
@@ -164,7 +164,7 @@

- [{L_DELETE}] + [{L_DELETE}]

diff --git a/template/yoga/popuphelp.tpl b/template/yoga/popuphelp.tpl index 6c892312f..3b3e27328 100644 --- a/template/yoga/popuphelp.tpl +++ b/template/yoga/popuphelp.tpl @@ -2,4 +2,4 @@ {HELP_CONTENT}
-

close

+

close

diff --git a/template/yoga/profile.tpl b/template/yoga/profile.tpl index a800cc142..3a40df5bc 100644 --- a/template/yoga/profile.tpl +++ b/template/yoga/profile.tpl @@ -12,7 +12,7 @@

{lang:Profile}

diff --git a/template/yoga/register.tpl b/template/yoga/register.tpl index 92f647ff7..ee69ae021 100644 --- a/template/yoga/register.tpl +++ b/template/yoga/register.tpl @@ -4,7 +4,7 @@

{lang:Registration}

diff --git a/template/yoga/search.tpl b/template/yoga/search.tpl index 1867cb2c5..648fa12c9 100644 --- a/template/yoga/search.tpl +++ b/template/yoga/search.tpl @@ -2,8 +2,8 @@

{lang:Search}

diff --git a/template/yoga/theme/clear/theme.css b/template/yoga/theme/clear/theme.css new file mode 100644 index 000000000..1489ae26c --- /dev/null +++ b/template/yoga/theme/clear/theme.css @@ -0,0 +1,78 @@ +/* $Id$ */ + +/* text color */ +BODY, H1, H2, H3, DT { + color:#696969; /* dimgray */ +} + +/* backgrounds */ +BODY, H3, .throw { + background-color: #ffffff; /* white */ +} + +H2, #menubar DT, #imageHeaderBar, #imageToolBar A:hover { + background-color: #d3d3d3; +} + +#menubar DL, #content, #imageToolBar { + background-color: #eeeeee; +} + +/* borders */ +#menubar DL, #content, #imageToolBar, #theImage IMG, +#comments DIV.comment BLOCKQUOTE { + border: 1px solid #d3d3d3; +} + +#theImage IMG { + border-width: 3px; +} + +#content UL.thumbnail IMG { + border: 1px solid #a0a0a0; +} + +FIELDSET, INPUT, SELECT, TEXTAREA, +#content DIV.comment A.illustration IMG, #infos { + border: 1px solid gray; +} + +#comments DIV.comment BLOCKQUOTE { + border-left: 2px solid #696969; +} + +#content UL.thumbnails SPAN.wrap2 { + border: 1px solid #aaaaaa; /* thumbnails border color and style */ + -moz-border-radius: 4px; /* round corners with Geko */ + border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */ +} +#content UL.thumbnails SPAN.wrap2:hover { + border-color: yellow; /* thumbnails border color when mouse cursor is over it */ +} + +/* links */ +A { + color: #005e89; + background: transparent; +} + +A:hover { + color: #858460; +} + +#imageToolBar A, #imageToolBar A:hover { + border-bottom: none; +} + +A.navThumb, A.navThumb:hover { + border-bottom: none; +} + +/* others */ +.pleaseNote { + background: #9c9c9c; + color: #ffff99; + padding: 1ex; + font-weight: bold; +} + diff --git a/template/yoga/theme/clear/themeconf.inc.php b/template/yoga/theme/clear/themeconf.inc.php new file mode 100644 index 000000000..0a96b94aa --- /dev/null +++ b/template/yoga/theme/clear/themeconf.inc.php @@ -0,0 +1,9 @@ + 'yoga', + 'theme' => 'clear', + 'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon', + 'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/admin', + 'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mymetypes' +); +?> diff --git a/template/yoga/theme/dark/images/tableh1_bg.png b/template/yoga/theme/dark/images/tableh1_bg.png new file mode 100644 index 000000000..c7785d0f6 Binary files /dev/null and b/template/yoga/theme/dark/images/tableh1_bg.png differ diff --git a/template/yoga/theme/dark/images/tableh2_bg.png b/template/yoga/theme/dark/images/tableh2_bg.png new file mode 100644 index 000000000..d8c29f93d Binary files /dev/null and b/template/yoga/theme/dark/images/tableh2_bg.png differ diff --git a/template/yoga/theme/dark/theme.css b/template/yoga/theme/dark/theme.css new file mode 100644 index 000000000..c3c9f6a45 --- /dev/null +++ b/template/yoga/theme/dark/theme.css @@ -0,0 +1,109 @@ +/* $Id$ */ + +/* text color */ +BODY, H1, H3, DT { + color:#e0e0e0; +} + +H2, #menubar DT, .throw { + color: #fff48e; +} + +#content .navigationBar { + color: #aaaaaa; +} +#content .pageNumberSelected { + color: #000000; +} + +/* backgrounds */ +BODY { + background-color: #000000; +} + +H2, H3, #menubar DT, #imageHeaderBar, #imageToolBar A:hover, .throw { + background-color: #3f3f3f; +} + +#menubar DL, #content, #imageToolBar { + background-color: #5f5f5f; +} + +H2, #menubar DT, .throw { + background-image: url(images/tableh1_bg.png); +} + +#imageHeaderBar { + background-image: url(images/tableh2_bg.png); + background-repeat: repeat-x; + background-position: center; +} + +/* borders */ +#menubar DL, #content, #imageToolBar, #theImage IMG, +#comments DIV.comment BLOCKQUOTE { + border: 1px solid #000000; +} + +#theImage IMG { + border-width: 3px; +} + +#content UL.thumbnail IMG { + border: 1px solid #a0a0a0; +} + +FIELDSET, INPUT, SELECT, TEXTAREA, +#content DIV.comment A.illustration IMG, #infos { + border: 1px solid gray; +} + +#comments DIV.comment BLOCKQUOTE { + border-left: 2px solid #696969; +} + +#content UL.thumbnails SPAN.wrap2 { + border: 1px solid #aaaaaa; /* thumbnails border color and style */ + -moz-border-radius: 4px; /* round corners with Geko */ + border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */ +} +#content UL.thumbnails SPAN.wrap2:hover { + border-color: yellow; /* thumbnails border color when mouse cursor is over it */ +} + +H2, #menubar DT, #imageHeaderBar { + border-bottom: 1px solid #000000; +} + +/* links */ +A { + color: #FFFFFF; +} + +A:hover { + color: #FFF48E; +} + +#imageToolBar A, #imageToolBar A:hover { + border-bottom: none; +} + +A.navThumb, A.navThumb:hover { + border-bottom: none; +} + +/* others */ +.pleaseNote { + background: #9c9c9c; + color: #ffff99; + padding: 1ex; + font-weight: bold; +} +#the_page { + border: 1px solid #e0e0e0; + padding-top: 5px; + padding-bottom:30px; + text-align:center; + display:block; + background:#3f3f3f; +} diff --git a/template/yoga/theme/dark/themeconf.inc.php b/template/yoga/theme/dark/themeconf.inc.php new file mode 100644 index 000000000..1d2fb319e --- /dev/null +++ b/template/yoga/theme/dark/themeconf.inc.php @@ -0,0 +1,9 @@ + 'yoga', + 'theme' => 'dark', + 'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon', + 'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/admin', + 'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mymetypes' +); +?> -- cgit v1.2.3