EnrichedEducator

Glad I could help! Let me know how it works out 🙂

Site/page url: https://www.theenrichededucator.com/workshops/in-person-on-site-training Hello, I offer add-on services to my products (services). One add-on service I provide is "in-person/on-site training". I travel for my consulting services, so I would like to be able to automatically determine the additional cost for potential clients I'd serve outside of the Atlanta, GA area. Ideally, a visitor would be able to enter their zip code and an updated calculated cost of the add-on service would appear and they can add it to their cart (named "registration" on my site). I've looked around for possible solutions and I think I might need to go with some type of API (such as this one). I imagine this would work something like this: Visitor enters zip code The API would calculate the distance between my zip code and theirs, then pass the distance back to my site. Use the distance to calculate the cost based on my table (pictured in screenshot below) Distance displays on the page The new cost updates and displays on the page Client adds service (with the updated/correct cost) to cart/registration I'm not sure where to start or how to get this going and would appreciate any help.

Correct! I think I figured it out for desktop view. On mobile it is still looks horrible, so I've replaced it with a different version. Here is the link to the page (see the "core values" section). https://www.theenrichededucator.com/aboutus If you can help me figure out how to keep the circle images on the left from changing positions when the screen adjusts to a smaller width, that would be really helpful! Ideally, I'd like to keep the images displayed 2X2 regardless of the screen width. Here's my updated code: //Core Values Module - desktop// #block-yui_3_17_2_1_1709813932004_17418 { //description formatting .sqs-gallery-block-slideshow .meta { background-color: transparent!important; pointer-events: none; width:200%!important; overflow: visible !important; display:block!important } .sqs-gallery-block-slideshow .meta-inside { padding: 0px!important; } .sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p{ color:black!important; font-size: 18px!important; line-height:1.2em!important } .meta-title { color:#990000!important; font-family: 'Violine'!important; font-size: 30px; line-height:1.2em } //make description non-click .sqs-gallery-block-slideshow { pointer-events: none; } //main image .sqs-gallery-design-stacked-slide img{ opacity:0!important } //gallery container position and style .sqs-gallery-design-stacked { display: flex; height:300px!important; background-color:white!important; } .sqs-gallery-design-stacked-slide { order: 1; width: 100%; height: 100%; margin-left: 40%; } .sqs-wrapper { position:static; overflow:visible!important; display: flex; flex-wrap: wrap; margin-left: 24px; } //thumbnails positioning .sqs-gallery-design-strip { margin-left: 0; max-width: 70%; position: absolute; height: 100%; top: 0 !important; overflow:visible!important; display: flex; flex-wrap: wrap; } .sqs-gallery-design-strip-slide { margin-left: 0; width: 100%; } // thumbnails style .sqs-gallery-design-strip-slide { opacity: 1!important; margin-right: 10px; margin-left: 10px; border: 5px solid white!important; border-radius: 50%; } .sqs-gallery-design-strip-slide:hover { background-color:#e7e6e6!important } .sqs-gallery-design-strip-slide.sqs-active-slide { background-color:#e7e6e6!important; border: 5px solid black!important; border-radius: 50%; padding: 2px!important } }

Hi, I know I am very delayed in my response, but here is the code I am using. Since my original post, I have made some additional updates to my navigation bar. I've pasted my updated code below. I hope this helps! //NAVIGATION BAR// // Hide index link from nav bar // a[href="/sip-the-tee-1"]{pointer-events: none;}; a[href="/about-nav"]{pointer-events: none;} a[href="/what-we-do-1"]{pointer-events: none;} //static floating header// .Header {border-bottom: 2px solid gray;} @media screen and (min-width: 768px) { .Header {position: fixed; z-index: 9999; width: 100%; top: 0px;} .Content-outer {margin-top: 100px;} } //--- Add a border between links: .Header-nav-folder a {border-bottom:1px dotted gray} //--- Increase the space between links: .Header-nav-folder a {padding-bottom:.5rem!important; } //--- give drop down list a shadow: .Header-nav-folder{box-shadow: 5px 5px 15px rgba(0,0,0,0.5)} .Header-nav-folder{background-color:white!important} //--- active link highlight---// .Header-nav-item {margin: 10px!important; padding: 5px!important;} .Header-nav-item:hover {border: 2px solid #990000!important;} .Header-nav-item.Header-nav-item--active {background: #990000!important; color: white!important} .Header-nav-folder-title.Header-nav-folder-title--active{ color: white!important; background-color: #990000; padding-left: 6px; padding-right: 5px; border: 4px solid #990000; margin-left: -5px!important; margin-right: -5px; margin-top: -2px;} //--- grey highlight folder link on hover---// .Header-nav-folder-item:hover {background-color: #e7e6e6!important}

