Visual CSS Style Editor

Descrizione

An advanced CSS editor which allows you edit the website design in real-time. Try Live Demo.

Visual CSS Editor

The plugin allows you customize any page and theme without coding. Click 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.

YellowPencil editor provides everything that you need for customizing your site design. The plugin comes with advanced features like visual resizing, drag & drop, measuring tool, background patterns, google fonts and a lot more.

Caratteristiche principali

  • Customize any page, any element
  • Customize WordPress login page
  • Auto CSS Selectors
  • 50+ CSS properties
  • Visual Drag & Drop
  • Visual Margin & Padding Editing
  • Live Element Resizing
  • Manage the changes
  • Live Preview
  • Undo / Redo
  • Export stylesheet file
  • Export / Import

CSS Properties: Text

  • Font Family (Pro Version)
  • Font Weight
  • Color (Pro Version)
  • Text Shadow
  • Font Size
  • Line Height
  • Font Style
  • Text Align
  • Text Transform
  • Letter Spacing
  • Word Spacing
  • Text Decoration
  • Text Indent
  • Word Wrap

CSS Properties: Background

  • Parallax Background
  • Background Color (Pro Version)
  • Background Image (Pro Version)
  • Background Blend Mode
  • Background Position
  • Background Size
  • Background Repeat
  • Background Attachment

Other CSS Properties

  • Margin
  • Padding
  • Border
  • Border Radius
  • Position
  • Width (Pro Version)
  • Height (Pro Version)
  • Animation (Pro Version)
  • Lists
  • Box Shadow
  • Filter
  • Transform
  • Opacity (Pro Version)
  • Display
  • Cursor
  • Float
  • Clear
  • Visibility
  • Pointer Events
  • Overflow

Design Tools

  • Element Inspector
  • Single Element Inspector
  • Live CSS Editor
  • Responsive Tool
  • Element Search Tool
  • Measuring Tool
  • Wireframe View
  • Element Box Model
  • Gradient Generator (Pro Version)
  • Visual Animation Manager (Pro Version)
  • Visual Animation Generator (Pro Version)

Design Assets

  • 800+ Font families (Pro Version)
  • 300+ Background patterns (Pro Version)
  • Trend color palettes (Pro Version)
  • 50+ Animations (Pro Version)

How does this work?

The plugin generates CSS codes like a professional web developer in the background while you are editing the web page visually. The plugin loads the generated CSS to your website, it never edits the theme files. You can undo your changes anytime.

Premium features

The following properties are available only in paid version;

  • Font Families
  • Font Color
  • Background Color
  • Background Image
  • Opacity
  • Width & Height
  • Animations

Purchase Pro Version now to unlock all features or take a look the plugin website for more information.

Screenshot (schermate)

  • 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.

Installazione

  1. Upload yellow-pencil-visual-theme-customizer folder to the /wp-content/plugins/ directory
  2. Attivare il plugin tramite il menu ‘Plugin’ di WordPress
  3. Go to WordPress Panel > Appearance > “YellowPencil Editor” and Start to customize!

FAQ

Does this work with all themes?

Yes! YellowPencil works with any theme and plugin!

How does it generate CSS Selectors?

The plugin filtering classes and tag names with dozens of algorithms and finds the best CSS Selector for the targeted elements.

Can I customize WordPress Login page?

Yes, open the editor from WordPress Panel > Appearance > YellowPencil Editor, Select “WordPress login page” as target page and click customize button.

Recensioni

Amazing

Just one of the best plugins i found, easy to use and very helpfull and powerful, giving many options to customize the page easily.

Fake Free

It pretends to be free, but the essential things are only for PRO users, i.e. bg color, text color and so on. The functionalities that are FREE are functionalities that depends on the the paid ones… totally bullshit

This was a last resort but it worked

I tried many css and page template adjustments but was unable to make the WordPress Twenty Seventeen theme display single column pages at anything other than the default 740px width. Within 15 minutes of installing the pro version of this plugin I was easily able to adjust the page widths. It does many other things also like enable people to enlarge the logo for the WP Twenty Seventeen theme.
This is a winner and I don’t think I can use that theme without this plugin.

Leggi tutte le recensioni di 49

Crediti e riconoscimenti

“Visual CSS Style Editor” è un software open source. Le persone che hanno contribuito allo sviluppo di questo plugin sono indicate di seguito.

Collaboratori

“Visual CSS Style Editor” è stato tradotto in 1 lingua. Grazie ai traduttori per i loro contributi.

Traduci “Visual CSS Style Editor” nella tua lingua.

Ti interessa lo sviluppo?

Esplora il Codice segui il Repository SVN iscriviti al Log delle Modifiche. Puoi farlo tramite RSS con un lettore di feed.

Changelog (modifiche)

7.1.2

  • New Feature: WordPress login page customization support.
  • A small bug fixed on Single Inspector.

7.1.1

  • Blank page bug fixed.
  • Ace editor conflict fixed.

7.1.0

  • Media query sorting bug fixed.

7.0.9

  • CSS Loading bugs fixed.
  • Gradient Tool bug fixed.
  • improvements to editor performance.

7.0.8

SSL CSS loading bug fixed.

Media query bug fixed.

