Blog

Elementor Variable Font Widget

User <style> @font-face { src: url('https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2'); font-family:'Compressa VF'; font-style: normal; } .fit-container h1 { font-family:'Compressa VF'; text-rendering: optimizeSpeed; /* width: 100%;*/ user-select: none; line-height: 0.8em; margin: 0 auto; text-transform: uppercase; font-weight: 100; text-align: center; /* width: 100vw;*/ } .fit-container h1 span { transform: translateY(-10px); user-select: none; font-family:'Compressa VF'; } .fit-container h1.flex { display: flex; justify-content: […]

Scope JS for Widgets

User <style> @font-face { src: url('https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2'); font-family:'Compressa VF'; font-style: normal; } .fit-container h1 { font-family:'Compressa VF'; text-rendering: optimizeSpeed; /* width: 100%;*/ user-select: none; line-height: 0.8em; margin: 0 auto; text-transform: uppercase; font-weight: 100; text-align: center; /* width: 100vw;*/ } .fit-container h1 span { transform: translateY(-10px); user-select: none; font-family:'Compressa VF'; } .fit-container h1.flex { display: flex; justify-content: […]

Disable Font Family Selector

User <style> @font-face { src: url('https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2'); font-family:'Compressa VF'; font-style: normal; } .fit-container h1 { font-family:'Compressa VF'; text-rendering: optimizeSpeed; /* width: 100%;*/ user-select: none; line-height: 0.8em; margin: 0 auto; text-transform: uppercase; font-weight: 100; text-align: center; /* width: 100vw;*/ } .fit-container h1 span { transform: translateY(-10px); user-select: none; font-family:'Compressa VF'; } .fit-container h1.flex { display: flex; justify-content: […]

JS Font Animation Fix

User <script> (function($) { $(document).ready(function () { var maxDist; var mouse = { x: 0, y: 0 }; var cursor = { x: window.innerWidth, y: window.innerHeight }; Math.dist = function(a, b) { var dx = b.x – a.x; var dy = b.y – a.y; return Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2)); } window.addEventListener("mousemove", function(e) { cursor.x = […]

Add Marquee in Vue

User add morqueu in vuew Assistant It looks like you're asking how to add a **marquee effect** in a **Vue.js** application (like scrolling text or images horizontally). Here's how you can do it: — ### ✅ Option 1: Use a Simple CSS Animation (No library) **1. Component template:** <template> <div class="marquee-wrapper"> <div class="marquee"> <span>🚀 Welcome […]

Vuetify Carousel Link Issue

User in vuetify carsoul link not working Assistant If the **link inside a Vuetify carousel** (like a button or anchor tag) isn’t working — for example, it's not clickable or doesn't navigate — there are a few common reasons this can happen. Let’s troubleshoot it step by step. ### 🔍 1. **Carousel Slide Content Might […]

Carousel Button Not Working

User {{ item.title }} {{ item.description }} btn link not working in vuetify cairsoul Assistant If your “ link inside the Vuetify “ isn't working, it's usually due to **“ using `display: flex; overflow: hidden`**, which can cause issues with clickable elements like buttons or links. ### ✅ Quick Fix Add the `eager` prop to […]

Vue to Laravel Inertia

User convert standalone vue js to laravel interia js vue Assistant To convert a standalone Vue.js app into a Laravel + Inertia.js + Vue setup, you’ll need to integrate your Vue components into Laravel’s Inertia flow. Here's a step-by-step guide to help you migrate: — ### ✅ 1. **Setup Laravel with Inertia and Vue** If […]

Yarn dependencies conversion

User convert all of this "dependencies": { "@mdi/font": "^7.4.47", "@vueup/vue-quill": "^1.2.0", "apexcharts": "^4.5.0", "axios": "^1.8.1", "firebase": "^11.4.0", "firebase-admin": "^13.2.0", "nprogress": "^0.2.0", "pinia": "^3.0.1", "vee-validate": "^4.15.0", "vue": "^3.5.13", "vue-router": "^4.5.0", "vue-tabler-icons": "^2.21.0", "vue3-apexcharts": "^1.8.0", "vue3-perfect-scrollbar": "^2.0.0", "vue3-print-nb": "^0.1.4", "vuetify": "^3.7.15" }, to yarn command Assistant Here’s how you can convert your `dependencies` block into a single […]

Enqueue Google Fonts WP

User register this via enqueue wordpress Assistant To register and enqueue the Google Fonts (Poppins) in WordPress using `wp_enqueue_style`, you can add the following code to your theme’s `functions.php` file (or inside your custom plugin or enqueue file): function custom_enqueue_google_fonts() { // Preconnect for faster font loading echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "n"; echo '<link […]