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?