Visual CSS Style Editor

Description

Yellow Pencil is a WordPress style editor which allow you edit the website design in real-time. Watch the following short video for learning quickly or Try live demo now.

كۆرۈنمىلىك تەھرىرلىگۈچ

The plugin allows you customize any page and theme. Click on an element and start visual customization. Adjust colors, fonts, sizes, positions and a lot more. Take control of your website with more than 50 styles properties.

Yellow Pencil provides everything that you need for customizing your site design. The plugin comes with advanced features like visual resizing, drag & drop, measuring tool as well as a ton resources that background patterns, sweet fonts, and trend color palettes also it has an advanced responsive tool which allows you customize your site for any screen size.

How does this work?

The plugin creates CSS style codes like a professional web developer in the back while you are playing with colors.

Some Key Features

  • 600+ Font families (Pro Version)
  • 300+ Background patterns (Pro Version)
  • Trend color palettes (Pro Version)
  • Measuring tool
  • Animation generator
  • Animation manager
  • Responsive support
  • Hover & Focus selectors
  • Selector search tool
  • Drag & Drop feature
  • Wireframe mode
  • 50+ Animations (Pro Version)
  • Smart guides
  • Design information
  • Color picker (Pro Version)
  • CSS3 filter effects (Pro Version)
  • 50+ CSS properties
  • Support custom selectors
  • Live Resizer (Pro Version)
  • Live CSS Editor
  • Export Stylesheet File
  • CSS Manager
  • Undo & Redo feature
  • Clean CSS output
  • Customize any page
  • Automatic Update
  • Shortcuts
  • Well Documentation

This is a lite version and some properties not available. Upgrade to Pro Version to unlocking all features or take a look at Plugin Website for getting more information.

Screenshots

  • Click any element that you want to edit. (Blue bordered paragraph selected in screenshot.)
  • Select any that you want to edit. There are so many settings.
  • Edit Fonts, sizes, positions and a lot more.
  • Select one of 600 Google fonts.
  • Color palettes and background settings.

Reviews

Read all 29 reviews

Changelog

6.0.0

  • Added Edit button to post edit pages.
  • Fixed a few bug.

5.5.9

  • CSS Editor bug fixed.

5.5.8

  • Performance optimization. 6x times faster.

5.5.7

  • Display property updated
  • Improvements to smart @media AI
  • Improvements to automatic important algorithm
  • Admin Panel Updated
  • Added: One click plugin activation
  • A few bugs fixed.

5.5.6

  • Added Background Blend Mode
  • Added RotateX, RotateY and RotateZ settings to transforms.
  • Added :active, :link, :visited support
  • Minifying CSS in Header Output
  • CSS Selector Algorithm Updated
  • Fixed Live Preview SSL bug.
  • New Algorithm: Detecting CSS rules in defined media queries of the target element and auto creating limits with media queries.
  • Live Resizing: Height property replaced with min-height
  • Live Resizing: Top and left borders anymore not resizeable. This feature disabled for keep responsive system stable.
  • Fixed Minor Bugs
  • Animation bug fixed.

5.5.5

  • A few bugs fixed.

5.5.4

  • Fixed: Some elements not selectable.
  • Fixed: conflict with W3 Total Cache.

5.5.3

  • New Interface.
  • 1500% more fast style processing time.
  • 300% more fast resizing performance.
  • Press SHIFT key for select multiple elements.
  • Functional improvements.

5.5.2

  • Fixed a critical loading issue.
  • A few Improvement to make it more functional.
  • A lot bug fixed.

5.5.1

  • Added multiple element selection support
  • Added font families support to the exportable stylesheet.
  • Added static stylesheet support.
  • Added a new option for reset the selected element.
  • New: Press delete key for hiding the selected element.
  • Improvement to hover and focus feature.
  • improvement to Search Element Tool.
  • Improvement to Single Selector Tool. (Now more smart)
  • Filter, box shadow, and transform options engine updated. High performance!
  • Improvement to Undo & Redo.
  • Improvement to Smart Guides.
  • New Shortcuts: [R] Responsive Tool, [M] : Measuring Tool, [W]: Wireframe, [D]: Design information

5.5.0

  • Fixed an issue with single selector tool.

5.4.9

  • Fixed a few small issues.

5.4.8

  • Fixed two critical bug.

5.4.7

  • Fixed a critical error.

5.4.6

  • Added transparent color support. (RGBA)
  • Improvement to editor loader.
  • Now support of export all CSS rules as ready-to-use.

5.4.5

  • Improvements for Chrome.

5.4.4

  • Added live animation manager
  • Animations support in responsive now.
  • A critical bug fixed.

5.4.3

  • Critical improvements to core.
  • Improvements to performance

5.4.2

  • Fixed slow loading issue.
  • Improvements to smart CSS Selector.

5.4.1

  • Critical CSS selector bug fixed.

