Jump to content

CSS issues since moving to 7.1

Go to solution Solved by tuanphan,

Recommended Posts

So we upgraded www.mallettspallette.co.uk to Squarespace 7.1.

This is what the header used to look like

image.thumb.png.d81e2976afc4ec016debee7b5179d503.png

 

And this is the code which I believe made the brush strokes of the header happen:

/*header brush effect and gradient overlay */
  #brush {
    display: inline-block !important; 
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    background: url("https://static1.squarespace.com/static/5dd0d49ffcb3826c703c9a27/t/5df30262ca514d7fda10a7d8/1576206946269/svg-overlay.svg"),
      linear-gradient(to right, rgba(56, 56, 56, 0.6), rgba(56, 56, 56, 0));
    background-size: 105%;
    background-repeat: no-repeat;
    background-position: -2px 101%;
    background-color: transparent;
  }

However, when you go to https://mallettspallette.co.uk the CSS has stopped working.

Any ideas why?

Link to comment
  • Replies 9
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

35 minutes ago, IDS said:

And this is the code which I believe made the brush strokes of the header happen:

/*header brush effect and gradient overlay */
  #brush {
    display: inline-block !important; 
.....

Hi, between 7.0 and 7.1, the html has likely changed. There is no #brush class in Squarespace, so this must have been a custom code, added using Javscript. Is there code in your Code Injection that adds the class "brush"?

 

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Custom Code help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment

