Jump to content

kaydotjpg

Circle Member
 View Profile  See their activity

  • Posts

    221

  • Joined

  • Last visited

 Content Type 

Posts posted by kaydotjpg

    Sub Categories in Navigation

    in Customize with code

    Posted

    https://soberishatl.squarespace.com

    password: sober123

     

    Hi my client would like a navigation that has sub catergories inside the dropdown. For example "Alcoholic" > "Spirits" > Whiskey Alternative, Rum Alternative, Gin Alternative. Basically how the shop is step-up, she wants that displayed within the navigation dropdown. Currently I just have "Non-Alcoholic" going straight to the "Spirits" main page, but she would like the categories included in the nav. Anyway to do this? 

    Adding Map to Site

    in Customize with code

    Posted · Edited by kaydotjpg

    https://pumpkin-chimes-c9bl.squarespace.com/

    password: south

    Hi! My client is wanting a simple map of the southern US, and wants the states to be clickable to link to external sites. Someone mentioned this site, where you upload your own image and can add links. Then, the site will spit out a code. However, there are no instructions for this code- where do I put it? I tried adding in a code block, and tried to embed, but no luck. Any tips? Down below is an example 

    <!-- Image Map Generated by http://www.image-map.net/ -->
<img src="usa-southeast-map-2x.jpeg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="FL" title="FL" href="www.example.com" coords="1033,1410,1046,1474,1168,1461,1301,1558,1426,1504,1521,1594,1595,1688,1574,1780,1684,2007,1786,2124,1870,2063,1873,1912,1819,1767,1788,1647,1740,1489,1709,1433" shape="poly">
    <area target="" alt="GA" title="GA" href="www.example.com" coords="1253,870,1329,1400,1717,1415,1786,1255,1515,857" shape="poly">
    <area target="" alt="SC" title="SC" href="www.example.com" coords="1538,864,1794,1232,2054,1002,1839,877,1694,829,1944,913,1651,852,1651,831" shape="poly">
</map>

    of what the code looks like. 

    Text Pop Up on Gallery Slideshow

    in Customize with code

    Posted

    https://swordfish-gardenia-shb5.squarespace.com/

    password: Mahalia

    Hi! This might be a long shot. I'm working on a clients site, and we have a gallery section (middle of pages, light green logos). I am currently using custom code to have it set to autoplay, arrows removed. My client is wondering if there is a way to have a small text box pop up when you hover or click the individual logos. I've found coding to do this on a normal image block, but hoping to find something for the gallery images. And if taking off the infinte autoplay option off to make this happen thats fine

    Screen Shot 2023-06-19 at 5.55.20 AM.png

    Different Images on Refresh

    in Customize with code

    Posted

    https://parakeet-chrysalis-lnzs.squarespace.com/

    password: madcap

    Hi! My client would like the large, main gallery on her home page (which is currently set to automatically transition between slides), to only show 1 image at a time, and then show a new image on reload or revisit. I've seen past posts in the forum about this, but I'm confused. Down below is the code I've seen, but what do I need to replace in the code? Just the image URLs? And I think it needs to go into code injection > footer?  

    <script>
document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg'
].sort( () => .5 - Math.random() );
    var randImage = images[0];
    document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage;
    document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", "");
});

</script>

     

    Change font size within testimonial block

    in Customize with code

    Posted

    https://flute-alligator-dfrx.squarespace.com/

    password: floral 

    Hi! I have a testimonial (list) block on my homepage. My client is wanting the name/location of the review (for example: "Rebecca, Los Angeles") to be smaller. However, it's hard to target that specifically since that name/location is part of the actual quote (aka it is apart of all the text above it as well). Is there a way to target just the name/location to make it smaller without effecting the text above it? Thanks! 

     

     

    Screen Shot 2023-06-05 at 11.22.52 AM.png

    Full Bleed (underneath header) on ALL pages

    in Customize with code

    Posted

    https://flute-alligator-dfrx.squarespace.com/

    password: floral

    Hi! I am wanting a full bleed into the header on all pages (aka all blocks go underneath the header). I have done this successfully on the homepage using the code below, however when I try to use this code for other pages by replacing the body.homepage with the page IDs (aka collection-) it does not work on the other pages. Suggestions? Thanks! 

      

    body.homepage header#header {
    position: absolute !important;
    background: transparent !important;
}
body.homepage .header-announcement-bar-wrapper {
    background: transparent !important;
    position: absolute !important;
}

     

    Desktop Only Css

    in Customize with code

    Posted

    https://caribou-tiger-66hn.squarespace.com/

    Hi! 

    I have some code that creates a border around the header. I want this effect only on desktop, not mobile. However, when I use the "desktop only" css code  

    @media screen and (min-width:768px) {
paste your CSS code here.
}

    above these codes, it doesn't change mobile, and I keep getting an error message. Maybe I am putting it in the wrong spot? The two codes are: 

    //HEADER BORDER//
     
    .header-title-nav-wrapper 
    {
      background-color: #F2F1E5;
      border:1.4px solid black !important;
      width: 90% !important;
    }
     

     

    //CUSTOM HEADER//
     
    .header .header-announcement-bar-wrapper {

        position: relative;
        z-index: 2;
        width: 180%;
        box-sizing: border-box;
        padding-top: 3vw;
        padding-bottom: 3vw;
        padding-left: 3vw;
        padding-right: 40vw;
        pointer-events: auto;

    }

    Javascript for Header help

    in Customize with code

    Posted

    site: https://grouper-azalea-byr2.squarespace.com/

    password: lara

     

    Hi! 

    I am using a javascript code in my footer code injection area that was given to me by a member here on the forum. However, I am having a tiny issue with it but haven't heard back from the OG member, so starting a new thread in hopes of solving this for my client. My request was to: hide the site title of the first page only, first section only (site title appearing after scrolling past the first section). The code that was given to me works GREAT. However, the code does this for every page of the site, when I want it active only on the homepage. Can someone help me make this happen? Code down below: 

      

    <script>
const logo = document.getElementById('site-title'); // get reference to sitelogo element
const landingSection = document.querySelector('#page #sections section:first-of-type'); 

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.target === landingSection) {
      if (!entry.isIntersecting && entry.intersectionRatio === 0) {
        logo.classList.remove('hidden'); 
      } else {
        logo.classList.add('hidden'); 
      }
    }
  });
});

observer.observe(firstSection); 
</script>

<style>
  .hidden {
    visibility: hidden;
  }
</style>

     

    Draggable Image

    in Customize with code

    Posted

    Hi! 

    I have a client hoping to make an image draggable (just one image). I've found a codepen code, but I'm not sure how to put the codepen into my site correctly (there seems to be different options). If someone could help me figure out how to do that with my tester site (we can use the oval image on the second section, code block: #block-374ede71b52e85ca10b8) Thank you!!

    site: https://krill-cinnamon-fcfj.squarespace.com/
    password: hello

     

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources