{"id":376753,"date":"2026-09-30T14:17:14","date_gmt":"2026-09-30T14:17:14","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/vivido-callout-boxes-colored-notes-dividers\/"},"modified":"2026-09-30T14:24:32","modified_gmt":"2026-09-30T14:24:32","slug":"vivido","status":"publish","type":"plugin","link":"https:\/\/sk.wordpress.org\/plugins\/vivido\/","author":23575140,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.4.1","stable_tag":"1.4.1","tested":"7.1.2","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"Vivido \u2013 Callout Boxes, Colored Notes & Dividers","header_author":"Infyon","header_description":"Clean alert boxes, notes, colored dividers, code snippet copiers, and custom colored icon bullets for WordPress.","assets_banners_color":"cacab1","last_updated":"2026-09-30 14:24:32","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/infyon.com\/infyon","header_plugin_uri":"https:\/\/lekshya.com\/item\/vivido","header_author_uri":"https:\/\/infyon.com\/infyon","rating":0,"author_block_rating":0,"active_installs":0,"downloads":48,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.4.1":{"tag":"1.4.1","author":"infyon","date":"2026-09-30 14:24:32","revision":3721448}},"upgrade_notice":{"1.4.1":"<p>Upgrade to 1.4.1 for admin UI modularization, security escaping improvements, and compatibility with WordPress 7.1.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3721513,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3721513,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3721513,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3721513,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.4.1"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3721513,"resolution":"1","location":"assets","locale":"","width":1095,"height":775},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3721513,"resolution":"2","location":"assets","locale":"","width":1095,"height":814},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3721513,"resolution":"3","location":"assets","locale":"","width":1093,"height":815},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3721513,"resolution":"4","location":"assets","locale":"","width":1095,"height":746}},"screenshots":{"1":"Interactive Callout Box Generator with live preview.","2":"Colored Bullet List &amp; Badge Styler.","3":"Horizontal Divider &amp; Separator Designer.","4":"Code Placer Builder with One-Click Copy functionality.","5":"Front-end output example inside a blog post."}},"plugin_section":[],"plugin_tags":[217439,24363,283708,11430,51055],"plugin_category":[],"plugin_contributors":[283709],"plugin_business_model":[],"class_list":["post-376753","plugin","type-plugin","status-publish","hentry","plugin_tags-callout-box","plugin_tags-code-block","plugin_tags-colored-dividers","plugin_tags-icon-list","plugin_tags-info-box","plugin_contributors-infyon","plugin_committers-infyon"],"banners":{"banner":"https:\/\/ps.w.org\/vivido\/assets\/banner-772x250.png?rev=3721513","banner_2x":"https:\/\/ps.w.org\/vivido\/assets\/banner-1544x500.png?rev=3721513","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/vivido\/assets\/icon-128x128.png?rev=3721513","icon_2x":"https:\/\/ps.w.org\/vivido\/assets\/icon-256x256.png?rev=3721513","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/vivido\/assets\/screenshot-1.png?rev=3721513","caption":"Interactive Callout Box Generator with live preview."},{"src":"https:\/\/ps.w.org\/vivido\/assets\/screenshot-2.png?rev=3721513","caption":"Colored Bullet List &amp; Badge Styler."},{"src":"https:\/\/ps.w.org\/vivido\/assets\/screenshot-3.png?rev=3721513","caption":"Horizontal Divider &amp; Separator Designer."},{"src":"https:\/\/ps.w.org\/vivido\/assets\/screenshot-4.png?rev=3721513","caption":"Code Placer Builder with One-Click Copy functionality."}],"raw_content":"<!--section=description-->\n<p><strong>Vivido<\/strong> is a lightweight, zero-dependency WordPress plugin that helps you design eye-catching content callouts, alert boxes, colorful dividers, syntax placers, and colored icon list markers without touching complex CSS.<\/p>\n\n<p>Whether you run a technical blog, documentation hub, tutorial site, or lifestyle blog, Vivido makes your key takeaways, warnings, quotes, and code snippets scannable and visually engaging.<\/p>\n\n<h3>Why Use Vivido?<\/h3>\n\n<ul>\n<li><strong>Zero Bloat &amp; Zero Dependencies:<\/strong> Pure vanilla CSS and JavaScript. No bulky external frameworks or third-party fonts slowing down your page speed.<\/li>\n<li><strong>Interactive Admin Builders:<\/strong> Dedicated visual generators with live real-time previews for callouts, bullets, dividers, and code blocks.<\/li>\n<li><strong>WYSIWYG &amp; Block Ready:<\/strong> Use interactive shortcodes anywhere\u2014in Classic Editor, TinyMCE toolbars, Gutenberg Shortcode blocks, or page builders like Elementor.<\/li>\n<li><strong>1-Click Code Copier:<\/strong> Clean syntax blocks featuring automatic clipboard copying for commands, snippets, and scripts.<\/li>\n<\/ul>\n\n\n\n<h3>Core Features<\/h3>\n\n<ul>\n<li><p><strong>Clean Alert &amp; Notice Boxes (<code>[color_box]<\/code>):<\/strong><\/p>\n\n<ul>\n<li>One-click presets: Tip (Green), Info (Blue), Warning (Amber), and Danger (Red).<\/li>\n<li>Deep customization: Solid, dashed, dotted, or double border strokes.<\/li>\n<li>Border options: Full-frame box or minimalist left-accent quote bar.<\/li>\n<li>Rounded corner radius controls and optional Call-To-Action (CTA) buttons.<\/li>\n<\/ul><\/li>\n<li><p><strong>Minimalist Quote Notes (<code>[color_note]<\/code>):<\/strong><\/p>\n\n<ul>\n<li>Sleek, distraction-free notice banners with a 4px left-hand border accent.<\/li>\n<\/ul><\/li>\n<li><p><strong>Colored Horizontal Dividers (<code>[color_divider]<\/code>):<\/strong><\/p>\n\n<ul>\n<li>Custom stroke thickness (1px\u201310px) and line styles (solid, dashed, dotted).<\/li>\n<li>Width scaling (20% to 100%) and alignment controls (Left, Center, Right).<\/li>\n<\/ul><\/li>\n<li><p><strong>Colored Icon List Bullets (<code>[vivido_list]<\/code> &amp; <code>[vivido_item]<\/code>):<\/strong><\/p>\n\n<ul>\n<li>Replace ordinary bullet dots with expressive status icons: Checkmarks, Stars, Warning Triangles, Crosses, Pointers, and Colored Dots.<\/li>\n<li>4 Badge Styles: Flat glyph, Solid filled circle, Soft pastel tint (duotone), and Outlined frame.<\/li>\n<\/ul><\/li>\n<li><p><strong>Syntax Placer with Quick Copy (<code>[vivido_code]<\/code>):<\/strong><\/p>\n\n<ul>\n<li>Formatted code blocks with clean language labels (BASH, PHP, JS, Python, SQL, etc.).<\/li>\n<li>Native clipboard API copy button with instant \"Copied!\" visual feedback and fallback support.<\/li>\n<\/ul><\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>vivido<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory, or install the <code>vivido.zip<\/code> package directly via <strong>Plugins &gt; Add New &gt; Upload Plugin<\/strong>.<\/li>\n<li>Activate the plugin through the <strong>Plugins<\/strong> screen in WordPress.<\/li>\n<li>Access the interactive shortcode generators under <strong>Vivido<\/strong> in your WordPress admin menu.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20vivido%20slow%20down%20my%20website%3F\"><h3>Does Vivido slow down my website?<\/h3><\/dt>\n<dd><p>No. Vivido does not load external web fonts or large script libraries. All styles and scripts are lightweight vanilla assets under 10KB total.<\/p><\/dd>\n<dt id=\"can%20i%20use%20vivido%20with%20gutenberg%3F\"><h3>Can I use Vivido with Gutenberg?<\/h3><\/dt>\n<dd><p>Yes. You can paste generated shortcodes inside standard Gutenberg Shortcode or Paragraph blocks. A toolbar button is also provided for inline callout wrapping.<\/p><\/dd>\n<dt id=\"can%20i%20use%20custom%20hex%20colors%3F\"><h3>Can I use custom hex colors?<\/h3><\/dt>\n<dd><p>Yes. All shortcodes accept custom <code>#hex<\/code> color values for backgrounds, text, borders, dividers, and icon badges.<\/p><\/dd>\n<dt id=\"where%20can%20i%20get%20support%20or%20request%20features%3F\"><h3>Where can I get support or request features?<\/h3><\/dt>\n<dd><p>Visit <a href=\"https:\/\/infyon.com\/infyon\">Infyon.com\/infyon<\/a> or post on the WordPress.org support forum for Vivido.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.4.1<\/h4>\n\n<ul>\n<li>Enqueued admin generator styles and scripts via <code>admin_enqueue_scripts<\/code> to meet WordPress.org directory standards.<\/li>\n<li>Added <code>wp_kses_post<\/code> output sanitization across all shortcodes to prevent XSS vulnerabilities.<\/li>\n<li>Fixed list layout container margins to maintain proper post alignment across block themes.<\/li>\n<li>Enhanced clipboard copy engine with timer protection and textarea fallback for non-HTTPS contexts.<\/li>\n<li>Confirmed compatibility with WordPress 7.1.<\/li>\n<\/ul>\n\n<h4>1.4.0<\/h4>\n\n<ul>\n<li>Added dedicated visual builder for Horizontal Dividers (<code>vivido-dividers<\/code>).<\/li>\n<li>Added dedicated visual builder for Code Placers with live copy testing (<code>vivido-code-blocks<\/code>).<\/li>\n<\/ul>\n\n<h4>1.3.0<\/h4>\n\n<ul>\n<li>Added dedicated visual builder for Colored Bullet Lists (<code>vivido-bullets<\/code>).<\/li>\n<li>Added 4 distinct badge styles: Flat, Solid, Soft Tint, and Outlined.<\/li>\n<li>Improved hex-to-rgba converter for pastel list accents.<\/li>\n<\/ul>\n\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>Added dedicated top-level WordPress admin menu for Vivido.<\/li>\n<li>Added interactive Callout Box Generator with live preview.<\/li>\n<li>Added global settings for default border styles and corner radiuses.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Clean alert boxes, notes, colored dividers, code snippet copiers, and custom colored icon bullets for WordPress.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/376753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=376753"}],"author":[{"embeddable":true,"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/infyon"}],"wp:attachment":[{"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=376753"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=376753"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=376753"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=376753"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=376753"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=376753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}