5.4.0

  • Visual Resize Elements
  • Improvements to CSS Selectors.
  • Improvements to UI.
  • Added Smart guides to Drag&Drop and Resize features.
  • Added Design information; Information about selected element, typography and more.
  • Improvements to CSS Editor.
  • Improvements to border radius, font family, animations.
  • Added: Animation manager! Animation manager will available on next update.
  • and a ton minor improvements!

5.3.5

  • New Feature: wireframe.
  • Fixed minor bugs.

5.3.4

  • New Smart artificial intelligence! (Generating CSS codes as human)
  • Powerful performance updates!
  • Improvements to the core.
  • Woocommerce save bug fixed.

5.3.3

  • Fixed save bug.
  • Added export & import.

5.3.2

  • Fixed an important bug for SSL.
  • Two minor bugs fixed.

5.3.1

  • Fixed bug with localhost.
  • minor bugs fixed.

5.3.0

  • New: Resizable Responsive Mode
  • New: Support any CSS media queries
  • improvements to Background Patterns
  • improvements to Custom Selector
  • improvements to Ruler And CSS Editor

5.2.9

  • Fixed selector bug.

5.2.8

  • Fixed: aiming bug.

5.2.7

  • Fixed: menu bug.
  • Fixed: ruler bug.

5.2.6

  • New: you can disable aiming mode.
  • New: Single selector mode
  • New: ruler and measuring tools
  • New: Added ”write CSS link“
  • Fixed: a ton bug fixed.
  • Improvements: Improvements on the interface.
  • Shortcuts updated.

5.2.5

  • NEW: Auto typing selector to CSS editor.
  • NEW: Autocomplete for CSS editor.
  • Improvements for selectors.

5.2.3

  • Fixed SSL bug.

5.2.2

  • New: showing padding with a line.
  • New: Smart titles for elements.
  • New: No limit for font-size, etc.
  • New: Visual select body tag.
  • Improvements for plugin core.

5.2.1

  • Some features unlock for lite version.
  • Animation bugs fixed.
  • Improvements for SSL.
  • Selector bugs fixed.

5.2.0

  • Added: animation creator.
  • Visual Improvements.
  • Improvements for font family.
  • ”Box Shadow color“ issue fixed.
  • Core issues fixed.
  • Background color issue fixed.
  • ”CSS Editor not show codes“ bug fixed.
  • ”CSS data lose“ bug fixed.

5.1.2

  • WordPress 4.4 update.
  • Selector bug fixed.
  • Custom selector bug fixed.

5.1.1

  • Added Visibility Property
  • Trash posts bug fixed
  • Improvements for transformed elements.
  • Improvements for dragger and resizer.
  • Animations bug fixed.
  • Improvements for CSS Editor

5.1.0

  • Drag&Drop bug fixed.
  • Live Element re-sizer Added!
  • Improvements for selections
  • Improvements to core.
  • Improvements for color picker
  • Improvements for small screens.

5.0.2

  • small bug fixed.

5.0.1

  • a few small bugs fixed.

5.0.0

  • Improvements for picker
  • Improvements for performance
  • Improvements for undo/Redo
  • Improvements for CSS Editor
  • Improvements for automatic important system
  • Improvements for slider
  • More Smart And Easy
  • Loading issue fixed.
  • New color picker!

4.7.0

  • Added custom Selector.
  • All Bugs Fixed

4.6.3

  • Added automatic update API
  • Improvements to interface
  • A lot of improvements to core
  • Added helper notices.
  • Fixed ”select just it“ bug.
  • Fixed drag&drop bug.
  • Fixed parent setting.

4.6.2

  • Important Improvements.

4.6.1

  • Fixed background image.

4.5

  • Added table-cell for display.
  • Added Drag & Drop Features.
  • Improvement to shortcuts.
  • Improvement for width, animations and display.
  • Body class prefix fixed.
  • background image Full size fixed.
  • H Key problem fixed.
  • Context menu close bug fixed.
  • Improvement for CSS Engine.
  • CSS Editor bug fixed.
  • Chrome transform bug fixed.
  • Ruler height bug fixed.
  • Now up/down keys change ”px“,“em“ and ”%“.
  • Slider value bug fixed.
  • Improvement for the position.
  • Jquery bug fixed.

4.4

  • Improvement for undo and redo.
  • Added Background image uploader.
  • Added Color picker.
  • Improvement for Text shadow.
  • Added CSS Source Controller page.
  • Theme Part Feature Disabled.

1.2

  • Shortcuts bug fixed.
  • some pro features unlock for lite version!

1.1

  • Some bugs fixed.

1.0

  • Initial Release

Contributors & Developers

Visual CSS Style Editor is open source software. The following people have contributed to this plugin.

Contributors

Translate Visual CSS Style Editor into your language.

Interested in development?

Browse the code or subscribe to the development log by RSS.