dnmddy

On 4/20/2024 at 5:37 AM, tuanphan said:

I don't see (+) button. Can you take a screenshot?

absolutely, the example (+) is shown here:

You can do this with basic HTML in the caption field. try this:

<i>𝑇𝑟𝑒𝑒 𝑃𝑒𝑜𝑝𝑙𝑒</i>
<br>
Acrylic on canvas 12" x 16" 
<br>
$250

https://aia-24.squarespace.com/art-1-1
PW: notyet

You can see the first image block has a (+) button example, and the following white text blocks are all on top of images of the same size. What I'm hoping to achieve is all image blocks are visible and the text blocks overlaying them are hidden until the (+) button is hovered on, then that images text block appears. it should be the forward most block so that it is on top of the pinned block in the center, and the link in the text box should be clickable. The text block should disappear again when mousing off the image boundary.

I have looked everywhere I can think of to find a plugin that I might be able to adapt to make this work, but no luck.

I'm guessing this would be a code block on top of each image, with the button and caption content inside the code block? I would also like to be able to specify each time if the (+) button is on the bottom left or bottom right. Super extra points if the text box "grows" out of the button as focal point to fill the block parameters!

Can anyone help me code this? 

@tuanphan to the rescue yet again!

can you share a screenshot highlighting which content you're trying to hide? 

please share a link to the page on your site!

try clearing your cache and trying again?

I have a gallery block with 5 images. On mobile, I have it set to break at 3 across, giving 2 on the second row. Is it possible to center the second row?

https://sycamorecollab.org/map

Lovely. Perfect. Thank you @sorca_marian!

Nice! That is really close to perfect, except on the rest of my pages I do have the logo showing in the header and the alignment is off.

Thank you so much for your quick help!

if they are set up as two different blogs in your pages panel, you can add the code to the advanced PAGE HEADER CODE INJECTION instead of your main site css. Just make sure to wrap your css in <style></style>

Can anybody help me order and stack the header actions components? At about 1160px wide, when the main nav stacks on the left, I want the header actions to stack on the right, but also change order: social media icons, button, language switcher. I'd also like the social media and language switcher to be centered above and below the button, but the button should remain aligned right...

https://sycamorecollab.org/

Here is a screen shot of how I want it to look:

I found this solution in another thread: 

.TextShape-node {
  margin-top: 10px; // edit this //
}

I'm having the same issue. Did you find a solution?

is this too hacky or does it seem okay @tuanphan

https://www.transanta.com/

.header-title-logo img {
	border: 1px solid #999;
    border-radius: 200px;
}
.header-title-logo a:after {
    content: "Transanta";
    display: inline-block;
    font-size: 24px;
    text-align: center;
    vertical-align:middle;
    font-weight:600;
    padding-left: 90px;
    margin-top: -70px;
}
.header-title-logo img {
    vertical-align: middle;
}

Any way to apply that code to my site? Or any better solution???

https://supportcalvarymemphis.org/

On 7/28/2022 at 1:21 PM, mirgart said:

Is there a code to have multiple colors scrolling? Would you use nth-child in the code? 
I have three items listed in my marquee and I'd love to have each item be a different color while it's scrolling. Could you help me with that, @tuanphan?

I have the same question! Would like to use two different colors in my scrolling marquee

Thank you @tuanphan that works perfectly 

5 hours ago, tuanphan said:

You can remove the code. Then we will check it again

removed it

On 5/26/2022 at 6:19 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $("div#block-5f739344ad87578c7e22 .summary-item").click(function(){
		window.location=$(this).find("a").attr("href"); 
		return false;
	});
</script>
<style>
  div#block-5f739344ad87578c7e22 .summary-item:hover {
    cursor: pointer;
}
</style>

 

This is working except it's making the whole summary item link to the map link instead of the title/post. I am using the location field for displaying the city/state, but I dont want it or anything to link to a map. Can the JS be changed to pull the title link for the whole item instead of the map link?

12 hours ago, tuanphan said:

With Personal Plan, you can enable read more, then I will give code to make link cover whole box + make read more transparent

With Business Plan, let me know, I will give code to make title link cover whole box

That's great! Business plan solution, please! 

7 hours ago, tuanphan said:

Use this code

div#page-section-6286620aa09a760a1808b080 .summary-excerpt.summary-excerpt-only {
    position: absolute;
    bottom: 0;
}

 

thank you @tuanphan! Do you know if it's possible to make the entire block link to the post?

On 5/20/2022 at 7:41 PM, tuanphan said:

Can you share link to page where you use summary? We can check easier

of course: https://vc3.squarespace.com/clients-grid
password: notyet

4 minutes ago, creedon said:

The code won't work with Lazy Summaries.

FWIW, I just deactivated Lazy Summaries on that block and it's still not working.

1 minute ago, creedon said:

The code won't work with Lazy Summaries. When the code runs that are no summary items on the page yet.

You need to use LS's Advanced options to do what you want. It is not easy.

Ah, that makes sense. Thanks for pointing that out. 

Re: "It is not easy"... yeah, that advanced section is over my head!