Unlikely_IT

If SS could build membership management into Squarespace it'd be fantastic! Do message if something ends up happening. (first time I didn't get the join beta request) Just need member pages + add ability for different member types which can access content according to that member type 😍. But alas I must come back to reality

@fibula, make sure to mark the answer as correct, so others know what the solution was. Have a great one!

@jmolliver Well not including hiring a team like Liana Tech to build it for you,d I think a great place to start is the WIX platform. I've never built a system like this but, I have put together SNNHK's site which has a restricted area for members only (Built off of WIX). I believe you can create a basic platform with a member space that needs to be paid for very easily. Once paid (or under subscription payment) you can add the user to that member group and they'll have access to the teacher content. I did a quick google search, and it seems very viable:

Just add a !important to font-size. one sec I'll edit my original post code so it is all correct

@bsull Please provide the specific link you're wanting to do this on. That would help. But actually I think you don't need any CSS. If you're just building this with text block and an image block sitting side by side, just make sure the Image block is floated to either the right or left of the image block. Then the image will always go to the top with a mobile layout. I've done this on the example site here. https://unlikelyit.com/testing If you don't know how to float a block on an text block, then just watch this video:

Happy to help 😄

Nah don't worry about it. There is still a high usage rate of IE in asia, I've always have to explain to clients why IE requires extra cost (I work in HK). Arg coding for IE it's a huge pain 🤣 , plus testing is a nightmare 😢. No matter how powerful the machine I always manage to freeze it 🤣. Now enough of my whinging, I wrote up JS code that works for IE... at least it should*. NodeList.prototype.forEach = Array.prototype.forEach; function addBreak(uit) { uit.forEach(function(item) { item.innerHTML = item.innerHTML.replace(/--/g, '<br>'); }); } window.Squarespace.onInitialize(Y, function() { var title = document.querySelectorAll('div.project-item h1'); var galTitle = document.querySelectorAll('div.project-title h2'); addBreak(title); addBreak(galTitle); }); Please note that I've also change the selector to -- , away from ##. The reason for this is that you're using the page title on project page as the title to adjust, so it'll look nicer as emmanuelle moureaux architecture + design — 100 colors no.28--"Universe of Words" instead of emmanuelle moureaux architecture + design — 100 colors no.28"Universe of Words" Let me know how it goes with testing that. Oh don't worry about that testing page now as I figured it out. (Pretty sure I have). Kindest, Erin

@emma_tokyo Sorry but none of these fixes will not work for Internet Explorer. I don't do anything for that platform now (at least not for free as it's more work), as microsoft has deprecated it. And you'll find some SS features have issues there too. **edited** Sorry I meant to say won't work for IE Would you do me a favour and just create a project page that I can run tests with. It's much quicker to review it.

@Fibula Oh I had this issue when creating a multi-lingual site Tanrich. You can see the site there actually has custom Readmore buttons for each language. .blog-alternating-side-by-side .blog-more-link { position: relative; font-size:0 !important; } .blog-alternating-side-by-side .blog-more-link::before { content: "Blah blah blah"; /* EDIT text here */ display: block; font-size: 1rem; margin-top: 10px; font-family: Poppins; font-weight: 300; font-style: normal; letter-spacing: 0em; } .blog-alternating-side-by-side .blog-more-link::after { margin-top: 13px; } Happy building, Erin

Yes, the JavaScript is in the head instead of the footer. So it runs before the title HTML element exists 🤣. Whoops, sorry about that. Use this instead: <script> window.Squarespace.onInitialize(Y, () => { [...document.querySelectorAll('.site-title a')] .forEach((uit) => { let title = ''; uit.innerText.split('').forEach((item) => title = `${title}<span>${item}</span>`); uit.innerHTML = title; }); }); </script>

@Stereoknob Having a members area for a SquareSpace site has been something people have been asking for for a very long time. The unfortunate fact is that this isn't supported at all with SquareSpace. And they have no intention of trying to add it. There is a way around this through plugins, like Memberspace, but I'd honestly say to look into a different platform if your trying to build a education platform. Run through of most issues with Membership site on SquareSpace If you're determined to stick with SquareSpace, here's a basic walk-through with Memberspace I know with Wix you can add a membership log in, and create pages with access only for specific user groups. So I believe it could used for the purpose you're trying to achieve. All the best, Erin

@billydupee You don't need to load the entirety of jQuery just to apply this style. Use the following. it's shorter and doesn't require an outside library (So your site will load faster). Place it in the same place. <script> (() => { [...document.querySelectorAll('.site-title a')] .forEach((uit) => { let title = ''; uit.innerText.split('').forEach((item) => title = `${title}<span>${item}</span>`); uit.innerHTML = title; }); })(); </script> Then for your CSS, go to the custom CSS tab found here: DESIGN -> CUSTOM CSS Then use the following. Now this is just a template, you'll need to fill in the colors you'd like to use. .site-title a { span:nth-child(1) { color: #333; /* the "B" */ } span:nth-child(2) { color: #333; /* the "I" */ } span:nth-child(3) { color: #333; /* the "L" */ } span:nth-child(4) { color: #333; /* the "L" */ } span:nth-child(5) { color: #333; /* the "Y" */ } span:nth-child(6) { color: #333; /* the space */ } span:nth-child(7) { color: #333; /* the "D" */ } span:nth-child(8) { color: #333; /* the "U" */ } span:nth-child(9) { color: #333; /* the "P" */ } span:nth-child(10) { color: #333; /* the "E" */ } span:nth-child(11) { color: #333; /* the "E" */ } } I would like to point out that another option to avoid all this is just create a logo image and use that. Just make sure it's a high enough resolution so it won't become pixelated. Happy building Erin ** edit ** Please note that you can delete my comments in the CSS (Thats anything between the /* */). As it's just there to make it clear what each span should be linked to ** Second edit ** @billydupee I tweeked to JS for a compatibility issue.

@emma_tokyo Here is the code rewritten so that is much cleaner. window.Squarespace.onInitialize(Y, () => { [...document.querySelectorAll('.project-title h2, .project-item .meta h1')] .forEach((uit) => uit.innerHTML = uit.textContent.replace(/##/g, '<br>')); }); Please note I've change the selector text to be: ## Reason for this is to make sure titles can still use the hash character on it's own. ** edited post ** OOPS! typo in my JS. @emma_tokyo only use the JS provided now

@emma_tokyo So on these points, I'm going to your live site and I'm seeing it work. So i'm a bit confused. Can you give me the URL where the issue is seen. Confirm the browser that has the issue. And show a photo of the issue as well. Thank you!

@emma_tokyo, you just need to make sure the query selector has a specific enough style for both the gallery and the project page. this should work: '.project-title h2, .project-item .meta h1'