SiteOrigin CSS - Version 1.0.1

Version Description

  • Fixed conflicts with CSS editor in SiteOrigin themes.
  • Force dequeue scripts that cause problems with main editing interface.
  • Made it easier to follow links with inspector enabled.
Download this release

Release Info

Developer gpriday
Plugin Icon 128x128 SiteOrigin CSS
Version 1.0.1
Comparing to
See all releases

Code changes from version 1.0 to 1.0.1

Files changed (8) hide show
  1. css/inspector.css +15 -0
  2. css/inspector.less +16 -0
  3. inc/legacy.php +10 -0
  4. js/inspector.js +12 -0
  5. js/inspector.min.js +3 -1
  6. readme.txt +10 -1
  7. so-css.php +21 -5
  8. tpl/inspector-templates.php +4 -0
css/inspector.css CHANGED
@@ -12,6 +12,21 @@
12
  font-size: 14px;
13
  border-top: 1px solid #a3a3a3;
14
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  #socss-inspector-interface .socss-toolbar {
16
  box-sizing: border-box;
17
  background: #e6e6e6;
12
  font-size: 14px;
13
  border-top: 1px solid #a3a3a3;
14
  }
15
+ #socss-inspector-interface .socss-link {
16
+ box-sizing: border-box;
17
+ background: #f3f3f3;
18
+ box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
19
+ border-top: 1px solid #a3a3a3;
20
+ position: absolute;
21
+ top: -29px;
22
+ height: 28px;
23
+ padding: 6px 15px;
24
+ width: 100%;
25
+ font-size: 13px;
26
+ text-align: right;
27
+ line-height: 1em;
28
+ display: none;
29
+ }
30
  #socss-inspector-interface .socss-toolbar {
31
  box-sizing: border-box;
32
  background: #e6e6e6;
css/inspector.less CHANGED
@@ -13,6 +13,22 @@
13
  font-size: 14px;
14
  border-top: 1px solid #a3a3a3;
15
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  .socss-toolbar {
17
  box-sizing: border-box;
18
  background: #e6e6e6;
13
  font-size: 14px;
14
  border-top: 1px solid #a3a3a3;
15
 
16
+ .socss-link {
17
+ box-sizing: border-box;
18
+ background: #f3f3f3;
19
+ box-shadow: 0 -2px 2px rgba(0,0,0,0.05);
20
+ border-top: 1px solid #a3a3a3;
21
+ position: absolute;
22
+ top: -29px;
23
+ height: 28px;
24
+ padding: 6px 15px;
25
+ width: 100%;
26
+ font-size: 13px;
27
+ text-align: right;
28
+ line-height: 1em;
29
+ display: none;
30
+ }
31
+
32
  .socss-toolbar {
33
  box-sizing: border-box;
34
  background: #e6e6e6;
inc/legacy.php ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ /**
4
+ * Remove the menu item for the CSS editor that comes bundled with SiteOrigin themes
5
+ */
6
+ function siteorigin_css_legacy_remove_legacy_actions(){
7
+ remove_action( 'admin_menu', 'siteorigin_custom_css_admin_menu' );
8
+ remove_action( 'wp_head', 'siteorigin_custom_css_display', 15 );
9
+ }
10
+ add_action( 'after_setup_theme', 'siteorigin_css_legacy_remove_legacy_actions', 100 );
js/inspector.js CHANGED
@@ -197,6 +197,18 @@
197
  thisView.trigger( 'click_property', $(this).data('property') );
198
  });
199
 
 
 
 
 
 
 
 
 
 
 
 
 
200
  this.trigger('set_active_element', el, selectors);
201
  }
202
 
197
  thisView.trigger( 'click_property', $(this).data('property') );
198
  });
199
 
200
+ // Display the link
201
+ var link = el.closest('a[href]');
202
+ var linkContainer = this.$('.socss-link');
203
+ if( link.length ) {
204
+ linkContainer.show().find('a')
205
+ .html( link.attr('href').replace(/[\?&]*so_css_preview=1/, '') )
206
+ .attr('href', link.attr('href') );
207
+ }
208
+ else {
209
+ linkContainer.hide();
210
+ }
211
+
212
  this.trigger('set_active_element', el, selectors);
213
  }
214
 
