Jump to content

nowicluk

Circle Member
  • Posts

    70
  • Joined

  • Last visited

Reputation Activity

  1. Like
    nowicluk got a reaction from tuanphan in Coded caption under photo in lightbox is being cut   
    Solved myself, below is the code I used from another member: 
     
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // configure the classes we're looking for
        const listClass = "div.gallery figure";
        const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a";
        const lightBoxCaption = "lightbox-caption";
        const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']"
        // select all gallery elements, find their captions
        // if they exist then extract the slide id and add a new caption element
        // to the lightbox slide
        const n = document.querySelectorAll(listClass);
        for (var i = 0; i < n.length; i++) {
          const a = n[i].querySelector(linkClass);
          const c = n[i].querySelector("figcaption");
          if (a && a.href && c) {
            const id = a.href.split("=")[1];
            const lbSelector = lightboxSlideSelector.replace("{0}",id);
            const lb = document.querySelector(lbSelector);
            const cp = document.createElement("figcaption");
            cp.className = lightBoxCaption;
            cp.innerHTML = c.innerHTML;
            lb.appendChild(cp);
          }
        }
      });
    </script>
    <style>
    figcaption.gallery-caption {
      display:none;
    }
    figcaption.lightbox-caption {
      bottom:0;
      font-family: "Europa", serif;
      font-style: regular;
      font-size: 16px;
      line-height: 1.4em;
      color: #061A37;
      text-align:justify;
    }
    </style>
  2. Like
    nowicluk got a reaction from Beyondspace in How to change social media icons in navigation?   
    Site URL: https://lychee-magnolia-et83.squarespace.com/
    Hi there, I would like to change the shape of the social media icons like it is possible in the body of a Squarespace page. Is there a code for this? The password to my website is creative1234. Thank you.

     
  3. Like
    nowicluk got a reaction from Beyondspace in Photo description displayed in lightbox under photo in photo gallery section   
    Here you go. The text is under the photo. When I click on the photo the lightbox opens. All I need for all galleries across the website to display the text in the lightbox underneath.

  4. Like
    nowicluk reacted to ghostplugins in How to fill one word with a flashing GIF?   
    Hey @nowicluk!
    It is best to host the GIF file yourself on your Squarespace website via Custom CSS > Manage Files. Once you upload to the file to CSS Files, click the file and a URL will generate in the CSS panel.
    Take this file URL and paste it into your code (replace the DropBox link). That should do the trick! 👍
  5. Like
    nowicluk reacted to iamdavehart in How to fill one word with a flashing GIF?   
    Looking at your site and the gif involved there's a couple of issues here. 
    I don't think dropbox let you link directly to files any more and use them as a proxy web server. You'd be much better off loading the image up to squarespace and then using that image as @ghostplugins says. However, I think looking at the gif you're using, this won't get you what you want anyway. I think you mean for the asterisk itself to cycle through the colours. the code that you're trying to put in will fill the background. so you'll get a square gif flashing away but no asterisk (the asterisk gets made transparent by the css you've used).  🙂
    EDIT! I didn't see the background-clip in the CSS, so if you just do what @ghostplugins said (which is my first point about dropbox not hosting files) it would work. however, the css animations below would work too because your GIF is just block colours. my bad!
    However, support for text background-clip can be a bit patchy (background-clip - CSS: Cascading Style Sheets | MDN (mozilla.org)), so leaving this here as a css animation alternative.
    🙂
    to get this effect you've got a number of options (use javascript, create a flashing asterisk gif etc), but I think the best is to use a css animation. doesn't require premium. Just replace the css you've been using with something like this
    @keyframes flashy-asterisk { 0% { color:red; } 32% { color:red; } 33% { color: blue; } 66% { color: blue; } 67% { color: green; } 100% { color: green; } } h1 strong { animation: flashy-asterisk 2s linear infinite; } the colours have been laid out like this to get it flashing like the gif, but if you removed the extra repeated stops (32% and 66%) then it would ease between the colours. the animation commands cycles between them infinitely over 2s. It starts and 0% and goes to 100% and then starts again at 0% looks like this

    Here's the css animations reference if you want to try different effects
    CSS Animations (w3schools.com)
     
  6. Like
    nowicluk reacted to tuanphan in How to fill one word with a flashing GIF?   
    If you can make * italic or under line, then it will have a different code, then we can use CSS to target it to add gif
  7. Like
    nowicluk reacted to ghostplugins in How to fill one word with a flashing GIF?   
    Hey @nowicluk! This is definitely possible. 

    Try bolding the * and then targeting only that character with bold-targeted CSS.
    Something like this should help as it will only target the character that's bold – this being the *. Be sure to update h1 if that is not the header size you are using in your example.
    Targeting the text block's block-id before the CSS will also help in case you bold other headers throughout the site and don't want those affected.
    // GIF Text // h1 strong { background: url(GIF-URL-HERE.gif) !important; background-size: cover !important; background-position: center !important; -webkit-background-clip: text !important; color: transparent !important; } Hope this helps! 👻
  8. Like
    nowicluk got a reaction from tuanphan in Burger Navigation Menu: logo not centered &   
    Thank you. All solved.
  9. Like
    nowicluk got a reaction from Beyondspace in Burger Navigation Menu: logo not centered &   
    Thank you. All solved.
  10. Like
    nowicluk reacted to Beyondspace in Burger Navigation Menu: logo not centered &   
    Let's consider adding this  line of code

    @media screen and (max-width: 3000px) { /* Display burger icon at all widths and align right */ .header .header-burger { display: flex; order: 2 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } .header-title-nav-wrapper { flex: 1 0 100%; } }  
×
×
  • 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.