Not in the header code injection section of SS ironically, but this is the footer code injection section:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
  /* checks if this is a touchscreen for hover behavior */
  function isTouch() {
    return (('ontouchstart' in window) ||
      (navigator.MaxTouchPoints > 0) ||
      (navigator.msMaxTouchPoints > 0));
  }


  //facilitates top nav styling on scroll
  var controller = new ScrollMagic.Controller();
  var scene = new ScrollMagic.Scene({
      triggerElement: "div.Site-inner",
      triggerHook: 'onLeave'
    })
    .setClassToggle("header.Header--top", "nav-toggle")
    .addTo(controller);

  //inserts brush effect   <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  $("section.Intro").append('<div id="brush"></div>');

  //sets home page item overlay
  var imageNum = 0;
  $("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper a").each(function() {
    var itemTitle = $(this).find("img").attr("alt");

    var color;
    switch (imageNum) {
      case 0:
        color = c.homeGridItemOne;
        break;
      case 1:
        color = c.homeGridItemTwo;
        break;
      case 2:
        color = c.homeGridItemThree;
        break;
      case 3:
        color = c.homeGridItemFour;
        break;
      case 4:
        color = c.homeGridItemFive;
        break;
      case 5:
        color = c.homeGridItemSix;
        break;
      default:
        color = c.homeGridItemOne;
    }
    imageNum += 1;

    $(this).append("<div class='item-overlay' style='background-color:" + color + "'><span>" + itemTitle + "</span></div>");

  });


  //item hover effect on home page
  if (!isTouch()) {
    $("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper").mouseenter(function() {

      var insertedElement = $(this).find(".item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 1
      });
    });

    $("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper").mouseleave(function() {
      var insertedElement = $(this).find(".item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 0
      });
    });
  }

  //sets blog page item overlay
  $("section.BlogList a").each(function() {
    var itemTitle = $(this).find("img").attr("alt");
    $(this).append("<div class='blog-item-overlay'><span>" + itemTitle + "</span></div>");
  });

  if (!isTouch()) {
    //item hover effect on blog page
    $("section.BlogList a").mouseenter(function() {

      var insertedElement = $(this).find(".blog-item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 1
      });
    });

    $("section.BlogList a").mouseleave(function() {
      var insertedElement = $(this).find(".blog-item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 0
      });
    });
  }

  //sets gallery page item overlay
  if (c.galleries.includes(window.location.pathname)) {
    $("a[class*='image']").each(function() {
      $(this).css("position", "relative");
      var itemTitle = $(this).find("img").attr("alt");
      $(this).append("<div class='gallery-item-overlay'><span>" + itemTitle + "</span></div>");
    });
  }

  if (!isTouch()) {
    //item hover effect on gallery page
    $("a[class*='image']").mouseenter(function() {

      var insertedElement = $(this).find(".gallery-item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 1
      });
    });

    $("a[class*='image']").mouseleave(function() {
      var insertedElement = $(this).find(".gallery-item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 0
      });
    });
  }

  function banners(slug) { //gets list of gallery urls for banner
    //inserts arrows
    $("section.Intro").append('<div onclick="slideLeft()" id="left-carousel-arrow"></div><div onclick="slideRight()" id="right-carousel-arrow"></div>');


    //styles arrow icons
    gsap.from("#left-carousel-arrow", {
      duration: 3,
      opacity: 0,
      x: -200
    });
    gsap.from("#right-carousel-arrow", {
      duration: 3,
      opacity: 0,
      x: 200
    });

    //sets banner gallery

    data.items.forEach(item => imgUrls.push(item.assetUrl));


  }

  var imgUrls = [];
  var slug = window.location.pathname;
  slug = slug.replace("/", "");
  if (slug == "") {
    slug = "home";
  }
  var dataUrl = "/" + slug + "-banner-gallery/?format=json-pretty";

  var data;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      data = JSON.parse(this.responseText);
      if (c[slug] != false) {
        banners(slug);
      }
    }
  };
  xhttp.open("GET", dataUrl, true);
  xhttp.send();

  //get original background
  var originalImg;
  var imageLoaded = false;
  //changes slideshow image
  var counter = 999;

  function slideLeft() {
    if (!imageLoaded) {
      originalImg = $("figure.Intro-image > img").attr("src");
      imageLoaded = true;
    }
    if (counter == 999) {

      counter = imgUrls.length - 1;
    } else if (counter == 0) {

      counter = imgUrls.length;
    } else {
      counter -= 1;
    }
    if (counter == imgUrls.length) {
      $("figure.Intro-image > img").attr("src", originalImg);
    } else {
      $("figure.Intro-image > img").attr("src", imgUrls[counter]);
    }

  }

  function slideRight() {
    if (!imageLoaded) {
      originalImg = $("figure.Intro-image > img").attr("src");
      imageLoaded = true;
    }
    if (counter == 999) {

      counter = 0;
    } else if (counter == imgUrls.length) {

      counter = 0;
    } else {
      counter += 1;
    }
    if (counter == imgUrls.length) {
      $("figure.Intro-image > img").attr("src", originalImg);
    } else {
      $("figure.Intro-image > img").attr("src", imgUrls[counter]);
    }

  }

  //strava icon in footer
  $("nav.sqs-svg-icon--list").append(
    '<a href="https://www.strava.com" id="strava-icon"><div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path id="strava-path" d="M15.387 17.944l-2.089-4.116h-3.065L15.387 24l5.15-10.172h-3.066m-7.008-5.599l2.836 5.598h4.172L10.463 0l-7 13.828h4.169" fill="#fff"/></svg></div></a>'
  );

  //takes care of hover behavior on mobile
  if (isTouch()) {
    var homeItems = [];
    var galleryItems = [];
    var blogItems = [];

    //home items mobile behavior
    $("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper a").each(function() {
      var redirect;
      $(this).attr("id", $(this).attr("href"));
      $(this).removeAttr("href");
      var link = $(this);
      $(this).click(function() {
        if (redirect) {
          var redirectUrl = link.attr("id");
          gsap.to(link.find(".item-overlay"), {
            duration: 1,
            opacity: 0
          });
          redirect = false;
          window.location = redirectUrl;
          return;
        }
        gsap.to(link.find(".item-overlay"), {
          duration: 1,
          opacity: 1
        });
        redirect = true;
      });
    });

    //blog items mobile behavior
    $("section.BlogList a").each(function() {
      var redirect;
      $(this).attr("id", $(this).attr("href"));
      $(this).removeAttr("href");
      var link = $(this);
      $(this).click(function() {
        if (redirect) {
          var redirectUrl = link.attr("id");
          gsap.to(link.find(".blog-item-overlay"), {
            duration: 1,
            opacity: 0
          });
          redirect = false;
          window.location = redirectUrl;
          return;
        }
        gsap.to(link.find(".blog-item-overlay"), {
          duration: 1,
          opacity: 1
        });
        redirect = true;
      });
    });

    //gallery items mobile behavior
    $("a[class*='image']").each(function() {
      var overlay = $(this).find(".gallery-item-overlay");
      gsap.to(overlay, {
        duration: 10,
        opacity: 1
      });
    });

  }
</script>

Link to comment
On 3/6/2024 at 3:08 AM, IDS said:

Superstar, thank you.  Any idea on the footer please? 🙂

Use this under

<script>
  $(document).ready(function(){
  	$("footer.sections section:first-child").append('<div id="brush"></div>');
  });
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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