{"id":263784,"date":"2025-11-25T15:17:45","date_gmt":"2025-11-25T15:17:45","guid":{"rendered":"https:\/\/it.wordpress.org\/plugins\/codingbunny-css-inspector\/"},"modified":"2025-11-28T08:35:40","modified_gmt":"2025-11-28T08:35:40","slug":"coding-bunny-css-inspector","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/coding-bunny-css-inspector\/","author":23187711,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.2","stable_tag":"1.0.2","tested":"6.9.4","requires":"6.0","requires_php":"8.0","requires_plugins":null,"header_name":"CodingBunny CSS Inspector","header_author":"CodingBunny","header_description":"A lightweight inspector to view and copy CSS directly from the WordPress frontend.","assets_banners_color":"e0d7cc","last_updated":"2025-11-28 08:35:40","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/coding-bunny.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":204,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"codingbunny","date":"2025-11-25 15:17:34"},"1.0.1":{"tag":"1.0.1","author":"codingbunny","date":"2025-11-26 16:57:25"},"1.0.2":{"tag":"1.0.2","author":"codingbunny","date":"2025-11-28 08:35:40"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3403578,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3402647,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3402647,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.0.2"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3402647,"resolution":"1","location":"assets","locale":""}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[356,167025,2250,34796,3972],"plugin_category":[59],"plugin_contributors":[237669],"plugin_business_model":[],"class_list":["post-263784","plugin","type-plugin","status-publish","hentry","plugin_tags-css","plugin_tags-devtools","plugin_tags-frontend","plugin_tags-inspector","plugin_tags-tools","plugin_category-utilities-and-tools","plugin_contributors-codingbunny","plugin_committers-codingbunny"],"banners":{"banner":"https:\/\/ps.w.org\/coding-bunny-css-inspector\/assets\/banner-772x250.png?rev=3402647","banner_2x":"https:\/\/ps.w.org\/coding-bunny-css-inspector\/assets\/banner-1544x500.png?rev=3402647","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/coding-bunny-css-inspector\/assets\/icon-256x256.png?rev=3403578","icon_2x":"https:\/\/ps.w.org\/coding-bunny-css-inspector\/assets\/icon-256x256.png?rev=3403578","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/coding-bunny-css-inspector\/assets\/screenshot-1.png?rev=3402647","caption":""}],"raw_content":"<!--section=description-->\n<p>CodingBunny CSS Inspector adds a clean, DevTools-style sidebar to your WordPress frontend, letting administrators visually inspect any element and copy its CSS with a single click.\nPerfect for theme customization, debugging, and quick styling adjustments\u2014without ever opening the browser DevTools.<\/p>\n\n<p>The inspector displays full CSS blocks, selector paths, HEX color values, used CSS variables, and ready-to-copy pseudo-state styles like :hover, :focus, and :active.<\/p>\n\n<p>Designed for power and simplicity, and visible only to logged-in administrators.<\/p>\n\n<h4>Features<\/h4>\n\n<p>DevTools-like inspection sidebar, launched from the admin bar<\/p>\n\n<p>Full CSS block viewer for any element (full or simplified selector paths)<\/p>\n\n<p>Ready-to-copy pseudo-state blocks: :hover, :focus, :active<\/p>\n\n<p>Automatic extraction of all CSS variables used by the selected element<\/p>\n\n<p>Copy-to-clipboard buttons with instant visual feedback<\/p>\n\n<p>Lightweight and unobtrusive\u2014runs only for authenticated admins<\/p>\n\n<p>Never loads for visitors or on the WordPress dashboard<\/p>\n\n<h4>Installation<\/h4>\n\n<p>Download codingbunny-css-inspector.zip<\/p>\n\n<p>Unzip the file<\/p>\n\n<p>Upload the codingbunny-css-inspector folder to \/wp-content\/plugins\/<\/p>\n\n<p>Activate CodingBunny CSS Inspector from the Plugins screen<\/p>\n\n<h3>Usage<\/h3>\n\n<p>Click \u201cCSS Inspector\u201d in the WordPress admin bar (frontend only)<\/p>\n\n<p>Hover any element to preview its CSS in the sidebar<\/p>\n\n<p>Click to lock the selection; press ESC to unlock or click \u2715 to close<\/p>\n\n<p>Toggle between full or compact selector paths<\/p>\n\n<p>Use the copy buttons to instantly copy selectors and CSS blocks (with green confirmation)<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id='who%20can%20access%20the%20inspector%3F'><h3>Who can access the inspector?<\/h3><\/dt>\n<dd><p>Only logged-in administrators can use the inspector.<\/p><\/dd>\n<dt id='does%20it%20load%20in%20the%20wordpress%20admin%20dashboard%3F'><h3>Does it load in the WordPress admin dashboard?<\/h3><\/dt>\n<dd><p>No, it works exclusively on frontend pages.<\/p><\/dd>\n<dt id='will%20visitors%20ever%20see%20it%3F'><h3>Will visitors ever see it?<\/h3><\/dt>\n<dd><p>Never. The inspector and its scripts load only for authenticated administrators.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.2 \u2013 11\/28\/2025<\/h4>\n\n<p>Improvement: Added the ability to resize the width of the sidebar.\nFIX: Correct color preview in pseudo-classes.<\/p>\n\n<h4>1.0.1 \u2013 11\/26\/2025<\/h4>\n\n<p>Improvement: Improved sidebar structure\nImprovement: Improved CSS coding<\/p>\n\n<h4>1.0.0 \u2013 11\/21\/2025<\/h4>\n\n<ul>\n<li>New: Initial Release<\/li>\n<\/ul>","raw_excerpt":"Inspect and copy the CSS of your site\u2019s elements directly from the frontend\u2014fast, simple, and DevTools-inspired.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/263784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=263784"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/codingbunny"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=263784"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=263784"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=263784"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=263784"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=263784"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=263784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}