Twenty Thirteen: first pass at editor styles. Props Frank Klein and obenland. See #23551.
git-svn-id: http://core.svn.wordpress.org/trunk@23672 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett
parent
f8cc149328
commit
76f2325439
|
|
@ -3,4 +3,350 @@ Theme Name: Twenty Thirteen
|
|||
Description: Used to style the TinyMCE editor.
|
||||
*/
|
||||
|
||||
/* TODO */
|
||||
html .mceContentBody {
|
||||
font-size: 100%;
|
||||
max-width: 604px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
color: #141412;
|
||||
line-height: 1.5;
|
||||
text-rendering: optimizeLegibility;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Headings
|
||||
* ----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
clear: both;
|
||||
font-family: Bitter, Georgia, serif;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
margin: 33px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
margin: 22px 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
margin: 36px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: url(../images/dotted-line.png) repeat center top;
|
||||
background-size: 4px 4px;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Text elements
|
||||
* ----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
p {
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 16px 0;
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal outside;
|
||||
}
|
||||
|
||||
li > ul,
|
||||
li > ol {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 14px;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
margin: 20px 0;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: none;
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 24px;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
margin: 24px 40px;
|
||||
}
|
||||
|
||||
blockquote blockquote {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
blockquote cite,
|
||||
blockquote small {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
cite {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: italic;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
del {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
ins {
|
||||
background: #fff9c0;
|
||||
border: none;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Links
|
||||
* ----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
a {
|
||||
color: #ca3c08;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #ac0404;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
color: #ea9629;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Alignment
|
||||
* ----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.alignleft {
|
||||
float: left;
|
||||
margin: 5px 20px 5px 0;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: right;
|
||||
margin: 5px 0 5px 20px;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
display: block;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tables
|
||||
* ----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
table {
|
||||
border-bottom: 1px solid #ededed;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
margin: 0 0 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
caption,
|
||||
th,
|
||||
td {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-size: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
td {
|
||||
border-top: 1px solid #ededed;
|
||||
padding: 6px 10px 6px 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Images
|
||||
* ----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wp-caption {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wp-caption.alignleft {
|
||||
margin: 5px 10px 5px 0;
|
||||
}
|
||||
|
||||
.wp-caption.alignright {
|
||||
margin: 5px 0 5px 10px;
|
||||
}
|
||||
|
||||
.wp-caption-dt {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-caption .wp-caption-text,
|
||||
.wp-caption-dd {
|
||||
color: #220e10;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -100,25 +100,17 @@ function twentythirteen_setup() {
|
|||
add_action( 'after_setup_theme', 'twentythirteen_setup' );
|
||||
|
||||
/**
|
||||
* Loads our special font CSS file.
|
||||
* Returns the Google font stylesheet URL, if available.
|
||||
*
|
||||
* The use of Source Sans Pro and Bitter by default is localized. For languages
|
||||
* that use characters not supported by the font, the font can be disabled.
|
||||
*
|
||||
* To disable in a child theme, use wp_dequeue_style()
|
||||
* function mytheme_dequeue_fonts() {
|
||||
* wp_dequeue_style( 'twentythirteen-fonts' );
|
||||
* }
|
||||
* add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 );
|
||||
*
|
||||
* Also used in the Appearance > Header admin panel:
|
||||
* @see twentythirteen_custom_header_setup()
|
||||
*
|
||||
* @since Twenty Thirteen 1.0
|
||||
*
|
||||
* @return void
|
||||
* @return string Font stylesheet or empty string if disabled.
|
||||
*/
|
||||
function twentythirteen_fonts() {
|
||||
function twentythirteen_fonts_url() {
|
||||
$fonts_url = '';
|
||||
|
||||
/* Translators: If there are characters in your language that are not
|
||||
* supported by Source Sans Pro, translate this to 'off'. Do not translate
|
||||
|
|
@ -146,11 +138,60 @@ function twentythirteen_fonts() {
|
|||
'family' => implode( '|', $font_families ),
|
||||
'subset' => 'latin,latin-ext',
|
||||
);
|
||||
wp_enqueue_style( 'twentythirteen-fonts', add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null );
|
||||
$fonts_url = add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" );
|
||||
}
|
||||
|
||||
return $fonts_url;
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads our special font CSS file.
|
||||
*
|
||||
* To disable in a child theme, use wp_dequeue_style()
|
||||
* function mytheme_dequeue_fonts() {
|
||||
* wp_dequeue_style( 'twentythirteen-fonts' );
|
||||
* }
|
||||
* add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 );
|
||||
*
|
||||
* Also used in the Appearance > Header admin panel:
|
||||
* @see twentythirteen_custom_header_setup()
|
||||
*
|
||||
* @since Twenty Thirteen 1.0
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
function twentythirteen_fonts() {
|
||||
$fonts_url = twentythirteen_fonts_url();
|
||||
if ( ! empty( $fonts_url ) )
|
||||
wp_enqueue_style( 'twentythirteen-fonts', esc_url_raw( $fonts_url ), array(), null );
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'twentythirteen_fonts' );
|
||||
|
||||
/**
|
||||
* Adds additional stylesheets to the TinyMCE editor if needed.
|
||||
*
|
||||
* @uses twentythirteen_fonts_url() to get the Google Font stylesheet URL.
|
||||
*
|
||||
* @since Twenty Thirteen 1.0
|
||||
*
|
||||
* @param string $mce_css CSS path to load in TinyMCE.
|
||||
* @return string
|
||||
*/
|
||||
function twentythirteen_mce_css( $mce_css ) {
|
||||
$fonts_url = twentythirteen_fonts_url();
|
||||
|
||||
if ( empty( $fonts_url ) )
|
||||
return $mce_css;
|
||||
|
||||
if ( ! empty( $mce_css ) )
|
||||
$mce_css .= ',';
|
||||
|
||||
$mce_css .= esc_url_raw( str_replace( ',', '%2C', $fonts_url ) );
|
||||
|
||||
return $mce_css;
|
||||
}
|
||||
add_filter( 'mce_css', 'twentythirteen_mce_css' );
|
||||
|
||||
/**
|
||||
* Enqueues scripts and styles for front end.
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue