-
Posts
63,866 -
Joined
-
Last visited
-
Days Won
511
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by tuanphan
-
How to change a single ad image for multiple pages at once?
tuanphan replied to T_R's topic in Images & Videos
(1) First, add this code to Website Tools (under Not Linked) > Code Injection > Footer <a href="https://google.com" target="_blank" class="image-ads"> <img src="https://cdn.pixabay.com/photo/2023/12/20/07/04/clouds-8459053_1280.jpg"/> </a> <!-- DO NOT ADJUST BELOW THIS LINE --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('.image-ads').appendTo('.code-block .image-ads'); }); </script> Change Google.com with your new url. Change Pixabay with your image url (2) Next, edit page where you want to place Ads Image > Add a Block > Choose Code > Paste this code <div class="image-ads"></div> -
Customize excerpt in eventlist and summary block
tuanphan replied to sihole's topic in Customize with code
Hi, You did this with custom code or? If code, can you send it? I think we can adjust it a bit -
Try this code to Website Tools (under Not Linked) > Code Injection > Footer <style> .portfolio-custom { padding: 0 3vw; } .portfolio-custom a { display: block; margin-bottom: 3vw; } .portfolio-custom a img { width: 100%; } .portfolio-custom a h3 { margin-top: 0; } @media screen and (min-width: 800px) { .portfolio-custom { display: none; } } @media screen and (max-width: 800px) { .portfolio-hover { display: none; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> window.onload = function () { if (Static.SQUARESPACE_CONTEXT.collectionId == "6543e9a51c290f167362e3bf"") { $portfolioHover = $(".portfolio-hover"); if ($portfolioHover.length > 0) { var images = []; $portfolioHover.find(".portfolio-hover-bg-img img").each(function () { images.push($(this).data("src")); }); $portfolioHover.parent().prepend('<div class="portfolio-custom">'); $portfolioHover.find(".portfolio-hover-item").each(function (i) { $(".portfolio-custom").append(` <a href="${$(this).attr("href")}"> <img src="${images[i]}" /> <h3>${$(this).text().trim()}</h3> </a> `); }); } } }; </script>
-
Scrolling text and different font and bold
tuanphan replied to Chef_Neall's topic in Customize with code
-
removed "burger" on phone view cant see "account"
tuanphan replied to Camichel's topic in Customize with code
You mean Move Login (user) icon to left of Header? Or Login text to left of header? -
Height of swipe arrows on customers review carrousel
tuanphan replied to leyogascope's topic in Customize with code
Use this code for mobile @media screen and (max-width:991px) { .user-items-list-item-container[data-section-id="6582d8ff86c8db2c2e5e0949"] { .desktop-arrows { display: flex !important; } .mobile-arrows { display: none !important; } }} -
It will require a lot of code, but I did a similar case a few months ago. You can see demo here: https://tuanphan.squarespace.com/burger-menu-2?noredirect pass: abc (you need to enter twice) First you need to add 2 Sections in Footer. Suppose it is section 3 (with 2 text blocks side by side) and section 4 (gallery section slideshow), then design your layout. Next, use this code to Website Tools (under Not Linked) > Custom CSS @media screen and (min-width:768px) { /* Fix footer invisible behind page content */ footer.sections { z-index: 9999999 !important; } /* change footer 2 sections to 100% height and 50% width */ footer.sections section:nth-child(3), footer.sections section:nth-child(4) { width: 50%; height: 100vh; position: fixed; z-index: 9999; left: 0; } footer.sections section:nth-child(3) { left: 0; } /* move footer section 4 to right 50% */ footer.sections section:nth-child(4) { left: 50%; right: 0; } /* disable scroll when burger menu is open */ .header-burger--open body { overflow: hidden; } /* effect on 2 sections when click burger menu */ body footer.sections section:nth-child(3), body footer.sections section:nth-child(4) { transition: transform 1.2s ease; top: 50px !important; } body footer.sections section:nth-child(3) { transform: translateY(-150%); transition: transform 0.75s ease; } body footer.sections section:nth-child(4) { transform: translateY(150%); transition: transform 0.75s ease; } body.header--menu-open footer.sections section:nth-child(3) { transform: translateY(-0%); transition: transform 0.75s ease; } body.header--menu-open footer.sections section:nth-child(4) { transform: translateY(0%); transition: transform 0.75s ease; } } Note: 50px in top: 50px !important; is space between 2 sections with bottom of header. You can adjust this value.
-
Try this code to Website Tools (under Not Linked) > Custom CSS div.grid-item img, img.ProductItem-gallery-slides-item-image { object-fit: contain !important; }
-
Split Product text in webshop in two colums
tuanphan replied to jacobtdb's topic in Customize with code
-
Use this CSS code body.homepage article section:first-child { padding: 0 !important; } body.homepage header#header { background-color: transparent !important; } body.homepage .gallery-fullscreen-slideshow { padding: 0px !important; }
-
Hi, Can you share link to this page?
-
Like this example? (under banner) https://www.gtmenabler.com/
-
Changing site icon to the left using CSS
tuanphan replied to newsquaredesigner23's topic in Customize with code
- 1 reply
-
- css
- navigation
-
(and 1 more)
Tagged with:
-
Delay block appearance after x seconds when page loads
tuanphan replied to elliottholt's topic in Customize with code
Which block are you referring to? I think we can use some JS code to achieve this. However if you need to make this work on Scroll, it will be more complex -
HELP! MOBILE VERSION OF THE SITE FOR ANDROID BROKEN
tuanphan replied to AlexandrulBless's topic in Customize with code
I think you solved? or which page do you have problems with? It looks fine on homepage -
Hi, What is site url?
-
If you want to make code run on mobile + tablet only, use this new code @media only screen and (max-width:1024px) { #grid { columns: 3; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .item { height: auto!important; } .item { position: relative!important; transform: none!important; width: 100%!important; display: block !important; padding: 0px!important; box-sizing: border-box; top: unset !important; } .item img { height: 100%!important; width: 100%!important; } }
- 4 replies
-
- flatiron-template
- custom-css
-
(and 3 more)
Tagged with:
-
how to built a vertical menu as a sidebar (and not as a header) ?
tuanphan replied to GregBd's topic in Customize with code
Can you share link to site? We can adjust easier -
How to disable site-wide animation on one (Portfolio) page only
tuanphan replied to aleclloyd's topic in Customize with code
Try this body#collection-65617b37d80eb03260094d87 * { transition-delay: unset !important; transition: unset !important; }- 18 replies
-
- portfolio
- page-specific
-
(and 3 more)
Tagged with:
-
You can add this to Website Tools (under Not Linked) > Custom CSS to change logo to black on About Page body#collection-64e303b6b168986f38d831fa:not(.header--menu-open) header#header img { filter: invert(1); }
-
#1. #3. Use this CSS code div.accordion-block p a { border: none !important; text-decoration: none !important; background-image: None !important; margin-top: 50px !important; display: inline-block !important; } #2. Use this CSS code div#block-yui_3_17_2_1_1703965115767_14755 div.accordion-item__description>p:last-child { text-align: center; }
-
Coding Injection for Custom CCS Header
tuanphan replied to TheHippieChickieCo's topic in Customize with code
The site is private. You can follow this to know how to share url with password -
Try this code to Website Tools (under Not Linked) > Custom CSS button.btn.btn-dark.button-element { box-shadow: -2px 2px 2px rgba(0,0,0,.4) !important; color: #fff !important; } button.btn.btn-dark.button-element p { color: #fff !important; letter-spacing: -2px !important; font-size: 30px !important; font-weight: 600 !important; text-transform: uppercase !important; } button.btn.btn-dark.button-element:hover:after{ animation: flash 1s forwards; } @keyframes flash { 100% { transform: rotatez(110deg) translate(10em,-200em); }}
- 5 replies
-
- integration
- css
-
(and 2 more)
Tagged with: