Jump to content

moonlitdesign

Circle Member
 View Profile  See their activity

  • Posts

    154

  • Joined

  • Last visited

 Content Type 

Posts posted by moonlitdesign

    add codepen preloader animation to site

    in Customize with code

    Posted

    1 hour ago, justinjamesclack said:

    Apologies for not getting back sooner, I've been trying to make the animation work, but for some reason the SCSS doesn't like being converted to CSS. Now the animation is all weird and I can't get it to work.

    Now if you had pure CSS code, I could make that work as a loading screen no problem. 



     



     

    thank you so much for trying ! i managed to contact the creator with what you said and their reply was this:

    "There's an arrow down in the top right corner of the CSS panel. You click it and you get among the options "View Compiled CSS". Alternatively you can just add .css at the end of the CodePen link. Just don't forget to remove the #btn--yp styles, which are strictly for the YouTube link (linking back to this video from CodePen)."

    if that helps?

    add codepen preloader animation to site

    in Customize with code

    Posted

    48 minutes ago, justinjamesclack said:

    Your code is a mix of CSS and SCSS. 

    This is now the corrected code;
     

    :root {
        --c0: #e2e2bf;
        --c1: #de6873;
        --d: 8em;
        --t: 1s;
    }

    body {
        display: grid;
        grid-template: var(--d) / var(--d);
        place-content: center;
        margin: 0;
        height: 100vh;
        background: #2b323c;
    }

    div, div::before, div::after {
        border-radius: 50%;
        background: linear-gradient(90deg, var(--c0) calc(var(--i, .5)*100%), var(--c1) 0);
    }

    div {
        display: grid;
        animation: flip calc(2 * var(--t)) steps(1) infinite;
    }

    div::before, div::after {
        --i: 0;
        grid-area: 1 / 1;
        backface-visibility: hidden;
        transform: rotateY(calc((var(--i) + 1) * .5turn));
        animation: roty var(--t) ease-in-out infinite alternate;
        content: '';
    }

    div::after {
        --i: 1;
    }

    @keyframes flip {
        50% {
            transform: scale(-1);
        }
    }

    @keyframes roty {
        0% {
            transform: rotateY(calc(var(--i) * .5turn));
        }
    }


     but are you using a code block/embed block or are you using this animation as part of a loading screen?

    thank you for your time!! i'm wanting to use it as part of a loading screen - not sure where to put the code for that 🙂

    mobile menu showing centred on homepage only (should be left aligned)

    in Customize with code

    Posted · Edited by moonlitdesign

    2 hours ago, tuanphan said:

    You mean these items?

    image.png.87e79fc5d82fc152e758cff8fb66952a.png

    yeah i managed to solve the issue, however have a few other issues! 

     

    - the counters show in different alignment when you open the menu from different pages. meaning it touches the borders when it shouldn't. opening the menu from the homepage is the correct look of how the numbers should be. 

    - and the sub / secondary drop down nav menu should not have counters.

    i tried to add: :not(.header-menu-nav-item .header-menu-nav-folder) to my menu page number code but didn't work!

    - the close icon is also not centred in the circle border

    Screenshot 2024-03-26 at 10.31.18.png

    add a circle border around the menu burger icon

    in Customize with code

    Posted

    i've managed to get a circle border, but the close icon is in the wrong place. it needs nudging into the center of the circle / left. updated code:

     


    /* burger */
    .burger-inner>div {
        width: 50% !important;
    }

    .burger-inner>div {
        left: 0 !important;
        right: 0 !important;
    }

    .burger-box {border:1px solid #1d1d1d;
      border-radius:50%;
    }

    add a circle border around the menu burger icon

    in Customize with code

    Posted · Edited by moonlitdesign

    Hi there, im looking to add a circle border around the burger menu icon but having difficulty.

     

    the code im trying is: 

    /* burger */
    .burger-inner>div {
        width: 50% !important;
    }

    .burger-inner>div {
        left: unset !important;
        right: 0 !important;
    }

    .burger {border:1px solid #1d1d1d;
      border-radius:50%;
    }

     

    www.moonlitdesign.uk/home-old

    How to make menu navigation a drop down on mobile

    in Customize with code

    Posted · Edited by moonlitdesign

    On 3/25/2024 at 9:46 AM, tuanphan said:

    I see you figured it out

    Hey @tuanphan i paid for a plugin 🙂

    I do however need help to disable the menu counter on the sub navigation, and make sure the menu counter is in the same position (a little higher than the page menu links) when the menu is opened from all pages.

    currently, when you open the menu from the homepage, the counters are in line with the menu links, and when you open the menu from any other page, the counters are showing much higher!

    any thoughts would be so appreciated thank you

    www.moonlitdesign.uk/home-old

    change list carousel arrows icons into text / words

    in Customize with code

    Posted · Edited by moonlitdesign

    4 hours ago, tuanphan said:

    Use this code for mobile 

    .user-items-list-item-container[data-section-id="65e07302487e8725e7601b17"] {
.mobile-arrows svg {
    display: none !important;
}
button.mobile-arrow-button.mobile-arrow-button--left:after {
    content: "Prev";
}
button.mobile-arrow-button.mobile-arrow-button--right:after {
    content: "Next";
}}

     

    THANK YOU ! that worked perfectly. is there a way to increase the size of the gap between them so they are full width? @tuanphan

    How to make menu navigation a drop down on mobile

    in Customize with code

    Posted · Edited by moonlitdesign

    On 2/4/2023 at 12:16 AM, Lauren_C said:

    Hello, 

    https://lifecycles-lca.squarespace.com/

    PW: lifecycles123

    I have forced the mobile menu on desktop and would like dropdown folders as in the first image: 

    1584687162_ScreenShot2023-02-04at11_00_01am.thumb.png.f058ca3b850cdb24bbc7d74e07600519.png

    I have reached out to Chris Schwartz-Edmisten to see if the plugin is compatible. But any help in the meantime would be appreciated. 

    1521690709_ScreenShot2023-02-04at11_13_59am.thumb.png.27ce701fe00d0d56ff3f1085437a5fea.png

    I'm struggling to align the + icon at the right of the nav - can anyone help with that? 

    Many thanks! 

     

    Could you please share your code for this effect, this is exactly what im after!!! thank you @Lauren_C

     

    https://moonlitdesign.uk/home-old 

     

    @tuanphan

    change list carousel arrows icons into text / words

    in Customize with code

    Posted · Edited by moonlitdesign

    is there a way to do this for the mobile arrows too?

    its working on desktop for me but not mobile !

     

    I tried this code:

     

    @media screen and (max-width:767px) {

    .mobile-arrows {
        display: none !important;}
      
      .desktop-arrows {

    display:block!important;}
      
      .user-items-list-carousel__arrow-container {

    width:450px!important;
        margin: auto!important; }


    }

     

     

    but looks awful! they aren't showing centred, or the correct colour on mobile #1d1d1d - They have a blue link colour.

    - i need a way to be able to adjust the space in the middle between the 'arrows' so it doesn't affect the visibility of the quote.

     

    www.moonlitdesign.uk/home-old

     

    @tuanphan thank you!

     

    image.thumb.jpeg.9c340b0379d6e175650f5cec02ebb69a.jpeg

     

    shrink image on scroll

    in Customize with code

    Posted · Edited by moonlitdesign

    4 hours ago, tuanphan said:

    Try this code to Website > Website Tools > Custom CSS 

    header#header.shrink + #page div#block-yui_3_17_2_1_1710265456616_12284 {
    width: 300px !important;
    transition: all 0.3s;
}
div#block-yui_3_17_2_1_1710265456616_12284 {
    transition: all 0.3s;
}

     

    @tuanphan This is an incredible start thank you so much! I changed the width to '0' to make it completely vanish!

    there's still the issue that it starts to disappear straight away,
    rather than about 600 scroll down the page, like this code:

    <script>
      $(window).scroll(function(){
      var scroll = $(window).scrollTop();
      if(scroll > 700){
        $('header#header').addClass('scrollNav');
      }
      else{
        $('header#header').removeClass('scrollNav');
      }
    });
    </script>
    <style>

     

    - is there a way to add a scroll time like this for the big MOONLIT image too ?

    - is there also a way to add a left direction to the 'shrink' animation?
    so it looks like its disappearing into the corner and being replaced with the new logo 😄 

     

     

    thank you!

     

     

    Apply border and other css effects to image shapes

    in Customize with code

    Posted · Edited by moonlitdesign
    adding in the URL

    On 4/14/2023 at 12:01 AM, GeorgiaDigital said:

    Hi all - I am trying to implement this same effect on a fluid engine site however this code does not seem to be working and I cannot workout which css selectors I should be using. Does anyone know how this could be implemented to an image shape on fluid engine?

    I'm also looking for this, all the codes i've tried seem to be outdated and are not working! 

     

     

    www.moonlitdesign.uk/design-services

    Reveal image on hover of text

    in Customize with code

    Posted · Edited by moonlitdesign

    8 hours ago, tuanphan said:

    I created new demo, you try checking

    https://tuanphan3.squarespace.com/hover-text-show-image-behind?noredirect

    pass: abc

    If this it what you want, I will give you a guide to achieve it

    yes please that would be great! the text needs to not show up as a link though, so no underline or hand pointer if thats okay! also, could the transition of the image appearing be smoother?

     

    thank you so much!!

    shrink image on scroll

    in Customize with code

    Posted

    Hi there, i've got my nav logo how i want it, now i need to complete the illusion with the large logo image.

    i need to shrink the 'MOONLIT' image down into the left corner on scroll,

    on the same time/slightly before the nav logo appears. 

     

     

    i'm using this @tuanphan code in page > settings >advanced >header:

    <script>
      $(window).scroll(function(){
      var scroll = $(window).scrollTop();
      if(scroll > 700){
        $('header#header').addClass('scrollNav');
      }
      else{
        $('header#header').removeClass('scrollNav');
      }
    });
    </script>
    <style>
      
      
      header#header img {
        opacity: 0;
        transition: all 0.3s;
    }
    .scrollNav img {
        opacity: 1 !important;
        transition: all 0.3s;
    }
       
      
    </style>

     

     

    along with CSS > website tools:

     

    //hide logo until scroll//

    .homepage .header-title-logo, .homepage .header-mobile-logo a {
        opacity: 0;
        position: relative;
        top: -10vh;
        transition: all .75s;
    }

    .homepage .shrink .header-title-logo, .homepage .shrink .header-mobile-logo a {
        opacity: 1;
        position: relative;
        top: 0;
    }

     

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