thumbnail tweaks

* zoom icon dimensions adjusted to the new icon
* div wrapper around zoom icon with class, float on div instead of align on image
* caption as div with class to allow extra styling in future skins
* width set on outer div as well (width + 2)
* using the zoom icon as centered bg image in the monobook css, with a { display: block }
* print css update (class name for caption div instead of p)

diff --git a/includes/Skin.php b/includes/Skin.php
index f078b36..de5b001 100644 (file)
--- a/includes/Skin.php
+++ b/includes/Skin.php
@@ -1760,27 +1760,30 @@ class Skin {
                        $boxwidth  = $width;
                        $boxheight = $height;
                }
-               
+               $oboxwidth = $boxwidth + 2;
                $thumbUrl = $this->createThumb( $name, $boxwidth );
 
                $u = $nt->escapeLocalURL();
 
                $more = htmlspecialchars( wfMsg( "thumbnail-more" ) );
                $magnifyalign = $wgLang->isRTL() ? "left" : "right";
-               $textalign = $wgLang->isRTL() ? " style=\"text-align:right\"" : "";
+               $textalign = $wgLang->isRTL() ? ' style="text-align:right"' : "";
 
-               $s = "<div class=\"thumbnail-{$align}\" style=\"width:{$boxwidth}px;\"><div>";
+               $s = "<div class=\"thumbnail-{$align}\" style=\"width:{$oboxwidth}px;\"><div style=\"width:{$boxwidth}px;\">";
                if ( $thumbUrl == "" ) {
                        $s .= str_replace( "$1", $name, wfMsg("missingimage") );
+                       $zoom = '';
                } else {
-                       $s .= '<a href="'.$u.'" class="internal" title="'.$alt.'">'.
-                               '<img src="'.$thumbUrl.'" alt="'.$alt.'" ' .
-                               'width="'.$boxwidth.'" height="'.$boxheight.'" /></a>'.
-                               '<a href="'.$u.'" class="internal" title="'.$more.'"> '.
-                               '<img src="'.$wgUploadPath.'/magnify-clip.png" ' .
-                               'width="26" height="24" align="'.$magnifyalign.'" alt="'.$more.'" /> </a>';
-               }
-               $s .= '  <div'.$textalign.'>'.$label."</div></div>\n</div>";
+                       $s .= '<a href="'.$u.'" class="internal" title="'.$alt.'">'.
+                               '<img src="'.$thumbUrl.'" alt="'.$alt.'" ' .
+                               'width="'.$boxwidth.'" height="'.$boxheight.'" /></a>';
+                       $zoomicon =  '<div class="magnify" style="float:'.$magnifyalign.'">'.
+                               '<a href="'.$u.'" class="internal" title="'.$more.'">'.
+                               '<img src="'.$wgUploadPath.'/magnify-clip.png" ' .
+                               'width="15" height="11" alt="'.$more.'" /></a></div>';
+
+               }
+               $s .= '  <div class="thumbcaption" '.$textalign.'>'.$zoomicon.$label."</div></div>\n</div>";
                return $s;
        }
 

