Simple CSS - Version 0.3

Version Description

  • Add CSS metabox to add CSS on specific pages and posts
  • Adjust styling of dark theme
  • Add tips to Simple CSS screen
Download this release

Release Info

Developer edge22
Plugin Icon 128x128 Simple CSS
Version 0.3
Comparing to
See all releases

Code changes from version 0.2 to 0.3

Files changed (3) hide show
  1. css/ambiance.css +9 -9
  2. readme.txt +39 -5
  3. simple-css.php +105 -1
css/ambiance.css CHANGED
@@ -5,7 +5,7 @@
5
  .cm-s-ambiance .cm-header { color: blue; }
6
  .cm-s-ambiance .cm-quote { color: #24C2C7; }
7
 
8
- .cm-s-ambiance .cm-keyword { color: #cda869; }
9
  .cm-s-ambiance .cm-atom { color: #CF7EA9; }
10
  .cm-s-ambiance .cm-number { color: #7DAF9C; }
11
  .cm-s-ambiance .cm-def { color: #aac6e3; }
@@ -14,11 +14,11 @@
14
  .cm-s-ambiance .cm-variable-3 { color: #faded3; }
15
  .cm-s-ambiance .cm-property { color: #EFAC32; }
16
  .cm-s-ambiance .cm-operator { color: #fa8d6a; }
17
- .cm-s-ambiance .cm-comment { color: #555; font-style:italic; }
18
  .cm-s-ambiance .cm-string { color: #8f9d6a; }
19
  .cm-s-ambiance .cm-string-2 { color: #9d937c; }
20
  .cm-s-ambiance .cm-meta { color: #D2A8A1; }
21
- .cm-s-ambiance .cm-qualifier { color: #EF5D32; }
22
  .cm-s-ambiance .cm-builtin { color: #9999cc; }
23
  .cm-s-ambiance .cm-bracket { color: #24C2C7; }
24
  .cm-s-ambiance .cm-tag { color: #fee4ff; }
@@ -26,13 +26,13 @@
26
  .cm-s-ambiance .cm-hr { color: pink; }
27
  .cm-s-ambiance .cm-link { color: #F4C20B; }
28
  .cm-s-ambiance .cm-special { color: #FF9D00; }
29
- .cm-s-ambiance .cm-error { color: #AF2018; }
30
 
31
  .cm-s-ambiance .CodeMirror-matchingbracket { color: #0f0; }
32
  .cm-s-ambiance .CodeMirror-nonmatchingbracket { color: #f22; }
33
 
34
- .cm-s-ambiance div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
35
- .cm-s-ambiance.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
36
  .cm-s-ambiance .CodeMirror-line::selection, .cm-s-ambiance .CodeMirror-line > span::selection, .cm-s-ambiance .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
37
  .cm-s-ambiance .CodeMirror-line::-moz-selection, .cm-s-ambiance .CodeMirror-line > span::-moz-selection, .cm-s-ambiance .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
38
 
@@ -54,9 +54,9 @@
54
  }
55
 
56
  .cm-s-ambiance .CodeMirror-linenumber {
57
- text-shadow: 0px 1px 1px #4d4d4d;
58
- color: #111;
59
- padding: 0 5px;
60
  }
61
 
62
  .cm-s-ambiance .CodeMirror-guttermarker { color: #aaa; }
5
  .cm-s-ambiance .cm-header { color: blue; }
6
  .cm-s-ambiance .cm-quote { color: #24C2C7; }
7
 
8
+ .cm-s-ambiance .cm-keyword { color: #EEEEEE; }
9
  .cm-s-ambiance .cm-atom { color: #CF7EA9; }
10
  .cm-s-ambiance .cm-number { color: #7DAF9C; }
11
  .cm-s-ambiance .cm-def { color: #aac6e3; }
14
  .cm-s-ambiance .cm-variable-3 { color: #faded3; }
15
  .cm-s-ambiance .cm-property { color: #EFAC32; }
16
  .cm-s-ambiance .cm-operator { color: #fa8d6a; }
17
+ .cm-s-ambiance .cm-comment { color: #AAAAAA; font-style: normal; }
18
  .cm-s-ambiance .cm-string { color: #8f9d6a; }
19
  .cm-s-ambiance .cm-string-2 { color: #9d937c; }
20
  .cm-s-ambiance .cm-meta { color: #D2A8A1; }
21
+ .cm-s-ambiance .cm-qualifier { color: #F4A386; }
22
  .cm-s-ambiance .cm-builtin { color: #9999cc; }
23
  .cm-s-ambiance .cm-bracket { color: #24C2C7; }
24
  .cm-s-ambiance .cm-tag { color: #fee4ff; }
26
  .cm-s-ambiance .cm-hr { color: pink; }
27
  .cm-s-ambiance .cm-link { color: #F4C20B; }
28
  .cm-s-ambiance .cm-special { color: #FF9D00; }
29
+ .cm-s-ambiance .cm-error { color: #DDDDDD; }
30
 
31
  .cm-s-ambiance .CodeMirror-matchingbracket { color: #0f0; }
32
  .cm-s-ambiance .CodeMirror-nonmatchingbracket { color: #f22; }
33
 
34
+ .cm-s-ambiance div.CodeMirror-selected { background: rgba(255, 255, 255, 0.4); }
35
+ .cm-s-ambiance.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.4); }
36
  .cm-s-ambiance .CodeMirror-line::selection, .cm-s-ambiance .CodeMirror-line > span::selection, .cm-s-ambiance .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
37
  .cm-s-ambiance .CodeMirror-line::-moz-selection, .cm-s-ambiance .CodeMirror-line > span::-moz-selection, .cm-s-ambiance .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
38
 
54
  }
55
 
56
  .cm-s-ambiance .CodeMirror-linenumber {
57
+ text-shadow: 0px 1px 1px #4d4d4d;
58
+ color: #888;
59
+ padding: 0 5px;
60
  }
61
 
62
  .cm-s-ambiance .CodeMirror-guttermarker { color: #aaa; }
readme.txt CHANGED
@@ -1,19 +1,21 @@
1
  === Simple CSS ===
2
  Contributors: edge22
3
- Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UVPTY2ZJA68S6
4
- Tags: CSS, custom CSS, Simple CSS, Simple Custom CSS, CSS Customizer
5
  Requires at least: 4.0
6
- Tested up to: 4.4.1
7
- Stable tag: 0.2
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
11
- Need to add some custom CSS to your site? Simple CSS gives you an awesome admin editor and a live preview editor in the Customizer.
12
 
13
  == Description ==
14
 
15
  Need to add some custom CSS to your site? Simple CSS gives you an awesome admin editor and a live preview editor in the Customizer so you can easily add your CSS.
16
 
 
 
17
  Check out GeneratePress, our awesome WordPress theme! (http://wordpress.org/themes/generatepress)
18
 
19
  = Features include: =
@@ -21,6 +23,7 @@ Check out GeneratePress, our awesome WordPress theme! (http://wordpress.org/them
21
  * Full featured admin CSS editor
22
  * Dark and light editor themes
23
  * CSS editor in the Customizer so you can live preview your changes
 
24
 
25
  == Installation ==
26
 
@@ -47,14 +50,40 @@ In most cases, #1 will work fine and is way easier.
47
 
48
  * In "Appearance > Simple CSS", change the "Dark" option below the "Save CSS" button to "Light".
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  == Screenshots ==
51
 
52
  1. The dark theme of the CSS editor.
53
  2. The light theme of the CSS editor.
54
  3. The CSS editor in the Customizer.
 
55
 
56
  == Changelog ==
57
 
 
 
 
 
 
58
  = 0.2 =
59
  * Remove extra whitespace from CSS output
60
  * Remove spellcheck from Customizer input
@@ -66,6 +95,11 @@ In most cases, #1 will work fine and is way easier.
66
 
67
  == Upgrade Notice ==
68
 
 
 
 
 
 
69
  = 0.2 =
70
  * Remove extra whitespace from CSS output
71
  * Remove spellcheck from Customizer input
1
  === Simple CSS ===
2
  Contributors: edge22
3
+ Donate link: https://generatepress.com/ongoing-development
4
+ Tags: CSS, custom CSS, Simple CSS, Simple Custom CSS, CSS Customizer, CSS metabox, CSS specific page
5
  Requires at least: 4.0
6
+ Tested up to: 4.5
7
+ Stable tag: 0.3
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
11
+ Add CSS to your website through an admin editor, the Customizer or a metabox for page/post specific CSS.
12
 
13
  == Description ==
14
 
15
  Need to add some custom CSS to your site? Simple CSS gives you an awesome admin editor and a live preview editor in the Customizer so you can easily add your CSS.
16
 
17
+ Want your CSS to only apply on a specific page or post? Simple CSS adds a metabox which allows you to do just that.
18
+
19
  Check out GeneratePress, our awesome WordPress theme! (http://wordpress.org/themes/generatepress)
20
 
21
  = Features include: =
23
  * Full featured admin CSS editor
24
  * Dark and light editor themes
25
  * CSS editor in the Customizer so you can live preview your changes
26
+ * Metabox for page/post specific CSS
27
 
28
  == Installation ==
29
 
50
 
51
  * In "Appearance > Simple CSS", change the "Dark" option below the "Save CSS" button to "Light".
52
 
53
+ = How do I add CSS that applies only to one page? =
54
+
55
+ * Navigate to your page or post in the Dashboard and look for the "Simple CSS" metabox.
56
+
57
+ = CSS editor tips =
58
+
59
+ * Ctrl-F / Cmd-F - Start searching
60
+
61
+ * Ctrl-G / Cmd-G - Find next
62
+
63
+ * Shift-Ctrl-G / Shift-Cmd-G - Find previous
64
+
65
+ * Shift-Ctrl-F / Cmd-Option-F - Replace
66
+
67
+ * Shift-Ctrl-R / Shift-Cmd-Option-F - Replace all
68
+
69
+ * Alt-F - Persistent search (dialog doesn't autoclose, enter to find next, Shift-Enter to find previous)
70
+
71
+ * Alt-G - Jump to line
72
+
73
  == Screenshots ==
74
 
75
  1. The dark theme of the CSS editor.
76
  2. The light theme of the CSS editor.
77
  3. The CSS editor in the Customizer.
78
+ 4. The CSS editor metabox.
79
 
80
  == Changelog ==
81
 
82
+ = 0.3 =
83
+ * Add CSS metabox to add CSS on specific pages and posts
84
+ * Adjust styling of dark theme
85
+ * Add tips to Simple CSS screen
86
+
87
  = 0.2 =
88
  * Remove extra whitespace from CSS output
89
  * Remove spellcheck from Customizer input
95
 
96
  == Upgrade Notice ==
97
 
98
+ = 0.3 =
99
+ * Add CSS metabox to add CSS on specific pages and posts
100
+ * Adjust styling of dark theme
101
+ * Add tips to Simple CSS screen
102
+
103
  = 0.2 =
104
  * Remove extra whitespace from CSS output
105
  * Remove spellcheck from Customizer input
simple-css.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Simple CSS
4
  Plugin URI: https://generatepress.com
5
  Description: Simply add CSS to your WordPress site using an awesome CSS editor or the live Customizer.
6
- Version: 0.2
7
  Author: Tom Usborne
8
  Author URI: http://edge22.com
9
  License: GNU General Public License v2 or later
@@ -126,6 +126,40 @@ function simple_css_editor()
126
  <p><?php printf( __( 'Want to live preview your CSS changes? Check out the Simple CSS textarea in the %1$sCustomize%2$s area.', 'simple-css' ), '<a href="' . esc_url( admin_url( 'customize.php' ) ) . '">', '</a>' ); ?></p>
127
  </div>
128
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  </div>
130
  </div>
131
  </form>
@@ -191,6 +225,10 @@ function simple_css_generate()
191
  // Get our CSS
192
  $output = $options['css'];
193
 
 
 
 
 
194
  // If we don't have any CSS, bail.
195
  if ( '' == $output )
196
  return;
@@ -203,4 +241,70 @@ function simple_css_generate()
203
  echo '<style type="text/css">';
204
  echo $output;
205
  echo '</style><!-- Generated by Simple CSS - https://wordpress.org/plugins/simple-css/ -->';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
206
  }
3
  Plugin Name: Simple CSS
4
  Plugin URI: https://generatepress.com
5
  Description: Simply add CSS to your WordPress site using an awesome CSS editor or the live Customizer.
6
+ Version: 0.3
7
  Author: Tom Usborne
8
  Author URI: http://edge22.com
9
  License: GNU General Public License v2 or later
126
  <p><?php printf( __( 'Want to live preview your CSS changes? Check out the Simple CSS textarea in the %1$sCustomize%2$s area.', 'simple-css' ), '<a href="' . esc_url( admin_url( 'customize.php' ) ) . '">', '</a>' ); ?></p>
127
  </div>
128
  </div>
129
+
130
+ <div class="postbox">
131
+ <h3 class="hndle"><span><?php _e( 'Tips', 'simple-css' ); ?></span></h3>
132
+ <div class="inside">
133
+ <p>
134
+ <strong>Ctrl-F / Cmd-F</strong><br />
135
+ <?php _e( 'Start searching', 'simple-css' ); ?>
136
+ <p>
137
+ <p>
138
+ <strong>Ctrl-G / Cmd-G</strong><br />
139
+ <?php _e( 'Find next', 'simple-css' ); ?>
140
+ <p>
141
+ <p>
142
+ <strong>Shift-Ctrl-G / Shift-Cmd-G</strong><br />
143
+ <?php _e( 'Find previous', 'simple-css' ); ?>
144
+ <p>
145
+ <p>
146
+ <strong>Shift-Ctrl-F / Cmd-Option-F</strong><br />
147
+ <?php _e( 'Replace', 'simple-css' ); ?>
148
+ <p>
149
+ <p>
150
+ <strong>Shift-Ctrl-R / Shift-Cmd-Option-F</strong><br />
151
+ <?php _e( 'Replace all', 'simple-css' ); ?>
152
+ <p>
153
+ <p>
154
+ <strong>Alt-F</strong><br />
155
+ <?php _e( 'Persistent search (dialog does not autoclose, enter to find next, Shift-Enter to find previous)', 'simple-css' ); ?>
156
+ <p>
157
+ <p>
158
+ <strong>Alt-G</strong><br />
159
+ <?php _e( 'Jump to line', 'simple-css' ); ?>
160
+ <p>
161
+ </div>
162
+ </div>
163
  </div>
164
  </div>
165
  </form>
225
  // Get our CSS
226
  $output = $options['css'];
227
 
228
+ // Get our metabox CSS
229
+ if ( is_singular() )
230
+ $output .= ( get_the_ID() ) ? get_post_meta( get_the_ID(), '_simple_css', true ) : '';
231
+
232
  // If we don't have any CSS, bail.
233
  if ( '' == $output )
234
  return;
241
  echo '<style type="text/css">';
242
  echo $output;
243
  echo '</style><!-- Generated by Simple CSS - https://wordpress.org/plugins/simple-css/ -->';
244
+ }
245
+
246
+ add_action( 'add_meta_boxes', 'simple_css_metabox' );
247
+ function simple_css_metabox()
248
+ {
249
+ // Set user role - make filterable
250
+ $allowed = apply_filters( 'simple_css_metabox_capability', 'activate_plugins' );
251
+
252
+ // If not an administrator, don't show the metabox
253
+ if ( ! current_user_can( $allowed ) )
254
+ return;
255
+
256
+ $post_types = get_post_types();
257
+ foreach ($post_types as $type) {
258
+ add_meta_box
259
+ (
260
+ 'simple_css_metabox', // $id
261
+ __( 'Simple CSS','simple-css' ), // $title
262
+ 'simple_css_show_metabox', // $callback
263
+ $type, // $page
264
+ 'normal', // $context
265
+ 'default' // $priority
266
+ );
267
+ }
268
+ }
269
+
270
+ /**
271
+ * Outputs the content of the metabox
272
+ */
273
+ function simple_css_show_metabox( $post )
274
+ {
275
+ wp_nonce_field( basename( __FILE__ ), 'simple_css_nonce' );
276
+ $options = get_post_meta( $post->ID );
277
+ $css = isset( $options[ '_simple_css' ] ) ? $options[ '_simple_css' ] : false;
278
+ if ( $css ) {
279
+ $css = wp_kses( $css, array( '\'', '\"', '>', '+' ) );
280
+ $css = $css[0];
281
+ }
282
+ ?>
283
+ <p>
284
+ <textarea style="width:100%;height:300px;" name="_simple_css" id="simple-css-textarea"><?php echo $css; ?></textarea>
285
+ </p>
286
+ <?php
287
+ }
288
+
289
+ add_action('save_post', 'simple_css_save_metabox');
290
+ function simple_css_save_metabox($post_id)
291
+ {
292
+ // Checks save status
293
+ $is_autosave = wp_is_post_autosave( $post_id );
294
+ $is_revision = wp_is_post_revision( $post_id );
295
+ $is_valid_nonce = ( isset( $_POST[ 'simple_css_nonce' ] ) && wp_verify_nonce( $_POST[ 'simple_css_nonce' ], basename( __FILE__ ) ) ) ? true : false;
296
+
297
+ // Exits script depending on save status
298
+ if ( $is_autosave || $is_revision || ! $is_valid_nonce ) {
299
+ return;
300
+ }
301
+
302
+ // Checks for input and sanitizes/saves if needed
303
+ // Checks for input and saves if needed
304
+ if ( isset( $_POST[ '_simple_css' ] ) && $_POST[ '_simple_css' ] !== '' ) {
305
+ $css = wp_kses( $_POST[ '_simple_css' ], array( '\'', '\"', '>', '+' ) );
306
+ update_post_meta( $post_id, '_simple_css', $css );
307
+ } else {
308
+ delete_post_meta( $post_id, '_simple_css' );
309
+ }
310
  }