js/inspector.min.js CHANGED
@@ -5,7 +5,9 @@ e.preventDefault();e.stopPropagation();var $$=$(this);$$.blur();thisView.setActi
5
  catch(err){console.log('No editor to register this inspector with');}},setHoverEl:function(hoverEl){this.hoverEl=hoverEl;this.hl.highlight(hoverEl);},activate:function(){this.active=true;$('body').addClass('socss-active');$('body').removeClass('socss-inactive');},deactivate:function(){this.active=false;$('body').addClass('socss-inactive');$('body').removeClass('socss-active');this.hl.clear();this.$('.socss-hierarchy').empty();},toggleActive:function(){if(this.active){this.deactivate();}
6
  else{this.activate();}},setActiveEl:function(el){var thisView=this;var $h=this.$('.socss-hierarchy');$h.empty();if(el.prop('tagName').toLowerCase()!=='body'){var cel=$(el);do{$(this.selectorTemplate({selector:socss.fn.elSelector(cel)})).prependTo($h).data('el',cel);cel=cel.parent();}while(cel.prop('tagName').toLowerCase()!=='body');$(this.selectorTemplate({selector:'body'})).prependTo($h).data('el',$('body'));this.$('.socss-hierarchy .socss-selector').hover(function(){thisView.hl.highlight($(this).data('el'));}).click(function(e){e.preventDefault();e.stopPropagation();thisView.setActiveEl($(this).data('el'));});}
7
  $h.scrollLeft(99999);var selectors=this.pageSelectors.filter(function(a){try{return el.is(a.selector);}
8
- catch(err){return false;}});var container=this.$('.socss-selectors-window').empty();_.each(selectors,function(selector){container.append($(thisView.selectorTemplate(selector)).data(selector));});container.find('> div').mouseenter(function(){thisView.hl.highlight($(this).data('selector'));}).click(function(e){e.preventDefault();e.stopPropagation();thisView.trigger('click_selector',$(this).data('selector'));});var attributes=socss.fn.elementAttributes(el);container=this.$('.socss-properties-window').empty();_.each(attributes,function(v,k){container.append($(thisView.selectorTemplate({selector:'<strong>'+k+'</strong>: '+v})).data('property',k+': '+v));});container.find('> div').click(function(e){e.preventDefault();e.stopPropagation();thisView.trigger('click_property',$(this).data('property'));});this.trigger('set_active_element',el,selectors);}});socss.view.highlighter=Backbone.View.extend({template:_.template($('#socss-template-hover').html().trim()),highlighted:[],highlight:function(els){this.clear();var thisView=this;$(els).each(function(i,el){el=$(el);if(!el.is(':visible')){return true;}
 
 
9
  var hl=$(thisView.template());hl.css({'top':el.offset().top,'left':el.offset().left,'width':el.outerWidth(),'height':el.outerHeight()}).appendTo('body');var g;var padding=el.padding();for(var k in padding){if(parseInt(padding[k])>0){g=hl.find('.socss-guide-padding.socss-guide-'+k).show();if(k==='top'||k==='bottom'){g.css('height',padding[k]);}
10
  else{g.css('width',padding[k]);g.css({'width':padding[k],'top':padding.top,'bottom':padding.bottom});}}}
11
  var margin=el.margin();for(var k in margin){if(parseInt(margin[k])>0){g=hl.find('.socss-guide-margin.socss-guide-'+k).show();if(k==='top'||k==='bottom'){g.css('height',margin[k]);}
5
  catch(err){console.log('No editor to register this inspector with');}},setHoverEl:function(hoverEl){this.hoverEl=hoverEl;this.hl.highlight(hoverEl);},activate:function(){this.active=true;$('body').addClass('socss-active');$('body').removeClass('socss-inactive');},deactivate:function(){this.active=false;$('body').addClass('socss-inactive');$('body').removeClass('socss-active');this.hl.clear();this.$('.socss-hierarchy').empty();},toggleActive:function(){if(this.active){this.deactivate();}
6
  else{this.activate();}},setActiveEl:function(el){var thisView=this;var $h=this.$('.socss-hierarchy');$h.empty();if(el.prop('tagName').toLowerCase()!=='body'){var cel=$(el);do{$(this.selectorTemplate({selector:socss.fn.elSelector(cel)})).prependTo($h).data('el',cel);cel=cel.parent();}while(cel.prop('tagName').toLowerCase()!=='body');$(this.selectorTemplate({selector:'body'})).prependTo($h).data('el',$('body'));this.$('.socss-hierarchy .socss-selector').hover(function(){thisView.hl.highlight($(this).data('el'));}).click(function(e){e.preventDefault();e.stopPropagation();thisView.setActiveEl($(this).data('el'));});}
7
  $h.scrollLeft(99999);var selectors=this.pageSelectors.filter(function(a){try{return el.is(a.selector);}
8
+ catch(err){return false;}});var container=this.$('.socss-selectors-window').empty();_.each(selectors,function(selector){container.append($(thisView.selectorTemplate(selector)).data(selector));});container.find('> div').mouseenter(function(){thisView.hl.highlight($(this).data('selector'));}).click(function(e){e.preventDefault();e.stopPropagation();thisView.trigger('click_selector',$(this).data('selector'));});var attributes=socss.fn.elementAttributes(el);container=this.$('.socss-properties-window').empty();_.each(attributes,function(v,k){container.append($(thisView.selectorTemplate({selector:'<strong>'+k+'</strong>: '+v})).data('property',k+': '+v));});container.find('> div').click(function(e){e.preventDefault();e.stopPropagation();thisView.trigger('click_property',$(this).data('property'));});var link=el.closest('a[href]');var linkContainer=this.$('.socss-link');if(link.length){linkContainer.show().find('a').html(link.attr('href').replace(/[\?&]*so_css_preview=1/,'')).attr('href',link.attr('href'));}
9
+ else{linkContainer.hide();}
10
+ this.trigger('set_active_element',el,selectors);}});socss.view.highlighter=Backbone.View.extend({template:_.template($('#socss-template-hover').html().trim()),highlighted:[],highlight:function(els){this.clear();var thisView=this;$(els).each(function(i,el){el=$(el);if(!el.is(':visible')){return true;}
11
  var hl=$(thisView.template());hl.css({'top':el.offset().top,'left':el.offset().left,'width':el.outerWidth(),'height':el.outerHeight()}).appendTo('body');var g;var padding=el.padding();for(var k in padding){if(parseInt(padding[k])>0){g=hl.find('.socss-guide-padding.socss-guide-'+k).show();if(k==='top'||k==='bottom'){g.css('height',padding[k]);}
12
  else{g.css('width',padding[k]);g.css({'width':padding[k],'top':padding.top,'bottom':padding.bottom});}}}
13
  var margin=el.margin();for(var k in margin){if(parseInt(margin[k])>0){g=hl.find('.socss-guide-margin.socss-guide-'+k).show();if(k==='top'||k==='bottom'){g.css('height',margin[k]);}
readme.txt CHANGED
@@ -2,7 +2,7 @@
2
  Tags: css, design, edit, customize
3
  Requires at least: 3.9
4
  Tested up to: 4.2.2
5
- Stable tag: trunk
6
  License: GPLv3 or later
7
  Contributors: gpriday
8
 
@@ -36,6 +36,10 @@ We're committed to keeping SiteOrigin CSS free. You can install it on as many si
36
 
37
  There's an ever-growing collection of awesome WordPress themes, and now with SiteOrigin CSS you can edit every single one of them to your heart's content. No matter what theme you're using, SiteOrigin CSS will work perfectly.
38
 
 
 
 
 
39
  == Installation ==
40
 
41
  1. Upload and install SiteOrigin CSS in the same way you'd install any other plugin.
@@ -49,5 +53,10 @@ There's an ever-growing collection of awesome WordPress themes, and now with Sit
49
 
50
  == Changelog ==
51
 
 
 
 
 
 
52
  = 1.0 =
53
  * Initial release.
2
  Tags: css, design, edit, customize
3
  Requires at least: 3.9
4
  Tested up to: 4.2.2
5
+ Stable tag: 1.0
6
  License: GPLv3 or later
7
  Contributors: gpriday
8
 
36
 
37
  There's an ever-growing collection of awesome WordPress themes, and now with SiteOrigin CSS you can edit every single one of them to your heart's content. No matter what theme you're using, SiteOrigin CSS will work perfectly.
38
 
39
+ = Actively Developed =
40
+
41
+ We're actively developing SiteOrigin CSS. Keep track of what's happening over on [GitHub](https://github.com/siteorigin/so-css/).
42
+
43
  == Installation ==
44
 
45
  1. Upload and install SiteOrigin CSS in the same way you'd install any other plugin.
53
 
54
  == Changelog ==
55
 
56
+ = 1.0.1 =
57
+ * Fixed conflicts with CSS editor in SiteOrigin themes.
58
+ * Force dequeue scripts that cause problems with main editing interface.
59
+ * Made it easier to follow links with inspector enabled.
60
+
61
  = 1.0 =
62
  * Initial release.
so-css.php CHANGED
@@ -2,7 +2,7 @@
2
  /*
3
  Plugin Name: SiteOrigin CSS
4
  Description: An advanced CSS editor from SiteOrigin.
5
- Version: 1.0
6
  Author: SiteOrigin
7
  Author URI: https://siteorigin.com
8
  Plugin URI: https://siteorigin.com/css/
@@ -10,8 +10,11 @@ License: GPL3
10
  License URI: https://www.gnu.org/licenses/gpl-3.0.txt
11
  */
12
 
13
- define('SOCSS_VERSION', '1.0');
14
- define('SOCSS_JS_SUFFIX', '.min');
 
 
 
15
 
16
  /**
17
  * Class SiteOrigin_CSS The main class for the SiteOrigin CSS Editor
@@ -25,11 +28,12 @@ class SiteOrigin_CSS {
25
  $this->snippet_paths = array();
26
 
27
  // Main header actions
28
- add_action( 'wp_head', array($this, 'action_wp_head') );
29
 
30
  // All the admin actions
31
  add_action( 'admin_menu', array($this, 'action_admin_menu') );
32
  add_action( 'admin_enqueue_scripts', array($this, 'enqueue_admin_scripts') );
 
33
  add_action( 'load-appearance_page_so_custom_css', array($this, 'add_help_tab') );
34
  add_action( 'admin_footer', array($this, 'action_admin_footer') );
35
 
@@ -185,6 +189,18 @@ class SiteOrigin_CSS {
185
  add_action( 'admin_footer', array($this, 'action_admin_footer') );
186
  }
187
 
 
 
 
 
 
 
 
 
 
 
 
 
188
  /**
189
  * Get all the available property controllers
190
  */
@@ -390,7 +406,7 @@ class SiteOrigin_CSS {
390
  * Get a URL to tweet out the changes
391
  */
392
  function get_tweet_url(){
393
- $tweet = __('I customized my site using @SiteOrigin CSS (http://siteorigin.com/css/). What do you think?', 'so-css');
394
  $tweet .= ' ';
395
  $tweet .= get_site_url();
396
 
2
  /*
3
  Plugin Name: SiteOrigin CSS
4
  Description: An advanced CSS editor from SiteOrigin.
5
+ Version: 1.0.1
6
  Author: SiteOrigin
7
  Author URI: https://siteorigin.com
8
  Plugin URI: https://siteorigin.com/css/
10
  License URI: https://www.gnu.org/licenses/gpl-3.0.txt
11
  */
12
 
13
+ // Handle the legacy CSS editor that came with SiteOrigin themes
14
+ include plugin_dir_path(__FILE__) . '/inc/legacy.php';
15
+
16
+ define('SOCSS_VERSION', '1.0.1');
17
+ define('SOCSS_JS_SUFFIX', '');
18
 
19
  /**
20
  * Class SiteOrigin_CSS The main class for the SiteOrigin CSS Editor
28
  $this->snippet_paths = array();
29
 
30
  // Main header actions
31
+ add_action( 'wp_head', array($this, 'action_wp_head'), 20 );
32
 
33
  // All the admin actions
34
  add_action( 'admin_menu', array($this, 'action_admin_menu') );
35
  add_action( 'admin_enqueue_scripts', array($this, 'enqueue_admin_scripts') );
36
+ add_action( 'admin_enqueue_scripts', array($this, 'dequeue_admin_scripts'), 100 );
37
  add_action( 'load-appearance_page_so_custom_css', array($this, 'add_help_tab') );
38
  add_action( 'admin_footer', array($this, 'action_admin_footer') );
39
 
189
  add_action( 'admin_footer', array($this, 'action_admin_footer') );
190
  }
191
 
192
+ /**
193
+ * @param $page
194
+ */
195
+ function dequeue_admin_scripts( $page ) {
196
+ if( $page != 'appearance_page_so_custom_css' ) return;
197
+
198
+ // Dequeue the core WordPress color picker on the custom CSS page.
199
+ // This script causes conflicts and other plugins seem to be enqueueing it on the SO CSS admin page.
200
+ wp_dequeue_script('wp-color-picker');
201
+ wp_dequeue_style('wp-color-picker');
202
+ }
203
+
204
  /**
205
  * Get all the available property controllers
206
  */
406
  * Get a URL to tweet out the changes
407
  */
408
  function get_tweet_url(){
409
+ $tweet = __('I changed my site design using @SiteOrigin CSS (http://siteorigin.com/css/). What do you think?', 'so-css');
410
  $tweet .= ' ';
411
  $tweet .= get_site_url();
412
 
tpl/inspector-templates.php CHANGED
@@ -1,5 +1,9 @@
1
  <div id="socss-inspector-interface" class="socss-element">
2
 
 
 
 
 
3
  <div class="socss-toolbar">
4
  <div class="socss-enable-inspector dashicons dashicons-search"></div>
5
  <div class="socss-hierarchy"></div>
1
  <div id="socss-inspector-interface" class="socss-element">
2
 
3
+ <div class="socss-link">
4
+ <?php _e('Navigate To: ', 'so-css') ?>: <a href="#"></a>
5
+ </div>
6
+
7
  <div class="socss-toolbar">
8
  <div class="socss-enable-inspector dashicons dashicons-search"></div>
9
  <div class="socss-hierarchy"></div>