=== Simple Visual CSS Customizer === Contributors: appscreo Tags: css, customizer, code snippets, styles, frontend Requires at least: 5.0 Tested up to: 6.9 Requires PHP: 7.0 Stable tag: 1.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Generate, manage unlimited CSS snippets with visual customizer, file-based storage, and flexible loading options. == Description == ### 🎥 See It In Action [Watch our demonstration video](https://www.youtube.com/watch?v=waO2WUFMMLk) to see how quickly you can customize any element on your site. [youtube https://www.youtube.com/watch?v=waO2WUFMMLk] ### 👁️ Live Visual CSS Customizer * **One-Click Activation**: Start customizing any page by clicking the "CSS Customize" entry in the top admin bar when viewing your site's frontend. * **Point, Click, Style**: Click any element on your page to instantly select it for styling—no code inspection needed. * **Real-Time Visual Controls**: Adjust fonts, colors, backgrounds, borders, shadows, transitions, and hover states with an intuitive control panel. See changes as you make them. * **Automatic Code Generation**: Every visual change generates clean, optimized CSS code that's saved directly to a snippet. No guessing, no copying and pasting. * **Risk-Free Experimentation**: Preview changes in real-time without affecting your live site. Only when you're satisfied and click "Save" do changes become permanent. ### ⚡ Advanced Snippet Management * **Unlimited CSS Snippets**: Add as many CSS snippets as you need for different site sections, components, or functions. * **File-Based Storage**: All CSS is saved as external `.css` files in `/wp-content/uploads/simple-custom-code/`, preventing database bloat and improving site performance through browser caching. * **Granular Control Per Snippet**: * **Active/Inactive Toggle**: Enable or disable snippets with one click from the main snippets list. * **Loading Method**: Choose **External File** (better for caching and performance) or **Internal Inline** code (faster rendering for critical styles). * **Code Position**: Load in the site's `` section or before the closing `` tag based on your performance needs. * **Execution Priority**: Set load order (1-15) for conflict-free styling when using multiple snippets. * **Custom File Names**: Rename external CSS files for better organization and debugging. ### 🔧 Smart Plugin Settings & Configuration * **Role-Based Access Control**: Restrict plugin access to specific user roles (Administrator, Editor, etc.). * **Cache-Busting File Versions**: Append version numbers to CSS files to ensure browsers load the latest version when snippets change. * **Clean Interface**: Simple, intuitive settings organized for quick configuration. ### 🎯 Perfect For: * **Web Developers** who need precise control over site styling without touching theme files * **Site Owners** who want to make visual tweaks without hiring a developer * **Designers** who prefer visual tools over writing code * **Agency Developers** managing multiple client sites with custom styling needs * **WordPress Beginners** learning CSS through AI assistance and visual feedback ### Upgrade to Simple Custom Code – Free & More Powerful! The **Simple CSS Visual Customizer** plugin has an upgrade path that seamlessly transitions your customizations to the more powerful **Simple Custom Code** plugin — completely **free**! Simply install and activate [Simple Custom Code](https://simplecustomcode.com/visual-css-customizer-upgrade/?utm_source=WP.org&utm_medium=wp.org+Description&utm_campaign=Upgrade+to+Simple+Custom+Code+Free), and your existing CSS will migrate automatically with no data loss or manual work required. Once migrated, deactivate the old plugin. **What you'll gain in the free version of Simple Custom Code:** - Unlimited JavaScript and HTML snippets (in addition to CSS) - More loading locations: Frontend, Backend (wp-admin), Login page, Block Editor - Real-time code **autocomplete** for CSS, JS & HTML + WordPress hooks - Built-in **code beautifier** for instant formatting - Syntax highlighting and improved editor experience - Code warnings/error detection to catch issues early - Access control by WordPress user roles - AI-powered code generation (using your own ChatGPT/OpenAI API key) — describe what you want in plain English and get ready-to-use CSS/JS/HTML For developers and advanced users, the optional **Pro** upgrade unlocks even more: - Conditional loading (target specific pages, URLs, or conditions) - Manual loading via hooks, filters, or shortcodes - Automatic minification, SCSS/LESS compilation, and snippet caching - Optimized external file loading and more performance features - Priority support [Learn More About Upgrade](https://simplecustomcode.com/visual-css-customizer-upgrade/?utm_source=WP.org&utm_medium=wp.org+Description&utm_campaign=Upgrade+to+Simple+Custom+Code+Free) Your custom styles stay safe, and you get a much more capable toolset — all without paying a cent for the core enhancements! == Screenshots == 1. Modifying CSS Snippet 2. CSS Snippet List 3. Visual CSS Customizer == Installation == ### Method 1: WordPress Dashboard (Recommended) 1. Navigate to **Plugins → Add New** in your WordPress admin 2. Click the **Upload Plugin** button at the top of the page 3. Choose the `appscreo-visual-css-customizer.zip` file from your computer 4. Click **Install Now** and wait for the installation to complete 5. Click **Activate Plugin** ### Method 2: Manual FTP Upload 1. Unzip the `appscreo-visual-css-customizer.zip` file to your computer 2. Upload the `appscreo-visual-css-customizer` folder to `/wp-content/plugins/` on your server 3. Navigate to **Plugins** in your WordPress admin dashboard 4. Find "Simple Visual CSS Customizer" in the plugin list and click **Activate** ### First-Time Setup 1. After activation, you'll see a **CSS Modifications** menu item in your WordPress admin 2. Click **CSS Modifications→ Add New** to create your first snippet 3. Visit any page on your site's frontend and click the **CSS Customize** button in the admin toolbar to launch the visual customizer or start directly from the snippet. == Frequently Asked Questions == ### Can I use the Visual Customizer on any theme? The customizer works on most modern, well-coded themes. It may have limited functionality on themes that: - Heavily rely on JavaScript for rendering their layout - Use excessive iframes or shadow DOM elements - Have complex, non-standard DOM structures For best results, we recommend using it with block themes (WordPress 5.9+) or classic themes with standard HTML structure. ### Is it safe to use on a live site? Absolutely! You have full control: 1. Create and test snippets while they are set to **"Inactive"** 2. The visual customizer shows a live preview, but changes are only saved when you explicitly click **"Save Snippet"** 3. Even after saving, snippets won't affect your live site until you change their status to **"Active"** 4. You can use URL conditions to test snippets on specific pages before applying site-wide ### Can I use this alongside other CSS plugins? Yes, but be mindful of potential conflicts. Simple Visual CSS Customizer loads after most theme styles but before other plugins. Use the **Priority** setting to adjust load order if needed. == Changelog == ### 1.0 (Current Release) * Initial public release of Simple Visual CSS Customizer * Live visual front-end customizer with "CSS Customize" admin bar entry * File-based CSS storage system to prevent database bloat * Advanced snippet controls: loading positions, URL conditions, priorities * Complete settings panel with role-based access control