Hello, I am working on designing my gallery slideshow into somewhat of a "module" using some custom CSS. The goal is to have site visitors click on a thumbnail and see the description of the image. I have gotten pretty close to my desired outcome. Here's what I've done so far: Hid the main (big) image so only the thumbnails and image description are visible. Designed the image thumbnails and moved them to the left of the main (big) image. Designed the image description and moved it to the right of the thumbnails. But I am running into a hiccup; see below and attached screencast. When I first click on a thumbnail the description appears at the very top (beyond the margin actually). Then, when I click on that same thumbnail again (after clicking on a different thumbnail first) the description loads in the correct position (vertically centered with the thumbnails). How can I keep the image description from initially loading beyond the top margin? I want to be able to click on a thumbnail for the first time and the description appears vertically centered in the correct position. Here is my code: #block-yui_3_17_2_1_1709700216968_1936 { //hide main image .thumb-image { visibility:hidden; background-color:white!important; } // description .sqs-gallery-design-stacked-slide { z-index:1; padding-top:10px!important; padding-bottom: 10px!important; } .sqs-gallery-block-slideshow .meta { position: inherit!important; top: 0 !important; left: 50% !important; background-color: white!important; overflow: visible!important; min-width: 40% !important; max-width: 80px; margin-left: -75px!important; pointer-events: none; } .sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p{ color:black!important; font-size: 24px; line-height:1.2em } .meta-title { color:#990000!important; font-family: 'Violine'!important; font-size: 40px; line-height:2em } .sqs-gallery-block-slideshow { pointer-events: none; } // thumbnails look .sqs-gallery-design-strip-slide { opacity: 1!important; margin-right: 10px; margin-left: 10px; border: 5px solid white!important; border-radius: 50%; } .sqs-gallery-design-strip-slide:hover { background-color:#e7e6e6!important } .sqs-gallery-design-strip-slide.sqs-active-slide { background-color:#e7e6e6!important; border: 5px solid black!important; border-radius: 50%; padding: 2px!important } //thumbnails position .sqs-gallery-design-strip .sqs-wrapper { width: 200% !important; left: 50% !important; top:-75%!important; display: flex; flex-wrap: wrap; } .sqs-block .sqs-gallery-thumbnails .sqs-gallery-design-strip-slide { width: 20% !important; } .sqs-gallery-design-stacked { position: static; text-align: left; height: 100px !important; } .sqs-gallery-design-strip { overflow: visible !important; width:20%!important; z-index:9998!important; margin-bottom: 30px!important } } Here is the link the to screencast: https://www.loom.com/share/2d3037425e414b6db57690f9feb1e2c7?sid=085158a3-8a70-4bf6-839a-cd701598df2b Here is the attachment of the screencast: Screen Recording 2024-03-06 at 11.18.05 AM.mov

Yup! Thank you

Site URL: https://www.theenrichededucator.com/our-services Hi, I'm wondering if it is possible to hide/mask the anchor links url in the address bar ? I have a few anchor links throughout my site and when a visitor clicks on the anchor link to scroll to another page in the index, the url in the address bar changes to the anchor link's url. I'd like the address bar url to remain the same. For example, as seen in the screenshots below, on my services page, a visitor can click the "Coaching & Development" anchor link to scroll to that section. Once clicked, I'd like the url in the address bar to still say "https://www.theenrichededucator.com/our-services" and not "https://www.theenrichededucator.com/our-services#coaching-home" Picture 1. Hovering over the anchor link Picture 2. After clicking the anchor link

Site URL: https://www.theenrichededucator.com/summer-intensive Hello, I have made my own page for a product (service) that I am offering: https://www.theenrichededucator.com/summer-intensive In the programming section, I've added a product block so that the client can register there instead of going to the original product page. The product block only has the price and register button shown -everything else is hidden via CSS or the native settings. Once clicking the "register" button my Custom Product Form pops up to gather registration details. I would like help with figuring out how to redirect the customer to the cart or to the checkout page after completing the Custom Product form and pressing "Register" at the bottom. I do not want to enable "express checkout" because it would be applied site-wide and I do not want this applied to other products I sell on my site. Is this possible to do with a script or some CSS?

Yup! With a little perseverance and trial and error, I think I found out a solution that would look good on most devices (perhaps not landscape mobile or portrait tablets). I add the tags as meta data to the summary blocks and used a bit of code to make the "free" tags say "FREEBIE!" and then played around with the margins to cover the $0.00 price

