Jump to content

Patterson

Circle Member
  • Posts

    123
  • Joined

  • Last visited

Posts posted by Patterson

  1. Hello! I am looking to drop how my navigation folders currently sits on my site to them more of a cleaner look. I have 3 items I am looking to complete that I haven't been able to do on my own yet.

    • Currently you will notice the gray folder bg cuts appears too close to the main nav, it also cuts off some of the bottom of the text. If this could be dropped that would be great. 
    • How can I add a light stroke around the gray folders - preferably wanting the color to be #005aaf?
    • How can I remove the symbol/icon next to the two folders currently on my navigation

    Thanks in advance for any assistance, it is greatly appreciated.

    The url is - bemconc.com / PW - wolf

  2. @ZiggySure thing - listed below from here and edited https://fonts.google.com/icons

    Code injection for header - 

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

     

    CSS For Icons

    /////

    .material-symbols-outlined {
      font-size: 10rem!important;
      color:#005aaf;
      position: center!important;
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 48
    }

    /////

    Content in the code block 

    <div style="text-align: center;">
    <span class="material-symbols-outlined">
    workspace_premium
    </span>

     

    Below is what is looks like in preview. 

    image.thumb.png.e172c5f51af069e79b2026cad4bfbd80.png

  3. The Google icon's code block on the linked site (PW - "321"     is messing Up Section 4 of this site on the homepage. While the section and alignment looks perfectly fine in editor mode, when the site is published it doesn't show any of the section properly and shoots it down the screen. The icons are placed in using code blocks and the are found on the google icon library. 

     

    Any help with this is greatly appreciated, thank you in advance!

  4. 4 hours ago, paul2009 said:

    If an event occurs at the same time on several days, the workaround is to create an event for the first day and then duplicate the event, changing the date for each duplicate. This will ensure the times are clearly shown for each day.

    Did this help? Please give feedback by clicking an icon below  ⬇️

    Gotcha, understood, I have done this in the past it unfortunately confused people and messed with our registration process as the same form couldn't be on multiple event pages (unless I am wrong).

    Thanks @paul2009

  5. Hey @Ziggy - you may be able to help with this topic as well. 

    Please see my comment on this post... 

    the url for mysite I am dealing with is https://www.coastalathletics.net/events but we would also need to have the change made on individual post pages that are multiple days such as this one. https://www.coastalathletics.net/events/summer-camp-week-1-2023

    If we are not able to do what I am requesting above, I would like to just remove on these post I guess, but this is not ideal.

    Thanks in advance for any help!

  6. I too have events that last multiple days with a same time frame for each day and I would like the ability to show that on our post for the events. People are getting confused when visiting the site asking it it is an overnight camp. Looking forward to getting this resolved, hopefully squarespace will address this issue soon.

  7. 16 hours ago, tuanphan said:

    Try this new code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() { 
    		$('div.eventitem-column-content .columns-12 .span-12>.image-block:first-child').insertBefore('.sqs-events-collection-item.events-item');
    	});
    </script>
    <style>
     div.events-item-wrapper .columns-12 .span-12>.image-block:first-child figure {
        max-width: 100% !important;
    }
      div.events-item-wrapper .columns-12 .span-12>.image-block:first-child {
        padding: 0 !important;
    }
    div.events-item-wrapper .columns-12 .span-12>.image-block:first-child .has-aspect-ratio{
      padding-bottom: 30% !important;
    }
    </style>

     

    This looks sharp. Thanks for getting this capability added. Do you have any recommend changes for further making better?

  8. 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?

  9. 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. 

    Screen Shot 2022-06-28 at 6.29.34 PM.png

  10. On 6/20/2022 at 11:07 PM, tuanphan said:

    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() { 
    		$('div.eventitem-column-content .image-block').insertBefore('.sqs-events-collection-item.events-item');
    	});
    </script>
    <style>
     div.events-item-wrapper .image-block figure {
        max-width: 100% !important;
    }
      div.events-item-wrapper .image-block {
        padding: 0 !important;
    }
    div.events-item-wrapper .has-aspect-ratio{
      padding-bottom: 30% !important;
    }
    </style>

     

    Hey @tuanphan,  Thanks for this! This also pulls the 2nd image on the page as well. Is there any way to only impact the first image on each event?

  11. 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

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