From f9d4e635895b927b66053e4ff9122a471709b27d Mon Sep 17 00:00:00 2001 From: lancewillett Date: Wed, 1 Aug 2012 15:28:50 +0000 Subject: [PATCH] Twenty Twelve: add editor stylesheet, first pass props obenland. See #21376. RTL version and tweaks to come after more testing. git-svn-id: http://core.svn.wordpress.org/trunk@21389 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- editor-style.css | 308 +++++++++++++++++++++++++++++++++++++++++++++++ functions.php | 3 +- 2 files changed, 309 insertions(+), 2 deletions(-) create mode 100644 editor-style.css diff --git a/editor-style.css b/editor-style.css new file mode 100644 index 000000000..456097c28 --- /dev/null +++ b/editor-style.css @@ -0,0 +1,308 @@ +/* +Theme Name: Twenty Twelve +Description: Used to style the TinyMCE editor. +*/ + +html { + font-size: 87.5%; +} +html .mceContentBody { + max-width: 625px; +} +body { + color: #444; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-size: 14px; + font-size: 1rem; + line-height: 1; + text-rendering: optimizeLegibility; + vertical-align: baseline; +} + +/* Headings */ +h1, +h2, +h3, +h4, +h5, +h6 { + clear: both; + line-height: 1.846153846; + margin: 24px 0; + margin: 1.714285714rem 0; +} +h1 { + font-size: 21px; + font-size: 1.5rem; + line-height: 1.5; +} +h2 { + font-size: 18px; + font-size: 1.285714286rem; + line-height: 1.6; +} +h3 { + font-size: 16px; + font-size: 1.142857143rem; +} +h4 { + font-size: 14px; + font-size: 1rem; +} +h5 { + font-size: 13px; + font-size: 0.928571429rem; +} +h6 { + font-size: 12px; + font-size: 0.857142857rem; +} +hr { + /* TODO */ +} + +/* Text elements */ +p { + line-height: 1.714285714; + margin: 0 0 24px; + margin: 0 0 1.714285714rem; +} +ul, ol { + margin: 0 0 24px; + margin: 0 0 1.714285714rem; + line-height: 1.714285714; + padding: 0; +} +ul { + list-style: disc outside; +} +ol { + list-style: decimal outside; +} +ul ul, ol ol, ul ol, ol ul { + margin-bottom: 0; +} +li { + margin: 0 0 0 24px; + margin: 0 0 0 1.714285714rem; +} +dl { + margin: 0 24px; + margin: 0 1.714285714rem; +} +dt { + font-weight: bold; + margin-bottom: 24px; + margin-bottom: 1.714285714rem; +} +dd { + line-height: 1.714285714; + margin: 0 0 24px; + margin: 0 0 1.714285714rem; +} +strong { + font-weight: bold; +} +cite, em, i { + font-style: italic; +} +cite { + border: none; +} + +big { + /* TODO */ +} +.mceContentBody blockquote { + font-style: italic !important; + font-weight: normal; + margin: 0; + padding: 24px; + padding: 1.714285714rem; +} +pre { + border: 1px solid #ededed; + color: #666; + font-family: Consolas, Monaco, Lucida Console, monospace; + font-size: 12px; + font-size: 0.857142857rem; + line-height: 1.714285714; + margin: 24px 0; + margin: 1.714285714rem 0; + overflow: auto; + padding: 24px; + padding: 1.714285714rem; +} +code, kbd, samp, var { + font-family: Consolas, Monaco, Lucida Console, monospace; + font-size: 12px; + font-size: 0.857142857rem; + line-height: 2; +} +abbr, acronym, dfn { + border-bottom: 1px dotted #666; + cursor: help; +} +address { + display: block; + line-height: 1.714285714; + margin: 0 0 24px; + margin: 0 0 1.714285714rem; +} +del { + /* TODO */ +} +ins { + /* TODO */ +} +sup, +sub { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +input[type=text] { + border: 1px solid #ccc; + border-radius: 3px; + font-family: inherit; + padding: 6px; + padding: 0.428571429rem; +} +textarea { + border: 1px solid #d5d2ca; + border-radius: 3px; + font-family: inherit; + font-size: 12px; + font-size: 0.857142857rem; + line-height: 1.714285714; + padding: 10px; + padding: 0.714285714rem; + width: 96%; +} + +/* Links */ +a, +a em, +a strong { + color: #21759b; + outline: none; +} +a:focus, +a:active, +a:hover { + color: #0f3647; +} + +/* Alignment */ +.alignleft { + display: inline; + float: left; +} +.alignright { + display: inline; + float: right; + margin: 12px 0 12px 24px; + margin: 0.857142857rem 0 0.857142857rem 1.714285714rem; +} +.aligncenter { + clear: both; + display: block; + margin-top: 12px; + margin-top: 0.857142857rem; + margin-bottom: 12px; + margin-bottom: 0.857142857rem; +} + +/* Tables */ +table { + border-bottom: 1px solid #ededed; + border-collapse: collapse; + border-spacing: 0; + color: #777; + font-size: 12px; + font-size: 0.857142857rem; + line-height: 2; + margin: 0 0 24px; + margin: 0 0 1.714285714rem; + width: 100%; +} +tr th { + color: #636363; + font-size: 11px; + font-size: 0.785714286rem; + font-weight: bold; + line-height: 2.181818182; + text-align: left; + text-transform: uppercase; +} +td { + border-top: 1px solid #ededed !important; + color: #777; + font-size: inherit; + font-weight: normal; + padding: 6px 10px 6px 0; + text-align: left; +} + +/* Images */ +img { + border: 0; + border-radius: 3px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); + max-width: 100%; +} +img.size-full { + width: auto/9; /* Prevent stretching of full-size images in IE8 */ +} +img[class*="wp-image-"] { + height: auto; + max-width: 100%; +} +img.alignleft { + margin: 12px 24px 12px 0; + margin: 0.857142857rem 1.714285714rem 0.857142857rem 0; +} +img[class*="align"], +img[class*="wp-image-"], +img[class*="attachment-"] { + height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ +} +img.mceWPnextpage { + border-radius: 0; + box-shadow: none; +} +img.wp-smiley { + border: 0; + border-radius: 0; + box-shadow: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} +.wp-caption { + background: transparent; + border: none; + margin: 0; + padding: 4px; + text-align: left; +} +.wp-caption-dt { + margin: 0; +} +.wp-caption .wp-caption-text, +.wp-caption-dd { + color: #777; + font-style: italic; + font-size: 12px; + font-size: 0.857142857rem; + line-height: 2; + margin: 0 0 24px; + margin: 0 0 1.71429rem; +} \ No newline at end of file diff --git a/functions.php b/functions.php index 90a8072d6..8ec2dc547 100644 --- a/functions.php +++ b/functions.php @@ -57,8 +57,7 @@ function twentytwelve_setup() { require( get_template_directory() . '/inc/theme-options.php' ); $twentytwelve_options = new Twenty_Twelve_Options(); - // You can define support for an editor stylesheet here; Twenty Twelve doesn't have a default one. - // Then, create a CSS file called editor-style.css and place it in your theme directory. + // This theme styles the visual editor with editor-style.css to match the theme style. add_editor_style(); // Add default posts and comments RSS feed links to .