Logo on Cover Page

Hi! I am using the York template on Version 7.0 ! I really want to add my logo (Lolipop graphic) to the box on my cover page like the screenshot attached, just a quick mockup I made using Wix.

I attached my current Squarespace page and how I cannot use both the text and logo. Would I be able to achieve this with code?

Thanks so much!

On 10/24/2022 at 7:51 PM, bonipops said:

Hi! I am using the York template on Version 7.0 ! I really want to add my logo (Lolipop graphic) to the box on my cover page like the screenshot attached, just a quick mockup I made using Wix.

I attached my current Squarespace page and how I cannot use both the text and logo. Would I be able to achieve this with code?

Thanks so much!

 

What is your protected password so I can take a look?

6 hours ago, bangank36 said:

What is your protected password so I can take a look?

Hello! It is "ILLU450" !

On 10/26/2022 at 2:50 AM, bonipops said:

Hello! It is "ILLU450" !

Add to Cover Page Header. Replace Pixabay with your logo image url

<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before {
    background-image: url(https://cdn.pixabay.com/photo/2022/08/18/10/41/herring-gull-7394570__480.jpg);
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    background-position: center;
    margin: 0 auto;
    margin-bottom: 10px;
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

On 10/27/2022 at 9:47 AM, tuanphan said:

Add to Cover Page Header. Replace Pixabay with your logo image url

<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before {
    background-image: url(https://cdn.pixabay.com/photo/2022/08/18/10/41/herring-gull-7394570__480.jpg);
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    background-position: center;
    margin: 0 auto;
    margin-bottom: 10px;
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

Hello!! This is awesome! Is there anyway I can get it partially off like in the mockup image I posted in the original post?

On 11/10/2022 at 9:19 AM, bonipops said:

Hello!! This is awesome! Is there anyway I can get it partially off like in the mockup image I posted in the original post?

You mean make logo overlap the box, not inside the box?

On 11/13/2022 at 2:43 AM, tuanphan said:

You mean make logo overlap the box, not inside the box?

Yes! Like this: 

https://bonipops.com/welcome

Use this new code

<style>
   .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before {
    background-image: url(https://cdn.pixabay.com/photo/2022/08/18/10/41/herring-gull-7394570__480.jpg);
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    background-position: center;
    margin: 0 auto;
    margin-bottom: 10px;
    background-size: cover;
    background-repeat: no-repeat;
     position: absolute;
     top: -35px;
     left: 50%;
     transform: translateX(-50%);
}
 .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert {
     position: relative !important;
 }
</style>

On 12/4/2022 at 3:52 AM, tuanphan said:

https://bonipops.com/welcome

Use this new code

<style>
   .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before {
    background-image: url(https://cdn.pixabay.com/photo/2022/08/18/10/41/herring-gull-7394570__480.jpg);
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    background-position: center;
    margin: 0 auto;
    margin-bottom: 10px;
    background-size: cover;
    background-repeat: no-repeat;
     position: absolute;
     top: -35px;
     left: 50%;
     transform: translateX(-50%);
}
 .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert {
     position: relative !important;
 }
</style>

Hi Again!! Thank you for this, so if you take a look at my website you can see I have it on there. However, I notice it does not attach to the white box on the cover page, so it differs from computer to computer screen. How can I fix this? 

On 2/14/2023 at 12:17 AM, bonipops said:

Hi Again!! Thank you for this, so if you take a look at my website you can see I have it on there. However, I notice it does not attach to the white box on the cover page, so it differs from computer to computer screen. How can I fix this? 

Don't remove any code in current code

Add this to COver Page Header

<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before {
    top: -50px !important;
}
</style>

On 2/15/2023 at 8:57 PM, tuanphan said:

Don't remove any code in current code

Add this to COver Page Header

<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before {
    top: -50px !important;
}
</style>

 

Amazing! One last thing seems like when I add the new code it brings up the whole box and doesn't center it like it was before.

The first picture is before, the second is after.

On 2/18/2023 at 10:08 AM, bonipops said:

Amazing! One last thing seems like when I add the new code it brings up the whole box and doesn't center it like it was before.

The first picture is before, the second is after.

Find & remove this line from Cover Page Header

On 2/21/2023 at 5:03 AM, tuanphan said:

Find & remove this line from Cover Page Header

Seems like that did not work! I would the whole box centered since it is too far up now 

On 2/26/2023 at 7:07 AM, bonipops said:

Seems like that did not work! I would the whole box centered since it is too far up now 

I still see it. Can you check it again? Maybe you have 2 same code

On 2/28/2023 at 5:03 AM, tuanphan said:

I still see it. Can you check it again? Maybe you have 2 same code

Try adding this to last line in Cover Page Header

<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert {
    position: fixed !important;
}
</style>

On 3/5/2023 at 8:13 PM, tuanphan said:

Try adding this to last line in Cover Page Header

<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert {
    position: fixed !important;
}
</style>

 

I do not think that worked either ):!

On 3/8/2023 at 12:05 PM, bonipops said:

I do not think that worked either ):!

Can you duplicate the site & add me as an admin? I can test code easier

15 hours ago, tuanphan said:

Can you duplicate the site & add me as an admin? I can test code easier

Yes! What email should I sent the invite to?

On 3/12/2023 at 7:14 AM, bonipops said:

Yes! What email should I sent the invite to?

Sent a private message