diff --git a/stylesheets/cologneblue.css b/stylesheets/cologneblue.css
index 15bc3b5..50a6452 100644 (file)
--- a/stylesheets/cologneblue.css
+++ b/stylesheets/cologneblue.css
@@ -112,8 +112,9 @@ div.thumbnail-none, div.thumbnail-right, div.thumbnail-left {
        font-size: 85%;
 }
 
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
+div.thumbcaption {
        margin-top:3px; margin-bottom:3px;
+        text-align: left;
 }
 
 div.thumbnail-right {

diff --git a/stylesheets/commonPrint.css b/stylesheets/commonPrint.css
index 81c218f..62343de 100644 (file)
--- a/stylesheets/commonPrint.css
+++ b/stylesheets/commonPrint.css
@@ -25,52 +25,74 @@ a.new{ color:#ba0000; text-decoration:none; }
 .toctoggle, .editsection {
        font-size: smaller;
 }
-
 /* images */
-div.floatright { float: right; 
-    margin: 0 0 1em 1em;
+div.floatright { 
+    float: right; 
+    margin: 0;
     position:relative;
-
+    border: 0.5em solid White;
+    border-width: 0.5em 0 0.8em 1.4em;
 }
 div.floatright p { font-style: italic;} 
-div.floatleft { float: left; margin: 0.3em 0.5em 0.5em 0;
+div.floatleft { 
+    float: left; 
+    margin: 0.3em 0.5em 0.5em 0;
     position:relative;
+    border: 0.5em solid White;
+    border-width: 0.5em 1.4em 0.8em 0;
 }
 div.floatleft p { font-style: italic; } 
-
 /* thumbnails */
 div.thumbnail-none,
 div.thumbnail-right,
 div.thumbnail-left {
- /*   border:1px solid #2f6fab;*/
-      border:1px solid #cccccc;
-    
     background-color:#f9f9f9;
-    padding: 2px;
-    position:relative;
+    padding: none;
     margin: 0.3em 0 0.5em;
     font-size: 95%;
+}
+div.thumbnail-none div,
+div.thumbnail-right div,
+div.thumbnail-left div {
+    border:1px solid #cccccc;
     text-align: center;
 }
-
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
-    margin-top:3px; margin-bottom:3px;
-    position:relative;
+div div.thumbcaption {
+    border: none;
     text-align: left;
+    padding: 2px;
 }
-
 div.thumbnail-right {
     float: right;
-    position:relative;
-    margin-left:0.5em;
+    border-style: solid;
+    border-color: White;
+    border-width: 0.5em 0 0.8em 1.4em;
+}
+div div.magnify {
+    border: none !important;
+    background: url(magnify-clip.png) center no-repeat;
+    width: 20px;
+    height: 20px;
+    float: right;
+    margin: 0;
+}
+div div.magnify a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    border: none;
+}
+div.magnify img {
+    visibility: hidden;
 }
-
 div.thumbnail-left {
     float: left;
-    position:relative;
     margin-right:0.5em;
+    border-style: solid;
+    border-color: White;
+    border: 0.5em 1.4em 0.8em 0;
 }
-
 /* table standards */
 table.rimage {
     float:right; 
@@ -81,7 +103,6 @@ table.rimage {
     text-align:center;
 }
 
-
 body {
     background: White;
     font-family: "Bitstream Vera Sans",Verdana, sans;

diff --git a/stylesheets/monobook/main.css b/stylesheets/monobook/main.css
index da45e93..3ce0169 100644 (file)
--- a/stylesheets/monobook/main.css
+++ b/stylesheets/monobook/main.css
@@ -389,34 +389,51 @@ div.floatleft p { font-style: italic; }
 div.thumbnail-none,
 div.thumbnail-right,
 div.thumbnail-left {
- /*   border:1px solid #2f6fab;*/
     background-color:#f9f9f9;
-    padding: 2px;
-    position:relative;
+    padding: none;
     margin: 0.3em 0 0.5em;
     font-size: 95%;
-    text-align: center;
 }
 div.thumbnail-none div,
 div.thumbnail-right div,
-div.thumbnail-left div{
+div.thumbnail-left div {
     border:1px solid #cccccc;
+    text-align: center;
 }
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
-    margin-top:3px; margin-bottom:3px;
+div div.thumbcaption {
+    border: none;
     text-align: left;
+    padding: 2px;
 }
 div.thumbnail-right {
     float: right;
-    position:relative;
-    border: 0.5em solid White;
+    border-style: solid;
+    border-color: White;
     border-width: 0.5em 0 0.8em 1.4em;
 }
+div div.magnify {
+    border: none !important;
+    background: url(magnify-clip.png) center no-repeat;
+    width: 20px;
+    height: 20px;
+    float: right;
+    margin: 0;
+}
+div div.magnify a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    border: none;
+}
+div.magnify img {
+    visibility: hidden;
+}
 div.thumbnail-left {
     float: left;
-    position:relative;
     margin-right:0.5em;
-    border: 0.5em solid White;
+    border-style: solid;
+    border-color: White;
     border: 0.5em 1.4em 0.8em 0;
 }
 /* table standards */

diff --git a/stylesheets/nostalgia.css b/stylesheets/nostalgia.css
index 18b38a4..ca4874b 100644 (file)
--- a/stylesheets/nostalgia.css
+++ b/stylesheets/nostalgia.css
@@ -35,7 +35,7 @@ div.thumbnail-none, div.thumbnail-right, div.thumbnail-left {
        font-size: 85%;
 }
 
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
+div.thumbcaption {
        margin-top:3px; margin-bottom:3px;
 }
 

diff --git a/stylesheets/wikistandard.css b/stylesheets/wikistandard.css
index f22d619..19e8d97 100644 (file)
--- a/stylesheets/wikistandard.css
+++ b/stylesheets/wikistandard.css
@@ -73,7 +73,7 @@ div.thumbnail-none, div.thumbnail-right, div.thumbnail-left {
        text-align: center;
 }
 
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
+div.thumbcaption {
        margin-top:3px; margin-bottom:3px;
        text-align: left;
 }