|
| 1 | +# :rocket: Hyvä Inline CSS Power Toy for Magento 2 by [JaJuMa](https://www.jajuma.de/) |
| 2 | + |
| 3 | +<img align="right" width="35%" height="auto" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/JaJuMa-Hyva-Inline-CSS-Power-Toy-For-Magento-2-small.png"> |
| 4 | + |
| 5 | +Hyvä Inline CSS Power Toy for Magento 2 by [JaJuMa](https://www.jajuma.de/en) is a dashboard toy |
| 6 | +showing the inline CSS & cache status as well as processing times in your Magento store. |
| 7 | +Same as the [Hyvä Inline CSS](https://www.jajuma.de/en/jajuma-develop/extensions/inline-css-for-hyva-themes-magento-extension) debug tool, but even without enabling the debug mode. |
| 8 | + |
| 9 | +Compatible with |
| 10 | + |
| 11 | +<div align="left"> |
| 12 | + <table > |
| 13 | + <tr> |
| 14 | + <td><b>Hyvä Themes</b></td> |
| 15 | + <td><b>Mage-OS</b></td> |
| 16 | + <td><b>Magento</b></td> |
| 17 | + </tr> |
| 18 | + </tr> |
| 19 | + <td><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"><img align="left" width="80" src="https://www.jajuma.de/media/wysiwyg/jajuma-shop/magento-with-hyva/JaJuMa-Hyvanaut-small.png"></a></td> |
| 20 | + <td><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes"><img align="left" width="80" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/Mage-OS-Compatible.svg"></a></td> |
| 21 | + <td><a href="https://www.jajuma.de/en/jajuma-shop"><img align="left" height="60" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/magento-icon.svg"></a></td> |
| 22 | + </tr> |
| 23 | + </table> |
| 24 | +</div> |
| 25 | + |
| 26 | +## Features |
| 27 | + |
| 28 | +This Dashboard Toy shows/provides: |
| 29 | +* If Inline CSS was added or not |
| 30 | +* If page load was a full page cache HIT or MISS |
| 31 | +* Time spent for adding/processing Inline CSS |
| 32 | +* Size of Inline CSS added (gzipped) |
| 33 | +* Option to flush full page cache |
| 34 | +* Option to flush Inline CSS cache |
| 35 | + (Note: This toy only shows in frontend) |
| 36 | + |
| 37 | +## Screenshots |
| 38 | + |
| 39 | +<td> |
| 40 | + <table> |
| 41 | + <tr> |
| 42 | + <td><b>Hyvä Inline CSS Toy</b><br>Dark Mode</td> |
| 43 | + <td><b>Hyvä Inline CSS Toy</b><br>Light Mode</td> |
| 44 | + </tr> |
| 45 | + <tr> |
| 46 | + <td><img src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/screenshots/Magento-Hyva-Inline-CSS-Power-Toy-Dark.jpg"></td> |
| 47 | + <td><img src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/screenshots/Magento-Hyva-Inline-CSS-Power-Toy-Light.jpg"></td> |
| 48 | + </tr> |
| 49 | + </table> |
| 50 | +</td> |
| 51 | + |
| 52 | +## Requirements |
| 53 | + |
| 54 | +<div align="left"> |
| 55 | + <table> |
| 56 | + <tr> |
| 57 | + <td><img align="left" width="80" height="auto" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/JaJuMa-Power-Toys-For-Magento-2-small.png"></td> |
| 58 | + <td>:bangbang: This module requires <a href="https://github.com/JaJuMa-GmbH/power-toys">Power Toys for Magento 2</a><br>:bangbang: by <a href="https://www.jajuma.de/en/jajuma-develop/extensions/power-toys-for-magento-2">JaJuMa</a></td> |
| 59 | + </tr> |
| 60 | + </table> |
| 61 | +</div> |
| 62 | + |
| 63 | +* [Hyvä Inline CSS](https://www.jajuma.de/en/jajuma-develop/extensions/inline-css-for-hyva-themes-magento-extension) v1.0.0+ |
| 64 | +* Magento Power Toys v1.0.0+ |
| 65 | +* Magento v2.4.5+ OR |
| 66 | + Mage-OS v1.0.0+ |
| 67 | +* Magewire v1.10+ |
| 68 | +* Magewire-requirejs v1.1+ |
| 69 | + |
| 70 | +## Further Info, Extension Description & Manual |
| 71 | + |
| 72 | +* [Extension Website EN](https://www.jajuma.de/en/jajuma-develop/extensions/power-toys-for-magento-2) |
| 73 | +* [Extension Website DE](https://www.jajuma.de/de/jajuma-develop/extensions/power-toys-fuer-magento-2) |
| 74 | + |
| 75 | +## Demos |
| 76 | + |
| 77 | +* [Magento Power Toys Demo on Luma Theme](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2) |
| 78 | +* [Magento Power Toys Demo on Hyvä Theme](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes) |
| 79 | +* [Magento Power Toys Demo on Mage-OS](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes) |
| 80 | + |
| 81 | +## Installation |
| 82 | + |
| 83 | +Install via composer as any other Magento extension from Github: |
| 84 | +``` |
| 85 | +composer require jajuma/pot-hyva-inline-css |
| 86 | +``` |
| 87 | + |
| 88 | +## Using Hyvä Inline CSS Power Toy For Magento |
| 89 | + |
| 90 | +After installing this module: |
| 91 | +Go to |
| 92 | +**JaJuMa -> Power Toys -> Configuration** |
| 93 | +and enable & configure Hyvä Inline CSS Toy. |
| 94 | + |
| 95 | +After enabling, see the floating button at left/right edge of your screen |
| 96 | +in your Frontend (while logged in as Admin). |
| 97 | +When click on this button, the Power Toys Panel will open |
| 98 | +displaying the Hyvä Inline CSS Toy. |
| 99 | +(Note: This toy only shows in frontend) |
| 100 | + |
| 101 | +* [See Manual for more details](https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-magento/manuals/JaJuMa_Hyva_Inline_CSS_Power_Toy_Manual_v001.pdf) |
| 102 | + |
| 103 | + |
| 104 | +## License |
| 105 | + |
| 106 | +The code is licensed under the [MIT License (MIT)](https://github.com/JaJuMa/pot-hyva-inline-css/blob/master/LICENSE) |
| 107 | + |
| 108 | +## :heart: Powered by |
| 109 | + |
| 110 | +Developing the Power Toys module and the toys was a lot easier and more fun thanks to [Magewire](https://github.com/magewirephp/magewire). |
| 111 | +A big shout and Thank You to [Willem Poortman](https://github.com/wpoortman) for creating Magewire |
| 112 | + |
| 113 | +## Other [Magento 2 Extensions](ttps://www.jajuma.de/en/jajuma-develop/magento-extensions) by [JaJuMa](https://www.jajuma.de/) |
| 114 | + |
| 115 | +* :framed_picture: Performance & UX:<br>[Ultimate Image Optimizer for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/ultimate-image-optimizer-extension-for-magento-2)<br> |
| 116 | + AVIF & WebP Images, Lazy Loading, High-Resolution / Retina images |
| 117 | + |
| 118 | +* :framed_picture: Performance & UX:<br>[WebP Optimized Images for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/webp-optimized-images-extension-for-magento-2#portfolio-content)<br> |
| 119 | + The #1 WebP Images Solution for Magento 2 |
| 120 | + |
| 121 | +* :see_no_evil: SEO:<br>[PRG Pattern Link Masking for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/prg-pattern-link-masking-for-magento-2)<br> |
| 122 | + Link Masking for Layered Navigation |
| 123 | + |
| 124 | +* :cop: User Experience:<br>[Shariff Social Share for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/shariff-social-share-buttons-extension-for-magento-2)<br> |
| 125 | + GDPR compliant and customizable Sharing Buttons |
| 126 | + |
| 127 | +* :movie_camera: Content Management:<br>[Video Widget for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/video-widget-gdpr-extension-for-magento-2)<br> |
| 128 | + Embedding YouTube videos, GDPR compliant with auto preview image & fully responsive |
| 129 | + |
| 130 | +* :rocket: Performance & UX:<br>[Page Preload for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/page-preload-extension-for-magento-2)<br> |
| 131 | + Faster page transitions and subsequent page-loads by preloading / prefetching |
| 132 | + |
| 133 | +* :chart_with_upwards_trend: Marketing:<br>[Matomo Analytics for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/honey-spam-anti-spam-extension-for-magento-2)<br> |
| 134 | + Web Analytics - GDPR Compliant |
| 135 | + |
| 136 | +* :honey_pot: Site Optimization:<br>[Honey Spam Anti-Spam for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/honey-spam-anti-spam-extension-for-magento-2)<br> |
| 137 | + Spam Protection - Reliable & GDPR Compliant |
| 138 | + |
| 139 | +* :bell: Marketing:<br>[Customer Registration Reminder & Cleanup for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/customer-registration-reminder-and-cleanup-extension-for-magento-2)<br> |
| 140 | + Increase Your Customer Engangement & Cleanup your Customer Account Data Automatically |
| 141 | + |
| 142 | +* :mega: UX & Marketing:<br>[Category Grid Callouts for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/category-grid-callouts-extension-for-magento-2)<br> |
| 143 | + Enrich Your Category Grids With Eye-Catching Callouts |
| 144 | + |
| 145 | +* :thought_balloon: UX & Marketing:<br>[Customer Satisfaction Feedback for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/category-grid-callouts-extension-for-magento-2)<br> |
| 146 | + Collect Valuable Feedback From Your Customers & Understand How To Satisfy Your Customers |
| 147 | + |
| 148 | +* :sparkler: UX:<br>[Auto Select Options for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/auto-select-options-extension-for-magento-2)<br> |
| 149 | + Automatically Select Configurable & Custom Options Based On Your Customer's Preferences |
| 150 | + |
| 151 | +* :left_right_arrow: UX & Performance:<br>[Back Forward Cache - bfcache for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/back-forward-cache-extension-for-magento-2)<br> |
| 152 | + Enable bfcache for Magento 2 for improved UX & Core Web Vitals |
| 153 | + |
| 154 | +* :heavy_division_sign: Accounting:<br>[Dynamic Shipping Tax Plus for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/proportional-pro-rata-dynamic-shipping-tax-plus-extension-for-magento-2)<br> |
| 155 | + Dynamic Shipping Tax Calculation incl. pro-rata/proportional tax rates |
| 156 | + |
| 157 | +* :mag: Search:<br>[MySQL Search for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/magento-without-elasticsearch-mysql-search-extension-for-magento-2)<br> |
| 158 | + MySQL Search for Magento 2 without Elasticsearch |
| 159 | + |
| 160 | +* :bangbang: Performance:<br>[Preload Critical Resources & Assets](https://www.jajuma.de/en/jajuma-develop/extensions/resource-hints-preload-critical-resources-assets-extension-for-magento-2)<br> |
| 161 | + Resource Hints for preloading important and critical resources |
| 162 | + |
| 163 | +* :octocat: Content Management:<br>[git 4 Page Builder](https://www.jajuma.de/en/jajuma-develop/extensions/git-4-page-builder-extension-for-magento-2)<br> |
| 164 | + Manage & deploy Magento 2 Page Builder content via git |
| 165 | + |
| 166 | +* :rocket: Performance:<br>[Hyvä Inline CSS](https://www.jajuma.de/en/jajuma-develop/extensions/hyva-inline-css-extension-for-magento-with-hyva-themes)<br> |
| 167 | + Run Magento 2 without CSS file by inline all CSS |
| 168 | + |
| 169 | +* :man_technologist: :free: Content Management:<br>[Syntax Highlighter 4 Page Builder](https://www.jajuma.de/en/jajuma-develop/extensions/syntax-highlighter-4-page-builder-extension-for-magento-2)<br> |
| 170 | + Syntax Highlighting and more for Magento 2 Page Builder |
| 171 | + |
| 172 | +* :triangular_flag_on_post: :free: UI & UX:<br>[Awesome Hyvä for Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/extensions/font-awesome-icons-for-hyva-themes-extension)<br> |
| 173 | + Font Awesome 5 & 6 Icons for your [Hyvä Themes](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Store |
| 174 | + |
| 175 | +* :triangular_flag_on_post: :free: UI & UX:<br>[Hyvä Flags for Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/extensions/country-language-flag-icons-for-hyva-themes-extension)<br> |
| 176 | + Country & Language Flag Icons for your [Hyvä Themes](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Store |
| 177 | + |
| 178 | +* :ok_man: :free: User Experience:<br>[Customer Navigation Manager for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/customer-navigation-manager-extension-for-magento-2)<br> |
| 179 | + Easily manage the links in your Customer Account |
| 180 | + |
| 181 | +* :heavy_division_sign: :free: Accounting:<br>[Dynamic Shipping Tax for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/dynamic-shipping-tax-extension-for-magento-2)<br> |
| 182 | + Dynamic Shipping Tax Calculation |
| 183 | + |
| 184 | +* :question: :free: Content:<br>[Hyvä FAQ Widget for Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/extensions/dynamic-shipping-tax-extension-for-magento-2)<br> |
| 185 | + FAQ Widget for your [Hyvä Themes](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Store |
| 186 | + |
| 187 | +## Other [Services](https://www.jajuma.de/en/jajuma/company-magento-ecommerce-agency-stuttgart) by [JaJuMa](https://www.jajuma.de/) |
| 188 | + |
| 189 | +* :shopping: [JaJuMa-Market: Marketplace Software](https://www.jajuma.de/en/jajuma-market)<br> |
| 190 | + Complete Online Marketplace Software Solution. For Professional Demands. Feature Rich. Flexibly Customizable. |
| 191 | + |
| 192 | +* :shopping_cart: [JaJuMa-Shop](https://www.jajuma.de/en/jajuma-shop)<br> |
| 193 | + Customized Magento Shop Solutions. |
| 194 | + |
| 195 | +* :rocket: [JaJuMa-Shop: Hyvä Magento Shop Development](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes)<br> |
| 196 | + Hyvä Magento Shop Development. |
| 197 | + |
| 198 | +* :orange_book: [JaJuMa-Shop: Magento Handbuch in Deutsch](https://www.jajuma.de/de/jajuma-shop/magento-2-handbuch/)<br> |
| 199 | + Magento Handbuch in Deutsch. |
| 200 | + |
| 201 | +* :card_index_dividers: [JaJuMa-PIM](https://www.jajuma.de/en/jajuma-pim)<br> |
| 202 | + Product Information Management. Simple. Better. |
| 203 | + |
| 204 | +* :heavy_plus_sign: [JaJuMa-Develop: Magento 2 Extensions](https://www.jajuma.de/en/jajuma-develop/magento-extensions)<br> |
| 205 | + Individual Solutions For Your Business Case. |
| 206 | + |
| 207 | +* :paintbrush: [JaJuMa-Design](https://www.jajuma.de/en/jajuma-design)<br> |
| 208 | + Designs That Inspire. |
| 209 | + |
| 210 | +* :necktie: [JaJuMa-Consult](https://www.jajuma.de/en/jajuma-consult)<br> |
| 211 | + We Show You New Perspectives. |
| 212 | + |
| 213 | +© JaJuMa GmbH | [www.jajuma.de](www.jajuma.de) |
0 commit comments