Simple CSS

ཞིབ་བརྗོད།

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.

Want your CSS to only apply on a specific page or post? Simple CSS adds a metabox which allows you to do just that.

Check out GeneratePress, our awesome WordPress theme! (https://wordpress.org/themes/generatepress)

Features include:

  • Full featured admin CSS editor
  • Dark and light editor themes
  • CSS editor in the Customizer so you can live preview your changes
  • Metabox for page/post specific CSS

གཏུབ་རེིས།

  • The dark theme of the CSS editor.
  • The light theme of the CSS editor.
  • The CSS editor in the Customizer.
  • The CSS editor metabox.

སྒྲིག་འཇུག

There’s two ways to install Simple CSS.

  1. Go to “Plugins > Add New” in your Dashboard and search for: Simple CSS
  2. Download the .zip from WordPress.org, and upload the folder to the /wp-content/plugins/ directory via FTP.

In most cases, #1 will work fine and is way easier.

FAQ

How do I add CSS using your plugin?

  • Make sure Simple CSS is activated.
  • Navigate to “Appearance > Simple CSS” and add your CSS to the editor.

How do I add CSS using the Customizer?

  • Make sure Simple CSS is activated.
  • Navigation to “Appearance > Customize” and open the “Simple CSS” section.

How do I change the editor color?

  • In “Appearance > Simple CSS”, change the “Dark” option below the “Save CSS” button to “Light”.

How do I add CSS that applies only to one page?

  • Navigate to your page or post in the Dashboard and look for the “Simple CSS” metabox.

གདེང་འཇོག

2023 ལོའི་ཟླ 12 ཚེས 16 ཉིན།
This seems like a great idea, and it's super to finally be clear of the small Additional CSS panel in native wordpress. What's making me unsure if I should continue are 2 things: 1 - when you press Save, it shoots you back to the top of the CSS file. If you wanted to check and re-edit a bit you were working on, you've got to find it again. 2 - no code hints to help complete as you type. Both these things are present on the Additional CSS panel but not here. Hope they can introduce!
2023 ལོའི་ཟླ 9 ཚེས 23 ཉིན།
By far the best plugin to add custom css, I have been using it for years now and in many websites.
2023 ལོའི་ཟླ 1 ཚེས 18 ཉིན།
Please update is amazing plugin.
2021 ལོའི་ཟླ 2 ཚེས 9 ཉིན།
I had been struggling with page speed but could see in GT Metrix that custom CSS (Jetpack) was taking over 1 second to load. Copied it over to Simple CSS and page load dropped from 3.3 seconds to 0.8s! That's a 75% reduction - fantastic!!! [Also, I love that I can drop a little bit of CSS into the meta box for some post-specific tweaks - so cool, saves CSS bloat for rarely used styling]
2020 ལོའི་ཟླ 9 ཚེས 15 ཉིན།
This solves so much for me/us. I regret not finding this before. Why did I not find this until today? I just clicked every single link on Toms website (generatepress.com) to figure out if I missed some other amazing things. Newsletter from Tom? Yes please.
གདེང་འཇོག 59 ཡོངས་སུ་ཀློག

བྱས་རྗེས་འཇོག་མཁན། & གསར་འབྱེད་པ།

“Simple CSS” is open source software. The following people have contributed to this plugin.

བྱས་རྗེས་འཇོག་མཁན།

དག་བཅོས་ཉིན་ཐོ།

1.1.1

  • Fix PHP notice when Simple CSS hasn’t been saved yet

1.1

  • Fix meta box saving issue

1.0

  • Show metabox only on public post types
  • Add live preview to Customizer
  • Code cleanup
  • Better sanitizing/validation

0.4

  • Use browser search instead of CodeMirror dialog search
  • Don’t show GeneratePress metabox if it’s already activated
  • Make CSS box full height

0.3

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

0.2

  • Remove extra whitespace from CSS output
  • Remove spellcheck from Customizer input
  • Allow > characters in the CSS
  • Add find (ctrl + f) functionality

0.1

  • Initial release