Is there a way to move a button to under the address where the event info is on event post?

Site URL: https://www.coastalathletics.net/events

Hey! On my event pages on the link listed above, I have form buttons placed on each page to collect registrations. I would love to have these placed in a more centralized location under the address of each event-specific post. I have searched for this capability and tried writing some code but have had no luck. Please let me know if you have questions, any help is greatly appreciated. 

Best,

Patterson

You mean move button to this?

On 6/20/2022 at 11:39 PM, tuanphan said:

You mean move button to this?

Yes! That way it would be more prominent and easy to locate. 

Would be great to have it span the width of the text/column as well. 

Thank you!

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('.tweak-events-stacked-height-small .events .form-block').insertAfter('ul.eventitem-meta.event-meta.event-meta-address-container');
	});
</script>

This is perfect, thanks! I like this how it is, but would it be hard to have the button still remain present at the bottom. On second thought, it would be cool to have the same button with same functionality and form show in 2 spots to ensure always seen. Thanks.

8 hours ago, Patterson said:

This is perfect, thanks! I like this how it is, but would it be hard to have the button still remain present at the bottom. On second thought, it would be cool to have the same button with same functionality and form show in 2 spots to ensure always seen. Thanks.

You mean keep 2 buttons, under address & under event description?

9 hours ago, tuanphan said:

You mean keep 2 buttons, under address & under event description?

Yeah, Keeping the same button, having the same functionality, in the spot where it is now under the address but also where it was prior under the event description. Just a thought, that could be cool to have. 

Hey @tuanphan

I also wanted to see if you could fix the positioning of the button as it is too far to the right and not aligned left or centered with the content, please see the attached image. Thanks!

In response to prior message, Yeah, Keeping the same button, having the same functionality, in the spot where it is now under the address but also where it was prior under the event description. Just a thought, that could be cool to have. 

Hi. Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('.tweak-events-stacked-height-small .events .form-block').clone().insertAfter('ul.eventitem-meta.event-meta.event-meta-address-container');
	});
</script>
<style>
  .eventitem .form-block div {
    text-align: left;
}
</style>

19 hours ago, tuanphan said:

Hi. Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('.tweak-events-stacked-height-small .events .form-block').clone().insertAfter('ul.eventitem-meta.event-meta.event-meta-address-container');
	});
</script>
<style>
  .eventitem .form-block div {
    text-align: left;
}
</style>

 

@tuanphan - this is perfect on all the camps except the ones marked for Yoga such as this link, https://www.coastalathletics.net/events/serene-flow-yoga, Do you mind having the adjustment made on all? thanks! 

Do you mind telling me how you were able to write that code? And will it work for other sites?

On 7/1/2022 at 10:29 AM, Patterson said:

@tuanphan - this is perfect on all the camps except the ones marked for Yoga such as this link, https://www.coastalathletics.net/events/serene-flow-yoga, Do you mind having the adjustment made on all? thanks! 

Do you mind telling me how you were able to write that code? And will it work for other sites?

The url doesn't exist

9 hours ago, tuanphan said:

The url doesn't exist

Sorry, it was it past so took it down, use this one. https://www.coastalathletics.net/events/serene-flow-yoga-07-19-22

On 7/2/2022 at 11:25 PM, Patterson said:

Sorry, it was it past so took it down, use this one. https://www.coastalathletics.net/events/serene-flow-yoga-07-19-22

You mean it not align left? Add this to Design > Custom CSS

ul.eventitem-meta.event-meta.event-meta-address-container+div#block-8fbb83f502b5e72dd946 {
    float: left;
}

On 7/4/2022 at 7:02 PM, tuanphan said:

You mean it not align left? Add this to Design > Custom CSS

ul.eventitem-meta.event-meta.event-meta-address-container+div#block-8fbb83f502b5e72dd946 {
    float: left;
}

 

Not particularly, I was hoping to fix the position of the clone to be lined up with the other event info text.

On 7/5/2022 at 6:02 AM, tuanphan said:

You mean it not align left? Add this to Design > Custom CSS

ul.eventitem-meta.event-meta.event-meta-address-container+div#block-8fbb83f502b5e72dd946 {
    float: left;
}

 

On 7/2/2022 at 11:25 PM, Patterson said:

Sorry, it was it past so took it down, use this one. https://www.coastalathletics.net/events/serene-flow-yoga-07-19-22

The url doesn't exist now

@tuanphanAPOLOGIES, once again! https://www.coastalathletics.net/events/serene-flow-yoga-07-21-22

14 hours ago, Patterson said:

@tuanphanAPOLOGIES, once again! https://www.coastalathletics.net/events/serene-flow-yoga-07-21-22

Add to Design > Custom CSS

ul.eventitem-meta.event-meta.event-meta-address-container+ .form-block {
    float: left;
}

@tuanphanThank you!

Hi, I'm trying to get this to work on our site which is still running v7 but its not working.  I guess because the button needs to be created?  Please can anyone help?

https://walrus-springtail-ljhd.squarespace.com/workshop-events/novemberworkshop

pw: 1mageproblem

thanks

20 hours ago, Nikitaly said:

Hi, I'm trying to get this to work on our site which is still running v7 but its not working.  I guess because the button needs to be created?  Please can anyone help?

https://walrus-springtail-ljhd.squarespace.com/workshop-events/novemberworkshop

pw: 1mageproblem

thanks

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('.eventitem-column-content .button-block').clone().insertAfter('ul.eventitem-meta.event-meta.event-meta-address-container');
	});
</script>

Fantastic.  Works perfectly.  Thank you again!

Hi @tuanphan. Sorry to ask you this, but would you mind making that code for my page here https://www.holacracy.org/events/practitioner-training-test (pw: events) ?

I tried using the scripts above, and changing the css class selectors to match my context (I want to place the Source URL underneath the content in the left sidebar - I will style with as a button later with CSS), but it didn't work and I'm not sure why...

Thank you if you're willing

On 10/21/2022 at 2:17 PM, George said:

Hi @tuanphan. Sorry to ask you this, but would you mind making that code for my page here https://www.holacracy.org/events/practitioner-training-test (pw: events) ?

I tried using the scripts above, and changing the css class selectors to match my context (I want to place the Source URL underneath the content in the left sidebar - I will style with as a button later with CSS), but it didn't work and I'm not sure why...

Thank you if you're willing

I see you are using CSS code to add button. Why dont you use Button Block?

@tuanphan Because I don't want my users to have to create a button, I'd rather them just having to enter the URL in the "Source URL" field. Less options, less room for error. 

On 10/23/2022 at 9:20 AM, tuanphan said:

I see you are using CSS code to add button. Why dont you use Button Block?

The url doesn't work now