-
Posts
63,790 -
Joined
-
Last visited
-
Days Won
511
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by tuanphan
-
replace carousel arrow buttons with text prev and next
tuanphan replied to moonlitdesign's topic in Customize with code
I added code here- 1 reply
-
- carousel
- list-summary
-
(and 3 more)
Tagged with:
-
Hi, I see you figured it out? It already fit on both desktop and mobile
-
Hi, I see you figured it out? It already fit on both desktop and mobile
-
Use this CSS code body#collection-65f827daabf60f41a0c14da8 { figure[class*="gallery"]:not(.gallery-slideshow-item):not(.gallery-lightbox-item) { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ div[class*="-item-wrapper"]:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; pointer-events: none; } figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; }}
-
Actually if you want to do this when users click on these buttons >> Show corresponding content under? I can give the quick guide
-
Adding a link to images in a services block
tuanphan replied to ILong's topic in Fonts, colors and images
-
I have this quick guide to make video clickable, you try following it and let me know. https://summaryblock.com/video-clickable/
- 3 replies
-
- video
- code-injection
-
(and 1 more)
Tagged with:
-
-
Hi, Can you provide site url + screenshot of problem? We can imagine your problem easier
-
You can share link to this product, we can check and help you easier
-
You can share link to portfolio page you want orange background, we can use CSS code to do this
-
If you share site url + font file, I think we can use CSS font face code to achieve this
-
How to change sizing and padding of buttons on mobile view
tuanphan replied to amandabritz6's topic in Customize with code
If you share link to this page, we can check easier -
You try this code to Website > Website Tools > Code Injection > Footer <script> (function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } })(() => { if (window.location == window.parent.location) { const reelControls = document.querySelectorAll('.gallery-reel-control [data-next]'); reelControls.forEach(reelControl => { (function reelTimer() { setTimeout(() => { reelControl.click(); reelTimer(); }, 2000); // change this value to change the speed })(); }) } }); </script>
-
Create page loading/page transition effect
tuanphan replied to KhanhLy174's topic in Customize with code
You can use script code under your code <script> // Check if the animation state is stored in sessionStorage const isAnimationPlayed = sessionStorage.getItem("animationPlayed"); // Reference to the splash-wrapper div with a specified ID const splashWrapper = document.getElementById("loader-container"); // If the animation has already played, hide it and remove it from the DOM if (isAnimationPlayed) { splashWrapper.style.display = "none"; splashWrapper.remove(); // Remove the splash wrapper from the DOM } else { // If the animation hasn't played yet, mark it as played and store it in sessionStorage sessionStorage.setItem("animationPlayed", "true"); } </script> -
Try this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('section.ProductItem-additional+section').insertBefore('.ProductItem-additional>.sqs-layout'); }) </script> <style> .ProductItem .ProductItem-additional { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5px 5px; } .ProductItem .ProductItem-related-label { margin-top: 0px; } </style>
-
How to add header above videos on a video page
tuanphan replied to DanielKor's topic in Customize with code
-
Try this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(function(){ var visibleTop = 800; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= visibleTop ) { $('header#header').addClass('test-something'); } else { $('header#header').removeClass('test-something'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); </script> <style> header#header { background-color: transparent !important; } header#header.test-something { background-color: #000 !important; } </style>
- 3 replies
-
- navigation
- heading
-
(and 1 more)
Tagged with:
-
Adjust the position of the site header layout using CSS code.
tuanphan replied to PANNN's topic in Customize with code
- 6 replies
-
- navigation-link
- social-links
-
(and 1 more)
Tagged with:
-
Can you share link to page where you use Spotify? We can check easier
-
Change the colour of a form block button within the cart
tuanphan replied to Toots's topic in Fonts, colors and images
How to open this Form popup? -
@FTWSGEM with logo try this code, replace Pixabay with your logo url .header-title-logo a:hover img { content: Url(https://cdn.pixabay.com/photo/2024/02/28/14/01/woman-8602128_1280.png); }
- 9 replies
-
- code
- navigation
-
(and 3 more)
Tagged with: