{"id":86041,"date":"2012-07-09T06:15:36","date_gmt":"2012-07-09T10:15:36","guid":{"rendered":"http:\/\/wpmu.org\/?p=86041"},"modified":"2012-07-09T06:15:36","modified_gmt":"2012-07-09T10:15:36","slug":"wordpress-css-plugin","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/wordpress-css-plugin\/","title":{"rendered":"Test CSS Formatting in Real Time on Your WordPress Blog"},"content":{"rendered":"

\"WordPressSo the theme customizer<\/a> is here, and presumably here to stay.<\/p>\n

Not only that, it would seem that theme developers are going to be utilizing it – which is of course key to its long term success. I am sure we will be seeing plenty of updates to WordPress’ biggest new feature in future versions, but for the time being, plugin developers will be toiling away to create their own custom functionality.<\/p>\n

And today I want to focus on one such plugin – Live CSS Preview<\/a>.<\/p>\n

Real Time Formatting<\/h2>\n

We all understand the key selling point of the theme customizer – it allows you to test changes to your site, in real time, and then implement them immediately<\/strong>. Whilst the options at this point are relatively limited, I presume they will be expanded upon in the future.<\/p>\n

The focus is clearly very much on basic formatting options for users who are perhaps not prepared (or able) to roll up their sleeves and get their hands dirty with some code, which is perhaps why CSS formatting was not included as standard.<\/p>\n

However,\u00a0Live CSS Preview<\/a> is seeking to redress the balance with one little box:<\/p>\n

\"WordPress<\/p>\n

You will find this box in the sidebar in the theme customizer, and as you might be able to guess, you can use it to make real time changes to your site’s CSS:<\/p>\n

\"WordPress
Before…<\/figcaption><\/figure>\n
\"WordPress
…and after.<\/figcaption><\/figure>\n

The change is literally instant, so this plugin gives you an easy way of experimenting with your site’s formatting.<\/p>\n\n

Where Does it Go?<\/h2>\n

I was curious to see how the custom CSS is implemented on the blog, and was disappointed to note that it is placed directly within the page:<\/p>\n

\"WordPress<\/p>\n

Ideally the plugin would append custom CSS to a custom.css file – or at least a bespoke custom file created by the plugin. Having the code placed in the page is the least desirable result, and makes it less viable to use the plugin as a full-time solution for CSS editing.<\/p>\n

Having said that, in terms of making and observing CSS changes on the fly, I don’t think this can be beaten<\/strong>. Using this in tandem with Chrome’s Developer Tools<\/a> (or Firebug<\/a>) makes formatting a site to your liking really easy.<\/p>\n

Download Live CSS Preview<\/a>.<\/p>\n

Creative Commons image courtesy of\u00a0geirarne<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Convert the theme customizer into a CSS editor with Live CSS Preview!<\/p>\n","protected":false},"author":84405,"featured_media":86046,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[1044],"tutorials_categories":[],"class_list":["post-86041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-css"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/86041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84405"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=86041"}],"version-history":[{"count":2,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/86041\/revisions"}],"predecessor-version":[{"id":216467,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/86041\/revisions\/216467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/86046"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=86041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=86041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=86041"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=86041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}