WordPress.org

Make WordPress Core

Ticket #14303: 15501-image-styles.diff

File 15501-image-styles.diff, 6.9 KB (added by iandstewart, 10 years ago)

Patch to improve image size handling (sans width: auto)

  • style.css

     
    44Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.
    55Author: the WordPress team
    66Version: 1.1
    7 Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
     7Tags: 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
    88*/
    99
    1010
     
    759759/* =Images
    760760-------------------------------------------------------------- */
    761761
    762 #content img {
    763         margin: 0;
    764         height: auto;
    765         max-width: 640px;
    766         width: auto;
     762/*
     763Resize images to fit the main content area.
     764- Applies only to images uploaded via WordPress by targeting size-* classes.
     765- Other images will be left alone. Use "size-auto" class to apply to other images.
     766*/
     767img.size-auto,
     768img.size-full,
     769img.size-large,
     770img.size-medium,
     771.attachment img {
     772        max-width: 100%; /* When images are too wide for containing element, force them to fit. */
     773        height: auto; /* Override height to match resized width for correct aspect ratio. */
    767774}
    768 #content .attachment img {
    769         max-width: 900px;
    770 }
    771 #content .alignleft,
    772 #content img.alignleft {
     775.alignleft,
     776img.alignleft {
    773777        display: inline;
    774778        float: left;
    775779        margin-right: 24px;
    776780        margin-top: 4px;
    777781}
    778 #content .alignright,
    779 #content img.alignright {
     782.alignright,
     783img.alignright {
    780784        display: inline;
    781785        float: right;
    782786        margin-left: 24px;
    783787        margin-top: 4px;
    784788}
    785 #content .aligncenter,
    786 #content img.aligncenter {
     789.aligncenter,
     790img.aligncenter {
    787791        clear: both;
    788792        display: block;
    789793        margin-left: auto;
    790794        margin-right: auto;
    791795}
    792 #content img.alignleft,
    793 #content img.alignright,
    794 #content img.aligncenter {
     796img.alignleft,
     797img.alignright,
     798img.aligncenter {
    795799        margin-bottom: 12px;
    796800}
    797 #content .wp-caption {
     801.wp-caption {
    798802        background: #f1f1f1;
    799803        line-height: 18px;
    800804        margin-bottom: 20px;
     805        max-width: 632px !important; /* prevent too-wide images from breaking layout */
    801806        padding: 4px;
    802807        text-align: center;
    803808}
    804 #content .wp-caption img {
     809.wp-caption img {
    805810        margin: 5px 5px 0;
    806811}
    807 #content .wp-caption p.wp-caption-text {
     812.wp-caption p.wp-caption-text {
    808813        color: #888;
    809814        font-size: 12px;
    810815        margin: 5px;
    811816}
    812 #content .wp-smiley {
     817.wp-smiley {
    813818        margin: 0;
    814819}
    815 #content .gallery {
     820.gallery {
    816821        margin: 0 auto 18px;
    817822}
    818 #content .gallery .gallery-item {
     823.gallery .gallery-item {
    819824        float: left;
    820825        margin-top: 0;
    821826        text-align: center;
    822827        width: 33%;
    823828}
    824 #content .gallery img {
     829.gallery img {
    825830        border: 2px solid #cfcfcf;
    826831}
    827 #content .gallery .gallery-caption {
     832.gallery .gallery-caption {
    828833        color: #888;
    829834        font-size: 12px;
    830835        margin: 0 0 12px;
    831836}
    832 #content .gallery dl {
     837.gallery dl {
    833838        margin: 0;
    834839}
    835 #content .gallery img {
     840.gallery img {
    836841        border: 10px solid #f1f1f1;
    837842}
    838 #content .gallery br+br {
     843.gallery br+br {
    839844        display: none;
    840845}
    841 #content .attachment img { /* single attachment images should be centered */
     846#content .attachment img {/* single attachment images should be centered */
    842847        display: block;
    843848        margin: 0 auto;
    844849}
  • editor-style.css

     
    11/*
    22Theme Name: Twenty Ten
     3Description: Used to style the TinyMCE editor.
    34*/
    4 /*
    5 Used to style the TinyMCE editor.
    6 */
    75html .mceContentBody {
    8         max-width:640px;
     6        max-width: 640px;
    97}
    108* {
     9        color: #444;
    1110        font-family: Georgia, "Bitstream Charter", serif;
    12         color: #444;
    1311        line-height: 1.5;
    1412}
    1513p,
     
    4038}
    4139hr {
    4240        background-color: #e7e7e7;
    43         border:0;
     41        border: 0;
     42        clear: both;
    4443        height: 1px;
    4544        margin-bottom: 18px;
    46         clear:both;
    4745}
    4846/* Text elements */
    4947p {
     
    5856        margin: 0 0 18px 1.5em;
    5957}
    6058ol ol {
    61         list-style:upper-alpha;
     59        list-style: upper-alpha;
    6260}
    6361ol ol ol {
    64         list-style:lower-roman;
     62        list-style: lower-roman;
    6563}
    6664ol ol ol ol {
    67         list-style:lower-alpha;
     65        list-style: lower-alpha;
    6866}
    6967ul ul,
    7068ol ol,
    7169ul ol,
    7270ol ul {
    73         margin-bottom:0;
     71        margin-bottom: 0;
    7472}
    7573dl {
    76         margin:0 0 24px 0;
     74        margin: 0 0 24px 0;
    7775}
    7876dt {
    7977        font-weight: bold;
     
    8280        margin-bottom: 18px;
    8381}
    8482strong {
     83        color: #000;
    8584        font-weight: bold;
    86         color: #000;
    8785}
    8886cite,
    8987em,
    9088i {
     89        border: none;
    9190        font-style: italic;
    92         border: none;
    9391}
    9492big {
    9593        font-size: 131.25%;
    9694}
    9795ins {
    98         background: #ffffcc;
     96        background: #ffc;
    9997        border: none;
    10098        color: #333;
    10199}
     
    129127}
    130128sup,
    131129sub {
     130        font-size: 10px;
    132131        height: 0;
    133132        line-height: 1;
     133        position: relative;
    134134        vertical-align: baseline;
    135         position: relative;
    136         font-size: 10px;
    137135}
    138136sup {
    139137        bottom: 1ex;
     
    142140        top: .5ex;
    143141}
    144142a:link {
    145         color:#0066cc;
     143        color: #06c;
    146144}
    147145a:visited {
    148         color:#743399;
     146        color: #743399;
    149147}
    150148a:active,
    151149a:hover {
     
    157155dd,
    158156pre,
    159157hr {
    160         margin-bottom:24px;
     158        margin-bottom: 24px;
    161159}
    162160ul ul,
    163161ol ol,
    164162ul ol,
    165163ol ul {
    166         margin-bottom:0;
     164        margin-bottom: 0;
    167165}
    168166pre,
    169167kbd,
     
    188186h5,
    189187h6 {
    190188        color: #000;
     189        font-weight: normal;
     190        line-height: 1.5em;
    191191        margin: 0 0 20px 0;
    192         line-height: 1.5em;
    193         font-weight: normal;
    194192}
    195193h1 {
    196194        font-size: 2.4em;
     
    212210}
    213211table {
    214212        border: 1px solid #e7e7e7 !important;
     213        border-collapse: collapse;
     214        border-spacing: 0;
     215        margin: 0 -1px 24px 0;
    215216        text-align: left;
    216         margin: 0 -1px 24px 0;
    217217        width: 100%;
    218         border-collapse: collapse;
    219         border-spacing: 0;
    220218}
    221219tr th,
    222220thead th {
     
    232230        border-top: 1px solid #e7e7e7 !important;
    233231        padding: 6px 24px;
    234232}
    235 
    236 
    237233img {
    238234        margin: 0;
    239         max-width: 640px;
    240235}
     236img.size-auto,
     237img.size-large,
     238img.size-full,
     239img.size-medium {
     240        max-width: 100%;
     241        height: auto;
     242}
    241243.alignleft,
    242244img.alignleft {
    243245        display: inline;
     
    265267        margin-bottom: 12px;
    266268}
    267269.wp-caption {
     270        background: #f1f1f1;
    268271        border: none;
    269         background: #f1f1f1;
     272        -khtml-border-radius: 0;
     273        -moz-border-radius: 0;
     274        -webkit-border-radius: 0;
     275        border-radius: 0;
    270276        color: #888;
    271277        font-size: 12px;
    272278        line-height: 18px;
    273         text-align: center;
    274279        margin-bottom: 20px;
     280        max-width: 632px !important; /* prevent too-wide images from breaking layout */
    275281        padding: 4px;
    276         -moz-border-radius: 0;
    277         -khtml-border-radius: 0;
    278         -webkit-border-radius: 0;
    279         border-radius: 0;
     282        text-align: center;
    280283}
    281284.wp-caption img {
    282285        margin: 5px;
     
    285288        margin: 0 0 4px;
    286289}
    287290.wp-smiley {
    288         margin:0;
     291        margin: 0;
    289292}
     293 No newline at end of file