Jetpack updates seem to be cruising right along these days. The 1.7 release includes one of the most useful new features to date – the Custom CSS module.
This new addition allows you to override or replace your theme’s CSS in the dashboard. No child theme is required for this custom CSS file, although you will still need a child theme if you want to customize your theme’s template files.
You can configure the module by turning it on in Jetpack and then navigating to Appearance >> Edit CSS.
When you first configure the CSS module you’ll see this very helpful note in the comments:
By default, your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. Just write here what you want to change, you don’t need to copy all your theme’s stylesheet content.
On the custom CSS page you will have the option to add the CSS to your theme’s stylesheet or simple replace it with your own custom CSS:
The Custom CSS Module Features:
- Colorful Syntax highlighter with auto-indentation
- immediate feedback on the validity of your CSS
- Revisions saved, in case you make an error
- Preview button
- Link to the original stylesheet
Sounds like it could make your life a bit easier, doesn’t it?
The Custom CSS module isn’t the only thing that’s new in the Jetpack 1.7 update. Other nice fixes include:
- Jetpack Comments UI improvements: After you submit a comment, the fullpage load on jetpack.wordpress.com has been removed so that everything stays on your site
- Unofficial sharing buttons now have counts for Twitter, Facebook and LinkedIn
- Tons of bug fixes which you can find at the Jetpack changelog
The Custom CSS module provides an easy interface for people who like to dabble a bit with the CSS of their themes without having to use FTP or dive into the theme folder. This is a fantastic new addition and you’ll want to update any of your WordPress sites that already use Jetpack so that you can take advantage of everything new.
Nice feature. It includes a nonce and has a nifty editor.
Sadly, it still allows users to insert almost any URL within the CSS, so on a multisite install users could include content from an unapproved source – such as porn sites or sites exploiting security vulnerabilities such as user-escalation, session hijacking, mitm or even browser bugs. There *should* be a whitelist to enable “approved” domains to link thru, or forbid linking outside the current site via root-relative URLs.
This was actually one of my first thoughts as well.
There’s concern that injections will be used to exploit any possible vulnerabilities.
It’s definitely a great addition, but I hope that many users have sufficient security setup for their sites to block potentially harmful queries.
Amazing! What a great feature. We can add custom CSS to our WordPress Dashboard. Thanks a lot for this useful and valuable information.
I love this and would use it more, but annoyingly when saving it removes any commented sections I have in my CSS, marking them as invalid code.
It also doesn’t Add (APPEND) CSS to the stylesheet. Just adds a separate custom CSS link into the HTML.
Which I wouldn’t mind if I could comment things out in it!