Changeset 15786

Timestamp:

10/13/2010 05:00:10 AM (14 years ago)

Author:

nacin

Message:

Fix image size handling in Twenty Ten. props lancewillett, iandstewart, fixes #14303 for 3.0.

Location:

branches/3.0/wp-content/themes/twentyten

Files:

• editor-style.css (modified) (15 diffs)
• style.css (modified) (6 diffs)

branches/3.0/wp-content/themes/twentyten/editor-style.css

@@ -1 +1 @@
 /*
 Theme Name: Twenty Ten
-*/
-/*
-Used to style the TinyMCE editor.
+Description: Used to style the TinyMCE editor.
 */
 html .mceContentBody {
-    max-width:640px;
+    max-width: 640px;
 }
 * {
+    color: #444;
     font-family: Georgia, "Bitstream Charter", serif;
-    color: #444;
     line-height: 1.5;
 }
@@ -41 +39 @@
 hr {
     background-color: #e7e7e7;
-    border:0;
+    border: 0;
+    clear: both;
     height: 1px;
     margin-bottom: 18px;
-    clear:both;
 }
 /* Text elements */
@@ -59 +57 @@
 }
 ol ol {
-    list-style:upper-alpha;
+    list-style: upper-alpha;
 }
 ol ol ol {
-    list-style:lower-roman;
+    list-style: lower-roman;
 }
 ol ol ol ol {
-    list-style:lower-alpha;
+    list-style: lower-alpha;
 }
 ul ul,
@@ -71 +69 @@
 ul ol,
 ol ul {
-    margin-bottom:0;
+    margin-bottom: 0;
 }
 dl {
-    margin:0 0 24px 0;
+    margin: 0 0 24px 0;
 }
 dt {
@@ -83 +81 @@
 }
 strong {
+    color: #000;
     font-weight: bold;
-    color: #000;
 }
 cite,
 em,
 i {
+    border: none;
     font-style: italic;
-    border: none;
 }
 big {
@@ -96 +94 @@
 }
 ins {
-    background: #ffffcc;
+    background: #ffc;
     border: none;
     color: #333;
@@ -130 +128 @@
 sup,
 sub {
+    font-size: 10px;
     height: 0;
     line-height: 1;
+    position: relative;
     vertical-align: baseline;
-    position: relative;
-    font-size: 10px;
 }
 sup {
@@ -143 +141 @@
 }
 a:link {
-    color:#0066cc;
+    color: #06c;
 }
 a:visited {
-    color:#743399;
+    color: #743399;
 }
 a:active,
@@ -158 +156 @@
 pre,
 hr {
-    margin-bottom:24px;
+    margin-bottom: 24px;
 }
 ul ul,
@@ -164 +162 @@
 ul ol,
 ol ul {
-    margin-bottom:0;
+    margin-bottom: 0;
 }
 pre,
@@ -189 +187 @@
 h6 {
     color: #000;
+    font-weight: normal;
+    line-height: 1.5em;
     margin: 0 0 20px 0;
-    line-height: 1.5em;
-    font-weight: normal;
 }
 h1 {
@@ -213 +211 @@
 table {
     border: 1px solid #e7e7e7 !important;
-    text-align: left;
-    margin: 0 -1px 24px 0;
-    width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
+    margin: 0 -1px 24px 0;
+    text-align: left;
+    width: 100%;
 }
 tr th,
@@ -233 +231 @@
     padding: 6px 24px;
 }
-
-
 img {
     margin: 0;
-    max-width: 640px;
+}
+img.size-auto,
+img.size-large,
+img.size-full,
+img.size-medium {
+    max-width: 100%;
+    height: auto;
 }
 .alignleft,
@@ -266 +268 @@
 }
 .wp-caption {
+    background: #f1f1f1;
     border: none;
-    background: #f1f1f1;
+    -khtml-border-radius: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
     color: #888;
     font-size: 12px;
     line-height: 18px;
+    margin-bottom: 20px;
+    max-width: 632px !important; /* prevent too-wide images from breaking layout */
+    padding: 4px;
     text-align: center;
-    margin-bottom: 20px;
-    padding: 4px;
-    -moz-border-radius: 0;
-    -khtml-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
 }
 .wp-caption img {
@@ -286 +289 @@
 }
 .wp-smiley {
-    margin:0;
-}
+    margin: 0;
+}

branches/3.0/wp-content/themes/twentyten/style.css

@@ -5 +5 @@
 Author: the WordPress team
 Version: 1.1
-Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
+Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu
 */
 
@@ -763 +763 @@
 -------------------------------------------------------------- */
 
-#content img {
-    margin: 0;
-    height: auto;
-    max-width: 640px;
-    width: auto;
-}
-#content .attachment img {
-    max-width: 900px;
-}
-#content .alignleft,
-#content img.alignleft {
+/*
+Resize images to fit the main content area.
+- Applies only to images uploaded via WordPress by targeting size-* classes.
+- Other images will be left alone. Use "size-auto" class to apply to other images.
+*/
+img.size-auto,
+img.size-full,
+img.size-large,
+img.size-medium,
+.attachment img {
+    max-width: 100%; /* When images are too wide for containing element, force them to fit. */
+    height: auto; /* Override height to match resized width for correct aspect ratio. */
+}
+.alignleft,
+img.alignleft {
     display: inline;
     float: left;
@@ -779 +783 @@
     margin-top: 4px;
 }
-#content .alignright,
-#content img.alignright {
+.alignright,
+img.alignright {
     display: inline;
     float: right;
@@ -786 +790 @@
     margin-top: 4px;
 }
-#content .aligncenter,
-#content img.aligncenter {
+.aligncenter,
+img.aligncenter {
     clear: both;
     display: block;
@@ -793 +797 @@
     margin-right: auto;
 }
-#content img.alignleft,
-#content img.alignright,
-#content img.aligncenter {
+img.alignleft,
+img.alignright,
+img.aligncenter {
     margin-bottom: 12px;
 }
-#content .wp-caption {
+.wp-caption {
     background: #f1f1f1;
     line-height: 18px;
     margin-bottom: 20px;
+    max-width: 632px !important; /* prevent too-wide images from breaking layout */
     padding: 4px;
     text-align: center;
 }
-#content .wp-caption img {
+.wp-caption img {
     margin: 5px 5px 0;
 }
-#content .wp-caption p.wp-caption-text {
+.wp-caption p.wp-caption-text {
     color: #888;
     font-size: 12px;
     margin: 5px;
 }
-#content .wp-smiley {
+.wp-smiley {
     margin: 0;
 }
-#content .gallery {
+.gallery {
     margin: 0 auto 18px;
 }
-#content .gallery .gallery-item {
+.gallery .gallery-item {
     float: left;
     margin-top: 0;
@@ -825 +830 @@
     width: 33%;
 }
-#content .gallery img {
+.gallery img {
     border: 2px solid #cfcfcf;
 }
-#content .gallery .gallery-caption {
+.gallery .gallery-caption {
     color: #888;
     font-size: 12px;
     margin: 0 0 12px;
 }
-#content .gallery dl {
+.gallery dl {
     margin: 0;
 }
-#content .gallery img {
+.gallery img {
     border: 10px solid #f1f1f1;
 }
-#content .gallery br+br {
+.gallery br+br {
     display: none;
 }
-#content .attachment img { /* single attachment images should be centered */
+#content .attachment img {/* single attachment images should be centered */
     display: block;
     margin: 0 auto;