Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I add the Gallery Overlay Text to all of my pages?


HalleVanDeHey

Question

Site URL: https://hallevandehey.com

The gallery pages on my template come with a built in Gallery Overlay Text. When I add a page description, it automatically shows up at the top of the page. 

You can see this on my site here: https://hallevandehey.com/sonoslive1685587462_ScreenShot2021-01-30at12_00_48PM.thumb.png.01b4ae332f73ffb7a2730213ece95c24.png

I added two pages to my website using the blank page instead of the gallery page. The blank pages don't start with the Galley Overlay Text using the page description and I cannot figure out how to add it. 

You can see this on my site here: https://hallevandehey.com/-0011649840290_ScreenShot2021-01-30at12_00_59PM.thumb.png.b9456d24d1b68aba23de82e7a350b760.png

 

Does anyone know how to fix this? 

 

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Okay! I added text intros on both https://hallevandehey.com/-001 and https://hallevandehey.com/mta but I am not finding any way to animate the text like it is on the other pages. 

Thank you so much for taking the time to help me with this!! I think I may be doing something wrong when applying it into the page header code injection on my site. 

put it in Design->Custom Css

Posted Images

11 answers to this question

Recommended Posts

  • 0
10 hours ago, HalleVanDeHey said:

Site URL: https://hallevandehey.com

The gallery pages on my template come with a built in Gallery Overlay Text. When I add a page description, it automatically shows up at the top of the page. 

You can see this on my site here: https://hallevandehey.com/sonoslive1685587462_ScreenShot2021-01-30at12_00_48PM.thumb.png.01b4ae332f73ffb7a2730213ece95c24.png

I added two pages to my website using the blank page instead of the gallery page. The blank pages don't start with the Galley Overlay Text using the page description and I cannot figure out how to add it. 

You can see this on my site here: https://hallevandehey.com/-0011649840290_ScreenShot2021-01-30at12_00_59PM.thumb.png.b9456d24d1b68aba23de82e7a350b760.png

 

Does anyone know how to fix this? 

 

In blank page could you add text block instead? the way description show up is based on the template

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

Yes, I could do that and it would partially solve the problem. It doesn't seem there is any way to add animation to the text to make it look and feel the same as the gallery pages though.

I'll give it a try so you can see the difference! 

Link to post
  • 0
16 hours ago, HalleVanDeHey said:

Okay! I added text intros on both https://hallevandehey.com/-001 and https://hallevandehey.com/mta but I am not finding any way to animate the text like it is on the other pages. 

Screen Shot 2021-01-31 at 10.32.21 AM.png

I made a css trick, tell me if you find it good enough

#block-yui_3_17_2_1_1612109807034_27719 {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    z-index: 99999;
    background: #fff;
  
    -webkit-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -moz-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -ms-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -o-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
}
#block-yui_3_17_2_1_1612109807034_27719 .sqs-block-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  
    z-index: 220;
    -webkit-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -moz-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -ms-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -o-transition: transform 400ms ease, opacity 250ms 100ms ease;
    transition: transform 400ms ease, opacity 250ms 100ms ease;
}
.site-header.hide-header + #mainContent  #block-yui_3_17_2_1_1612109807034_27719 {
   opacity: 0;
    
}
.site-header.hide-header + #mainContent  #block-yui_3_17_2_1_1612109807034_27719 .sqs-block-content {
   opacity: 0;
  -webkit-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -moz-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -ms-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -o-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  transform: translate(-50%,-50%) translate3d(0,-60px,0);
    
}

#block-yui_3_17_2_1_1612109807034_27719 is the unique block id of the text

You can extract it using this extension: Squarespace ID Finder - Chrome Web Store (google.com) and replace it accordingly if you want to apply for other page

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
On 2/1/2021 at 8:55 AM, HalleVanDeHey said:

Thank you so much for taking the time to help me with this!! I think I may be doing something wrong when applying it into the page header code injection on my site. 

Screen Shot 2021-02-01 at 9.53.30 AM.png

Do you still need help?

Link to post
  • 0
On 2/1/2021 at 3:08 AM, bangank36 said:

I made a css trick, tell me if you find it good enough



#block-yui_3_17_2_1_1612109807034_27719 {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    z-index: 99999;
    background: #fff;
  
    -webkit-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -moz-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -ms-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -o-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
}
#block-yui_3_17_2_1_1612109807034_27719 .sqs-block-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  
    z-index: 220;
    -webkit-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -moz-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -ms-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -o-transition: transform 400ms ease, opacity 250ms 100ms ease;
    transition: transform 400ms ease, opacity 250ms 100ms ease;
}
.site-header.hide-header + #mainContent  #block-yui_3_17_2_1_1612109807034_27719 {
   opacity: 0;
    
}
.site-header.hide-header + #mainContent  #block-yui_3_17_2_1_1612109807034_27719 .sqs-block-content {
   opacity: 0;
  -webkit-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -moz-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -ms-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -o-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  transform: translate(-50%,-50%) translate3d(0,-60px,0);
    
}

#block-yui_3_17_2_1_1612109807034_27719 is the unique block id of the text

You can extract it using this extension: Squarespace ID Finder - Chrome Web Store (google.com) and replace it accordingly if you want to apply for other page

Thank you so much for taking the time to help me with this!! I think I may be doing something wrong when applying it into the page header code injection on my site. 

1386476059_ScreenShot2021-02-01at9_53_30AM.png.afa23cb3f2471981e4ddc485b06669f1.png

Link to post
  • 0
5 hours ago, HalleVanDeHey said:

Thank you so much for taking the time to help me with this!! I think I may be doing something wrong when applying it into the page header code injection on my site. 

1386476059_ScreenShot2021-02-01at9_53_30AM.png.afa23cb3f2471981e4ddc485b06669f1.png

put it in Design->Custom Css

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
On 2/3/2021 at 8:39 PM, bangank36 said:

put it in Design->Custom Css

Oh wait! I just realized that once you reach the bottom of the page it takes you back to the top. Is there a way for it to stay at the bottom so you can see the tabs again? It should look like this at the bottom of the page.

Screen Shot 2021-03-01 at 9.07.58 PM.png

Link to post
  • 0
On 3/1/2021 at 9:08 PM, HalleVanDeHey said:

Oh wait! I just realized that once you reach the bottom of the page it takes you back to the top. Is there a way for it to stay at the bottom so you can see the tabs again? It should look like this at the bottom of the page.

Screen Shot 2021-03-01 at 9.07.58 PM.png

Hey! @bangank36 I know you are very busy, but I would love your help with this problem when you have time. Thank you so much for your help.

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...