Jump to content

ruralstudio

Circle Member
  • Posts

    58
  • Joined

  • Last visited

Posts posted by ruralstudio

  1. Hello all,

    I have been asked by a client to make some updates to their self-catering accommodation site.

    If you visit the current site, you'll see that it currently sends users off-site (via text hyperlinks & buttons) to check availability and book. 

    The client's bookings are all managed by Reslynx and Guestline, and the page users currently book through was custom-built by another agency a while ago.

    My question is do you think it would it be to design, build and embed :

    • one main date picker/calendar which searches availability across all properties
    • date picker/calendars for each individual property

      Ideally I'd like these to be embedded throughout the site - similar to the Lodgify widgets I added for another client: www.guardswell.co.uk/stay

    The above is beyond my technical capabilities, but before I even start exploring this with developers I thought I'd see if anyone here had done something similar and had some advice?

    Thank you!

  2. Hi there,

     

    I used the following code to position my client's logo in the center of all navigation on desktop (split navigation). Works well, however on mobile the logo is positioned on the left. I've tried a few things but can't seem to move it to the center. Is anyone able to help?

    Quote

     

    // SPLIT NAVIGATION //

    .header-nav {
        position: absolute;
        top: 55px;
        bottom: 0;
        margin-top: 0!important;
        margin-left: 0px!important;
    }

    .header-nav-item:nth-of-type(4) {
        margin-right: 300px!important;
    }

    .header-title-logo a {
        z-index: 1000;
        position: relative;
    }

    .header-display-desktop .header-title {
        flex: 0 0 40% !important;
        z-index: 999999999;
    }

     

     

    site password: guardswell2023

    Many thanks!

    Screenshot 2023-10-28 at 12.50.28.png

    Screenshot 2023-10-28 at 12.50.36.png

  3. On 5/1/2023 at 9:51 AM, ruralstudio said:

    Hi, thank you but sadly this hasn't seemed to work. I removed the previous piece of code - but maybe I'm missing something?

     

    On 5/1/2023 at 1:30 AM, tuanphan said:

    Add to Design > Custom CSS

    /* Summary block custom arrows */
    div#block-bbd3a0f973f22d6103a8 {
    .sqs-gallery-controls .next, .sqs-gallery-controls .previous {
        background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-arrow-left.png.dc3b32b710c169a07350cba2c41abf04.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent !important;
    }
    .sqs-gallery-controls .previous {
        background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-icon-right.png.b1403153d4b4a22c29b1cc99f821210a.png) !important;
    }
    .sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
        visibility: hidden;
    }
    }

    image.thumb.png.97a66ac87e89d364668180e15ce8a6aa.png

    Hey Tuanphan, if you have any advice it'd be so appreciated 🙏 thanks

  4. 8 hours ago, tuanphan said:

    Add to Design > Custom CSS

    /* Summary block custom arrows */
    div#block-bbd3a0f973f22d6103a8 {
    .sqs-gallery-controls .next, .sqs-gallery-controls .previous {
        background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-arrow-left.png.dc3b32b710c169a07350cba2c41abf04.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent !important;
    }
    .sqs-gallery-controls .previous {
        background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-icon-right.png.b1403153d4b4a22c29b1cc99f821210a.png) !important;
    }
    .sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
        visibility: hidden;
    }
    }

    image.thumb.png.97a66ac87e89d364668180e15ce8a6aa.png

    Hi, thank you but sadly this hasn't seemed to work. I removed the previous piece of code - but maybe I'm missing something?

  5. Hi Tuanphan,

     

    I've actually just had a request from client to change the arrows to images of sideways facing hearts instead...

    And ideally display these on either side of the gallery block, instead of on top of the images.

    Do you have any advice for this please? Appreciate all your help so far!

    Images attached incase useful, but I know I'll need to upload these to the site custom files.

     

    heart-arrow-left.png

    heart-icon-right.png

  6. On 4/8/2023 at 10:04 AM, tuanphan said:

    Above code for Gallery Section. But you are using Gallery Block, so need this code

    /* Gallery Block arrows */
    .sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
        font-size: 50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

     

    Thank you @tuanphan! This worked, but I wondered how I can make the line/stroke width thicker/bolder too?

    Thanks

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