Jump to content

Andre_99

Member
  • Posts

    6
  • Joined

  • Last visited

Posts posted by Andre_99

  1. On 5/26/2020 at 1:42 PM, katycarlisle said:

    I don't know if this has been a recent fix but I was able to get the UK date format by going to Settings > Language & Region and choosing "English (United Kingdom)" as my language. Now in the overview they display as dd/mm/yy and when you click through it shows as number then month e.g. 6 May. It's still annoying that the formats are different in the overview to in the post (and both of those are different to summary blocks).

    Okay so it seems like to change to an European format date. it does work if you change it to English (United Kingdom) The format will change immediately to dd/mm/yyyy.

    However i had my settings on Norwegian. yet the Date format was not in an European format. So changing to English (United Kingdom) is the most easy way to do it

  2. On 5/10/2021 at 10:10 PM, Wolfsilon said:

    Hello there,

    To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.

    1) Create a Code Block and place the block directly underneath the "Get A Quote" button.

    2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 

    <div class="arrow">
      <span></span>
    </div>

    3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.

    4) To animate and place the element onto your website you can paste the following into the Custom CSS box:

     .arrow{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .arrow span{
        display: block;
        width: 30px;
        height: 30px;
        border-bottom: 3px solid #000;
        border-right: 3px solid #000;
        transform: rotate(45deg);
        margin: -10px;
        animation: animate 1.8s ease infinite;
    }
    @keyframes animate {
        0%{
            opacity: 0;
            transform: rotate(45deg) translate(-20px,-20px);
        }
        50%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: rotate(45deg) translate(20px,20px);
        }
    }

    5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 

    You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.

    You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.

    You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
     

    Let me know if you need any additional help. Hope this provided a solution for you! 

    Cheers,

    Dan

    The arrow and codes worked perfect!

    but i have an issue. the arrow is to highly placed on my site. i want to be just at very bottom of my background photo.

    i made a circle of where i would like the arrow to be placed compared to where it is placed 

    Screenshot 2021-12-22 at 02.38.04.png

  3. On 5/25/2020 at 12:32 AM, tuanphan said:

    Add to Home > Design > Custom CSS

    /* First name */
    .field.first-name .caption-text {
        visibility: hidden;
    }
    .field.first-name .caption-text:before {
        visibility: visible;
        content: "Voornaam";
    }
    /* last name */
    .field.last-name .caption-text {
        visibility: hidden;
    }
    .field.last-name .caption-text:before {
        visibility: visible;
        content: "Achternaam";
    }

     

    Thanks Alot. Worked perfect for me aswell

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