7.0.7

  • New Feature: Editable Element labels and CSS comment support for selectors.
  • New Feature: Specifies if property groups edited without open it.
  • New Feature: Always shows Margin and Padding on mouseover.
  • New Feature: High-performance option for the editor.
  • Added advanced settings to Editor.
  • Added Gutenberg integration support.
  • Added background-position-x and background-position-y properties.
  • Added support to edit draft pages.
  • Added RTL Support.
  • The selected element reset bug fixed.
  • Live preview bug fixed.
  • Single inspector bug fixed.
  • Smart media query sorting bug fixed.
  • Improvements to core functions.
  • Improvements to dynamic id and class detector.

7.0.6

  • Responsive Tool the page jump bug fixed
  • CSS editor scrollbar bug fixed
  • Improvements core functions

7.0.5

  • Added automatically Detection for the dynamic id and classes.
  • Font family bug fixed
  • Improvements core functions
  • Submenu bug fixed.
  • A bug fixed on Element Tree

7.0.4

  • ContextMenu bugs fixed
  • Customization type bugs fixed.
  • WooCommerce bugs fixed.
  • Bugs fixed for low PHP versions.
  • Body tag resizing bug fixed.
  • Element selection bug fixed.

7.0.3

  • Single and template customization bug fixed.
  • Synchronize feature has been canceled.
  • improvements to core functions.

7.0.2

  • An important bug fixed.

7.0.1

  • A few small bug fixed.

7.0.0

  • New Feature: The parent elements of the selected element always visible at bottom of the editor.
  • New Feature: Review all changes visually, disable or change.
  • New Feature: Fixed Right Panel, drag-drop the right panel to the right corner of the page.
  • New Feature: CSS Flexbox Support, Flexbox settings will available on right panel when you select a flexbox element.
  • New Feature: Live Customizing type change, Change the current customizing type from the right panel without refresh the page.
  • New Feature: Change the target page live, Change the target page by clicking the page name on the right panel.
  • New Feature: An new smart element Search Tool.
  • Fixed: Selection problem on the elements which has javascript click events.
  • New Feature: CSS Property Based Responsive Options, The editor will show you if there a “width” property applied in another media query to the target element.
  • New Feature: Review breakpoint styles, review selected element styles, the customizing types styles visually, see all applied styles.
  • New Feature: Customizable Interface, all tools are resizable.
  • New Feature: Gradient Text Support, Select a background and apply “text” value to the background-clip property.
  • Added: 300+ Modern CSS3 Gradients
  • Added: Single, Template, Global tabs to CSS editor.
  • Added: All Pseudo-Classes to the editor.
  • Added: CSS Validation to CSS editor
  • Added: Iframe element selection support by click.
  • Added: Highlight elements by class and ID, click any class or id on Design Information tool to highlight the target elements.
  • Added: CSS styles are available in Admin Page of YellowPencil, you can see applied styles directly in Admin Panel.
  • Improvements: 23x faster CSS process and read speed with the new core functions.
  • Improvements: Inspector tool is 3x faster
  • Improvements to all tools reorganized for better user experience.
  • Improvements to core functions of the editor.
  • Many bugs fixed.
  • Notice: Exported the plugin data in older versions will not work on 7 and above versions.
  • Notice: Parallax image features anymore not available in the editor but the elements that applied parallax feature will still work.
  • Notice: Front page, The posts page, and archive pages are not affected by the page template styles.
  • Notice: Defined selectors in the theme and plugin stylesheets are anymore not available in the editor.

6.1.4

  • Added pointer-events property
  • Added cursor property
  • logital improvements to CSS selectors
  • Animation Manager bugs fixed

6.1.3

  • Added support for HTML5 id and classes. ‘##test’, ‘#.#test’ and such.

6.1.2

  • the changes you made may not be saved” popup problem has been fixed.

6.1.1

  • Parent tree view feature has been added to element settings.

6.1.0

  • New smart algorithm for auto “important” tag.
  • Improvements to Editor loading speed.
  • CSS Editor bug fixed.
  • Autoptimize plugin conflict fixed.

6.0.9

  • Visual padding editing bug fixed.

6.0.8

  • New Feature: Visual Margin & Padding Editing
  • New Feature: List Style Properties
  • New Feature: Smarter selector algorithm
  • New Feature: Element Box Model added to design information section
  • Added: Text Indent and Word Wrap CSS properties
  • Improvements to Gradient Generator
  • Improvements to Responsive Breakpoints
  • Improvements to ColorPicker
  • Fixed: CSS Minify and Cache conflict

6.0.6

  • Improvements to Editor
  • Saving bug fixed
  • Better Editor Performance

6.0.5

  • Saving issue fixed

6.0.4

  • jQuery Updated
  • Drag & Drop bug fixed
  • CSS Selector bug fixed
  • Fixed a small problem with breakpoints

6.0.3

  • A few bugs fixed.

6.0.2

  • New Feature: The plugin anymore supports to customize register/login pages. You can show the page as the visitor
  • Fixed: Element inspector bugs
  • Fixed: The plugin does not delete old custom stylesheet files
  • Fixed: Animations do not work in Chrome
  • Fixed: Gradient Generator bugs
  • Improvements to CSS Selectors
  • Improvements to Update API

6.0.1

  • New: breakpoints to Responsive Tool
  • New: Gradient Background Generator
  • New: Google fonts updated
  • Improvements to Responsive Tool
  • Improvements to visual selection
  • Improvements to Background Patterns
  • Fixed Animation Generator and Animation Manager bugs.
  • Fixed WooCommerce Shop page bug.

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

  • Release iniziale