Jump to content

tuanphan

Circle Member
  • Posts

    63,866
  • Joined

  • Last visited

  • Days Won

    511

Everything posted by tuanphan

  1. (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>
  2. Hi, You did this with custom code or? If code, can you send it? I think we can adjust it a bit
  3. 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>
  4. We can bold each item like this but can't bold specific word of item
  5. You mean Move Login (user) icon to left of Header? Or Login text to left of header?
  6. 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; } }}
  7. 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.
  8. 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; }
  9. 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; }
  10. Like this example? (under banner) https://www.gtmenabler.com/
  11. 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
  12. I think you solved? or which page do you have problems with? It looks fine on homepage
  13. 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; } }
  14. Try this body#collection-65617b37d80eb03260094d87 * { transition-delay: unset !important; transition: unset !important; }
  15. 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); }
  16. #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; }
  17. The site is private. You can follow this to know how to share url with password
  18. 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); }}
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.