Jump to content

Quadrant

Member
  • Posts

    23
  • Joined

  • Last visited

Posts posted by Quadrant

  1. 20 hours ago, tuanphan said:

    Can you take a screenshot of error message?

    Thank you! 

    And it's not an error message, it just shows the attached, saying it can't connect. But it's fine on the actual site. I only have this happen when I click the link on the backend in my pages.

    Not sure if it's code related? This is what I'm using:

     

    <style>
    #block-yui_3_17_2_1_1713915846721_5545 {
       cursor: pointer;
       pointer-events: auto;
    }
    #block-yui_3_17_2_1_1713915846721_5545 p {
       pointer-events: none;
    }
    </style>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
       var block = document.getElementById("block-yui_3_17_2_1_1713915846721_5545");
       block.onclick = function() {
           window.location.href = "https://www.mugacarpentry.com/muga-gallery";
       }
    });
    </script>


    <style>
    #block-30d0b584b8e65003d366 {
       cursor: pointer;
       pointer-events: auto;
    }
    #block-30d0b584b8e65003d366 p {
       pointer-events: none;
    }
    </style>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
       var block = document.getElementById("block-30d0b584b8e65003d366");
       block.onclick = function() {
           window.location.href = "https://www.mugacarpentry.com/early-work";
       }
    });
    </script>


    <style>
    #block-712a1d835251f6c1ef7f {
       cursor: pointer;
       pointer-events: auto;
    }
    #block-712a1d835251f6c1ef7f p {
       pointer-events: none;
    }
    </style>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
       var block = document.getElementById("block-712a1d835251f6c1ef7f");
       block.onclick = function() {
           window.location.href = "https://www.mugacarpentry.com/current-projects";
       }
    });
    </script>

    Screenshot 2024-05-10 at 12.35.57 AM.png

  2. On 12/8/2023 at 7:17 PM, tuanphan said:

    #1. You can share link to this page?

    #2. We can use CSS code, my idea is use CSS absolute to make learn more cover whole block (then make learn more invisible with opacity 0 code)

    @tuanphan, i'm trying to do the same thing as requested above on my website. Can you help? I already have css in place to change the background color on hover, but i'd like to change the text color from black to white at the same time. I'd also like to make each block clickable to open up another page. The website is: https://www.mugacarpentry.com/portfolio-option-1. Thanks!

  3. @creedon, for what it's worth, I just tried taking this bit of code out, because I think that's what was causing the individual lines of text to change color on hover (including scrolling over text in the footer). when i remove it, the only issue seems to be how slowly the text transitions colors even though i have it set to 0s. 😕

    /* apply the hover effect to h4 elements within .sqs-block-content */
    .sqs-block-content:hover .sqsrte-text-color--lightAccent:hover{
      color: #444441 !important; /* change text color to black on hover */
      transition: color 0.05s ease; /* add transition for smooth effect */
    }

  4. On 4/16/2023 at 4:44 AM, creedon said:

    I'm not sure I'm looking at the right text block. Could you give us the block ids for one that is working correctly and one that is not?

    I have identified what might be an issue. A number of rulesets are missing block ids. So the effect is not the same across all blocks.

    Thanks for the reply. Actually, all the block ids I'm concentrating on are listed in the code (6 of them). The others were meant to show overlay colors to my client. Sorry for any confusion. So, it's just the first set of 6 images/text blocks that I'm trying to get the effect to work for. You should be able to see that it's transitioning correctly colorwise but the transition is super slow and disjointed. Like, you hover and the background changes and then the text color fades in after that. Hope that makes sense. 

  5. ok. after playing around with this for far too long, the color transitions are correct. but...it still transitions too slowly. if i set the transitions to 0s though, each line of text changes immediately only when scrolling over them and THEN all the text fades into the correct color which makes it look glitchy. so, if anyone can figure out a way to make this seem a little smoother, i'm all ears. otherwise, i think it's the best fix i'll be able to get.

     

    /* set the initial background color and text color */
    #block-4d9159bed5c68c86d676,
    #block-5fe23bf021cbdac4b243,
    #block-58052db15bcb402167b3,
    #block-362f90c2afaf8844ec0c,
    #block-75ac13840ab92eacc286,
    #block-569f7648aaa626926741 {
      background: rgba(68, 68, 65, 0.5); /* set a dark grey color with 50% opacity */
      padding: 1px;
      text-align: center;
      color: #f8f0e2;
      transition: background-color 0.05s ease, color 0.05s ease; /* add transition for smooth effect */
    }

    /* apply the hover effect to all the blocks */
    #block-4d9159bed5c68c86d676:hover,
    #block-5fe23bf021cbdac4b243:hover,
    #block-58052db15bcb402167b3:hover,
    #block-362f90c2afaf8844ec0c:hover,
    #block-75ac13840ab92eacc286:hover,
    #block-569f7648aaa626926741:hover {
      background: rgba(248, 240, 226, .5); /* change background color to transparent beige on hover */
      color: #444441 !important; /* change text color to #444441 on hover */
    }

    /* apply the hover effect to all the text within the blocks */
    #block-4d9159bed5c68c86d676 *,
    #block-5fe23bf021cbdac4b243 *,
    #block-58052db15bcb402167b3 *,
    #block-362f90c2afaf8844ec0c *,
    #block-75ac13840ab92eacc286 *,
    #block-569f7648aaa626926741 * {
      color: inherit;
      transition: color 0.05s ease; /* add transition for smooth effect */
    }

    /* apply the hover effect to h4 elements within .sqs-block-content */
    .sqs-block-content:hover .sqsrte-text-color--lightAccent:hover{
      color: #444441 !important; /* change text color to black on hover */
      transition: color 0.05s ease; /* add transition for smooth effect */
    }

  6. 1 hour ago, AndyB said:

    You probably just need to add h4 and p before the color property when hovering.

     

    Try this:

    /* apply the hover effect to all the blocks */
    #block-4d9159bed5c68c86d676:hover,
    #block-5fe23bf021cbdac4b243:hover,
    #block-58052db15bcb402167b3:hover,
    #block-362f90c2afaf8844ec0c:hover,
    #block-75ac13840ab92eacc286:hover,
    #block-569f7648aaa626926741:hover {
      background: rgba(248, 240, 226, 0.5); /* change background color to transparent beige on hover */
      h4, p {
        color: #444441 !important; /* change text color to #444441 on hover */
      }
    }

    @AndyB thanks but it didn't work. 😕

  7. Hello. I am using the color codes and css below to make certain homepage images have a transparent dark grey overlay with beige text change to a transparent beige background with dark grey text on hover (basically just switching colors on hover). However, the text is staying beige, even when adding "important" to the code. Not sure what the issue is. If someone could figure out how to make the hover text grey, I'd be so grateful.

    Thanks! website: www.quadrant25.com pw: Quadrant25

    Cream color codes: RGB: 248, 240, 226, HEX: #f8f0e2, HSL: 38, 61, 92
    Grey color codes: RGB: 68, 68, 65, HEX: #444441, HSL: 60, 2, 26
     

    /* set the initial background color and text color */
    #block-4d9159bed5c68c86d676,
    #block-5fe23bf021cbdac4b243,
    #block-58052db15bcb402167b3,
    #block-362f90c2afaf8844ec0c,
    #block-75ac13840ab92eacc286,
    #block-569f7648aaa626926741 {
      background: rgba(68, 68, 65, 0.5); /* set a dark grey color with 50% opacity */
      padding: 1px;
      text-align: center;
      color: #f8f0e2;
      transition: background-color 0.3s ease; /* add transition for smooth effect */
    }

    /* apply the hover effect to all the blocks */
    #block-4d9159bed5c68c86d676:hover,
    #block-5fe23bf021cbdac4b243:hover,
    #block-58052db15bcb402167b3:hover,
    #block-362f90c2afaf8844ec0c:hover,
    #block-75ac13840ab92eacc286:hover,
    #block-569f7648aaa626926741:hover {
      background: rgba(248, 240, 226, 0.5); /* change background color to transparent beige on hover */
      color: #444441 !important; /* change text color to #444441 on hover */
    }

  8. On 4/13/2023 at 10:24 PM, tuanphan said:

    Add to Design > Custom CSS

    body.homepage .gallery-fullscreen-slideshow-list:after {
        content: "";
        background-image: url(https://content.invisioncic.com/p289038/monthly_2023_03/q25logo-removebg-preview.png.e677dab68841dca73c318bc3bcf5df03.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        z-index: 9999;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 250px !important;
        height: 250px !important;
    }

    image.thumb.png.a2314ec6b8daed1e1c3d80f833905ba0.png

    super helpful, thank you! 

  9. On 3/28/2023 at 9:18 PM, tuanphan said:

    GG Photo URL won't work.

    You can upload image to Squarespace & get url

    Follow this guide: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

    Suppose image name is: supaj.png

    your website is: quadrant25.com

    then the image url will be: www.quadrant25.com/s/supaj.png

     

    Thanks for the info. You can disregard. I decided to try something else.

  10. Hi. I'm looking for a way to add a logo on top of a gallery slideshow but to also make it dissolve after a few seconds. We want the logo to be front and center when people come to the site but we also want the images to be easily seen as the slideshow progresses. I know nothing about code but I'm hoping someone is able to help me do this. 

    If I could also get the code to only have the logo overlay on the slideshow (no disappearing needed), that would be helpful too. I'd like the option to do one or the other as needed. I had looked up code to do this but couldn't get it to work on my site. Not sure what I was doing wrong.

    Thank you!

    Site: www.quadrant25.com
    Site Password: Quadrant25

    q25logo-removebg-preview.png

  11. @tuanphan would you be able to help me do this with my site: www.quadrant25.com (pw: Quadrant25)? I don't know what I'm doing wrong with the code/id/image url but nothing shows up for me when I insert the CSS. 

    This is the most recent url for the photo: https://photos.google.com/u/2/photo/AF1QipOwczZd2LTkuejU7-FwrDR9UQoDFcW4piCBIAFg. I had to remove the background on a black image which is why it looks all black when you use the link.

    Thanks for any help.

×
×
  • 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.