Hi @tuanphan I have this same wondering. I have a summary block of items but I'd like the items with the tag "free" to hide/replace the "$0.00" with the word "FREEBIE!". I've figure out how to do this on the actual product page but not for the summary block itself. The page is www.theenrichededucator.com/resources

Was a solution for this found?

Thank you so much for trying. I also noticed after I applied your code, one of the featured products behaved the way I wanted it and the other did not. I will go through my CSS to see if I have something there affecting that block. I appreciate your help.

URL: www.theenrichededucator.com/resources-sandbox Ideally, I'd like to disable the image clickable url while keeping "Quick View" enabled. I'd like this done for the "Featured Resources" two products. I've tried using the "pointer-events: none" but it does it for the whole thing and not just the picture/image. You'll be a lifesaver if you can help me achieve this!

how can I do this but still keep the Quick View button enabled/clickable?

@tuanphan @creedon do you think this is something you could help with?

Site URL: https://www.theenrichededucator.com/resources I am using the Lightbox Anything plug in from Sqspthemes. I need some help/guidance with an issue I am encountering with the Upsell feature. I have a resources page: https://www.theenrichededucator.com/resources with a few products that I offer. Using the Upsell feature I was able to create a pop-up lightbox that prompts the customer with options to "go to cart" or "continue shopping" after they have added an item to the cart. The issue is that this only works when the item is added directly from the product page. What I am trying to figure out is how to either: have the Upsell Box to display when a customer adds the item to their cart within Squarespace's "Quick View" lightbox, or take the customer to their shopping cart after adding an item to their cart within Squarespace's "Quick View" lightbox. Is there some CSS or a script to achieve this? Here's a screencast of both scenarios (adding via Quick View and adding via Product Page). Screen Recording 2022-04-20 at 12.34.19 PM.mov

Site URL: https://www.theenrichededucator.org/ Hi, I would like to create a page on my site with a sticky scroll like the one in this video. I am using Brine 7.0. The video only shows how to do this for 7.1. Are there creative CSS tricks to help me achieve this?

Hey @AussieAudio I didn't quite achieve what I was looking for, but found a decent workaround/substitute if you're interested. It took some time, but if you're up to it.... what I did was: 1. Added some text to the bottom of the podcast entry post ("listen now") and hyperlinked it to my audio player, which is a buzzsprout player that embedded into the Content of the post. I grabbed the audio player's #blockID to use as the "Source Url" of the post (this will be important for the lightbox to work properly). 2. Using some Custom CSS, I swapped the "Listen Now" hyperlinked text with a background image of a "Listen Now" button. This is what will be displayed in the Summary Block. [see below] Note: make sure in your summary block, you have the "excerpt" option toggled on, otherwise your button won't display. 3. Used the "Lightbox Anything" plug in to make all of my new "Listen Now" buttons pop up with my audio player. [This is easy but you would need your own code that the creators of the plugin provide.] This is the last step. You can take a look at how it works here: www:theenrichededucator.org/podcast.

Site URL: https://www.theenrichededucator.org/ Hello, I am trying to figure out some CSS that will highlight the appropriate item on my header/navigation bar with a visitor is currently on one of the pages in the folder. I have switched the Style Editor setting to "Active" already. This works for regular pages in my navigation bar; turns the item from Red font to Black font when the visitor hovers and/or is currently on the page. However, this effect does not work when the visitor is on a page within a folder; the hover effect works but the Navigation Item doesn't stay in Black font. I should note that the pages within my dropdown folders are links to non-linked pages in my site. I am using Brine 7.0 and have some basic/intermediate knowledge of CSS. My ideal outcome would be (using the screenshot below): The visitor is currently on the HOME page, which in the nav bar "HOME" is in Black font. The visitor is also currently hovering over "WHO WE ARE", which is also in Black font on the nav bar. Currently, what happens when the visitor clicks on "OUR TEAM", the visitor will be taken to that folder link (which is an anchor text within a non-linked index page) and the nav bar item "WHO WE ARE" stays in Red font. What I'd like to happen when the visitor is on this page (and others like it) is for the nav bar item to be in Black font. Is this achievable with some CSS?

Site URL: https://www.theenrichededucator.org/podcast Hi, I am using a summary block to style my blog page (which is for my podcast episodes). I'm wondering if there is a way to include the audio block in the summary block for each blog/podcast entry? Right now I am using some CSS code to replace the "read more" link with a "listen now" image button. But ideally I'd just like to completely remove the read more link and have my actual Audio Block included in the body of the summary item. Is there some code that would help me achieve this?