Skip to content

Commit 9c66780

Browse files
craigcookcraigcook
committed
Add standard WP alignment classes
Also update editor styles to match the theme, removing old editor styles.
1 parent c97620d commit 9c66780

File tree

4 files changed

+157
-72
lines changed

4 files changed

+157
-72
lines changed

‎Hax/css/ed-content.css

-57
This file was deleted.

‎Hax/editor-style.css

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/* Styles for the post editor */
2+
3+
.mceContentBody {
4+
background: #fff;
5+
color: #333;
6+
font-family: 'Open Sans', sans-serif;
7+
font-size: 100%;
8+
font-weight: 400;
9+
line-height: 1.5;
10+
padding: 20px;
11+
}
12+
13+
.mceContentBody h1,
14+
.mceContentBody h2,
15+
.mceContentBody h3,
16+
.mceContentBody h4,
17+
.mceContentBody h5,
18+
.mceContentBody h6 {
19+
font-family: 'Open Sans', sans-serif;
20+
font-weight: 700;
21+
line-height: 1.2;
22+
margin: 0;
23+
}
24+
25+
.mceContentBody h2 {
26+
font-size: 1.6rem;
27+
margin-top: 2.5rem;
28+
margin-bottom: 1rem;
29+
}
30+
31+
.mceContentBody h3 {
32+
font-size: 1.2rem;
33+
margin-top: 2.2rem;
34+
margin-bottom: .8rem;
35+
}
36+
37+
.mceContentBody h4 {
38+
font-size: 1rem;
39+
margin-top: 2rem;
40+
margin-bottom: 1rem;
41+
}
42+
43+
.mceContentBody a:link,
44+
.mceContentBody a:visited {
45+
color: #005ca5;
46+
}
47+
48+
.mceContentBody a:hover {
49+
color: #0095dd;
50+
}
51+
52+
.mceContentBody p,
53+
.mceContentBody ul,
54+
.mceContentBody ol {
55+
max-width: 65ch;
56+
}
57+
58+
.mceContentBody img,
59+
.mceContentBody video {
60+
max-width: 100%;
61+
height: auto;
62+
width: auto;
63+
display: block;
64+
max-height: 70vh;
65+
margin: 2em auto;
66+
}
67+
68+
.mceContentBody iframe[src*="youtube"] {
69+
margin: 2em auto;
70+
max-width: 90vw;
71+
max-height: 50.625vw;
72+
display: block;
73+
}
74+
75+
.mceContentBody figure {
76+
margin: 2em auto;
77+
}
78+
.mceContentBody figure.paragraph,
79+
.mceContentBody .wp-caption {
80+
max-width: 65ch;
81+
}
82+
.mceContentBody figcaption,
83+
.mceContentBody .wp-caption-dd {
84+
font-size: .9rem;
85+
font-style: italic;
86+
margin: 0 2em;
87+
padding-bottom: .5em;
88+
border-bottom: 1px solid #005CA5;
89+
}
90+
91+
.mceContentBody .alignleft {
92+
display: inline;
93+
float: left;
94+
margin: 0 1.5em 1em 0;
95+
}
96+
97+
.mceContentBody .alignright {
98+
display: inline;
99+
float: right;
100+
margin: 0 0 1em 1.5em;
101+
}
102+
103+
.mceContentBody .aligncenter {
104+
display: block;
105+
margin-right: auto;
106+
margin-left: auto;
107+
}
108+
109+
.mceContentBody table {
110+
width: 100%;
111+
border-collapse: collapse;
112+
font-size: .9rem;
113+
margin: 2em 0;
114+
border: 1px solid #222;
115+
}
116+
117+
.mceContentBody thead {
118+
background: #005CA5;
119+
color: #fff;
120+
}
121+
122+
.mceContentBody th {
123+
font-weight: 600; /* semibold if we've got it */
124+
}
125+
.mceContentBody td, th {
126+
padding: .5em;
127+
border-collapse: collapse;
128+
border: 1px solid #888;
129+
}

‎Hax/functions.php

+3-11
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
11
<?php
2-
/*********
3-
* Style the visual editor to match the theme styles
4-
*/
5-
add_filter('mce_css', 'my_editor_style');
6-
function my_editor_style($url) {
7-
if ( !empty($url) ) {
8-
$url .= ',';
9-
}
10-
$url .= trailingslashit( get_stylesheet_directory_uri() ) . '/css/ed-content.css';
11-
return $url;
12-
}
2+
3+
// Add styles to post editor (editor-style.css)
4+
add_editor_style();
135

146
/*********
157
* Disable comment cookies

‎Hax/style.css

+25-4
Original file line numberDiff line numberDiff line change
@@ -1115,21 +1115,42 @@ td, th {
11151115
display: block;
11161116
}
11171117

1118-
.article figure {
1118+
.article figure,
1119+
.article .wp-caption {
11191120
margin: 2em auto;
11201121
}
11211122
.article figure.paragraph {
11221123
max-width: 65ch;
11231124
}
1124-
.article figcaption {
1125-
font-size: .8rem;
1125+
.article .wp-caption {
1126+
max-width: 100%;
1127+
}
1128+
.article figcaption,
1129+
.article .wp-caption-text {
1130+
font-size: .9rem;
11261131
font-style: italic;
11271132
margin: 0 2em;
1128-
text-align: center;
11291133
padding-bottom: .5em;
11301134
border-bottom: 1px solid #005CA5;
11311135
}
11321136

1137+
.article .alignleft {
1138+
display: inline;
1139+
float: left;
1140+
margin: 0 1.5em 1em 0;
1141+
}
1142+
1143+
.article .alignright {
1144+
display: inline;
1145+
float: right;
1146+
margin: 0 0 1em 1.5em;
1147+
}
1148+
1149+
.article .aligncenter {
1150+
display: block;
1151+
margin-right: auto;
1152+
margin-left: auto;
1153+
}
11331154

11341155

11351156
.post__meta {

0 commit comments

Comments
 (0)