-
Posts
25 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by mgcreative
-
I'm not skilled in javascript at all, so could someone help me figure out how to edit the script I'm using to remove the mobile link? I just want it to be clickable on desktop and not have the 'All "Folder Name"' on mobile. Thanks! Site PW: SCALE https://crocodile-perch-3bhz.squarespace.com/ <script> (function () { let folders; function rebuildAnchor(folder) { let parent = folder.closest('.header-nav-item--folder'), href = folder.href.includes('.com') ? folder.href.split('.com')[1].replace("-folder/", "") : folder.href.replace("-folder/", ""), anchorClone = folder.cloneNode(true); anchorClone.classList.add('clickable-folder'); anchorClone.setAttribute('href', href); anchorClone.style.cssText = ` opacity: 1; transform: unset; `; parent.insertAdjacentElement('afterbegin', anchorClone); if (href == window.location.pathname) { console.log() anchorClone.closest('.header-nav-item--folder').classList.add('header-nav-item--active') } } function addToMobile(folder) { let href = folder.getAttribute("href"), hrefAdjusted = href.includes('.com') ? href.split('.com')[1].replace("-folder/", "") : href.replace("-folder/", ""), text = folder.innerText, newText = `All ${text}`, mobileFolder = document.querySelector(`[data-folder="${href}"]`), backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type"), allButton = `<div class="container header-menu-nav-item header-menu-nav-item--external"> <a href="${hrefAdjusted}">${newText}</a> <div>`; backButton.insertAdjacentHTML('afterend', allButton) } /* Select All Folder Links & */ function setFolderLinks() { folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]'); for (let folder of folders) { window.addEventListener('load', function() { addToMobile(folder); rebuildAnchor(folder); folder.remove(); }); } } setFolderLinks(); })(); </script>
-
Add Gradient Overlay Top to Bottom on Blog Header Image
mgcreative replied to mgcreative's topic in Customize with code
Thank you so much! Since this code affects the header nav (and not the blog post featured image), and it's a split screen section, I just adjusted the gradient angle and only made it go halfway across. It's not perfect but it does the job! Here's the adjusted code I used if anyone is interested. body[class*="type-blog"].view-item header#header { background-image: linear-gradient(175deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0) 60%); } -
Add Gradient Overlay Top to Bottom on Blog Header Image
mgcreative replied to mgcreative's topic in Customize with code
Small world!! Thanks, I'll take a look at the latest one. -
Typewriter & delete effect? TypeIt or something similar
mgcreative replied to SheriM's topic in Customize with code
It also broke my full width background, and I removed this section (and tried it with it included), but it's still adding padding to each side. Any fix? @tuanphan Site is: https://crocodile-perch-3bhz.squarespace.com/about (PW: SCALE) i -
Hi, I'm trying to add an overlay gradient (black) from top top bottom just on the header image of a blog - so that the logo in the top left corner is visible even when the photo is light. I'm using this code, but adjusted so it's left and right split. https://www.will-myers.com/articles/adding-a-banner-image-to-a-blog-in-squarespace-71 Site is: https://turbot-cranberry-rn5c.squarespace.com/resources/article-titleto-go-here-wkjfr-bs59n Password CPI Screenshot attached. Thanks!
-
Removing underline from top navigation dropdown
mgcreative replied to Jaded0403's topic in Customize with code
I'm trying to do the same thing! Remove the active style from the folder... I just posted about it here: -
Trying to make just the folder navigation stay highlighted (like my hover state). And I was able to achieve it, but I don't want the folder contents to also be highlighted (the standard active underline is fine, but not the background). This is as far as I got with code, but I can't figure out how to exclude the folder contents. Password: SCALE https://onion-copper-fxzk.squarespace.com/ .header-nav-wrapper .header-nav-item--active a { padding: 5px 8px !important; background-image: none !important; transition: all ease-in-out .05s !important; } .header-nav-wrapper .header-nav-item--active a { background: #E5EBEE; color: #082F4E; padding: 5px 8px; border-radius: 8px; transition: all ease-in-out .05s !important; } :not(.header--menu-open) .header-nav-wrapper .header-nav-item--active a { color: #082F4E; }
-
I'm having trouble with a client's Acuity Scheduler in regards to the Google Calendar Sync. Her email address/Google Workspace is the one that's connected to her Acuity, but my email address is showing up on her appointments. See screenshot below. They are her events, but I'm trying to understand why my email is showing up? Mine is the "work@morgangrantcreativ..." Thanks!
-
- calendar
- scheduling
-
(and 1 more)
Tagged with:
-
Hey Vanessa, I did not! But I'll post here if I do. 🙂
-
I'm trying to achieve a sticky scroll background image on portfolio pages (https://mg-creative.squarespace.com/projects/kaylee-cook-design and https://mg-creative.squarespace.com/projects/hayley-alexandra-events). I also have a full site border, and on the pages where something is sticky, the image is showing up on the top, bottom and left sides where the border should be. I have a bit of code on this site, so trying to figure out what needs to be adjusted! Thanks! Below are the codes I'm using for both site border and sticky sections. //Add Site Border body:not(.sqs-edit-mode-active) { &, #header { border: clamp(12px,4vw,15px) solid #534A3A; transparency: none; z-index: 999!important; } #header { border-bottom: none; } } //Portfolio Sticky Sections section[data-section-id="65a1e182f4576c65330892fd"], section[data-section-id="65b3ed1b350827759e9d9577"] .section-background img { position: fixed !important; top: 0 !important; } section[data-section-id="65a1e182f4576c65330892fd"], section[data-section-id="65b3ed1b350827759e9d9577"] .section-border { overflow: hidden !important; z-index: -999; } footer.sections, footer.sections section { z-index: 999 !important; }
-
I'm trying to figure out why the logo on the client receipts is super small or distorted on some devices! I've uploaded the correct size as 600x120... but it still is incorrect. Thanks! Attaching the logo I'm using, and then some screenshots:
-
Hi! I would love some assistance on why the spacing on my site seems to vary so much from the Preview to pretty much any other platform. I'm mainly looking at the site margins (and I already tried adjusting in style settings - it didn't help) and the size of all the content (it seems to get much bigger outside of Preview). Any assistance would be helpful! Site is: kayleecookdesign.com Attached are screenshots:
-
Okay, I actually think I figured it out (may need some adjustment - open to suggestions!). But for anyone searching: I used this code -- a Code box on the column, and then just adjusted the top px. Source: Will Myers Add this to Custom CSS: @media(min-width:767px) { .col.wm-sticky-column { position:sticky; top: 150px; } } Put this in a code box in the column you want (works for blog posts, even in fluid engine): <div class="wm-sticky-column"></div> <script> (function() { function initSticky() { let stickyStarts = document.querySelectorAll('.wm-sticky-column'); stickyStarts.forEach(el => { let col = el.closest('.col'); if (!col) return; col.classList.add('wm-sticky-column'); }); } window.addEventListener('DOMContentLoaded', initSticky); }()); </script>
-
I'm trying to create a sticky scroll blog page here: https://kayleecookdesign.squarespace.com/projects/blog-post-title-one-lgwb5 Password: KAYLEE The example my client like is here: https://www.yondinteriors.com/projects/wabisabicottage -- Would love some help with making the left column sticky and the gallery to scroll. Thanks!
-
Yes! I am trying to minimize the width between the two arrows - I'd like them to be closer together in the center of the screen. @tuanphan
-
@tuanphan It should be the home page! I may have been playing with it. I also added a similar styled one on the About page.
-
Hi! I'm trying to minimize the width between the two arrows on my home page slider. I got the code from Will Myers' tutorial which was super helpful! Basically I'm looking on how to better customize the navigation/buttons for the sliders. In the embedded code, I've customized the HTML to this: <div data-wm-plugin="section-slider" data-slides-count="3" data-arrows="bottom" data-speed="1000" data-color=black> </div> And then, I've targeted the arrows to at least make them smaller and remove the shadow in Custom CSS: [data-section-slider] .swiper-button-next::after, [data-section-slider] .swiper-button-prev::after { text-shadow: none; font-size: .8em; } But beyond that, I'm really just looking to bring the arrows closer together in the middle. Any help would be appreciated! Website: https://rabbit-rhubarb-64x2.squarespace.com/ Password: lauren Attaching the desired look! ** Would also be interested in finding out how to change the arrow symbol as well? Just out of curiosity for future projects. Right now, the arrows appear to be a font. Attaching an arrow example below.