-
Posts
184 -
Joined
-
Last visited
Reputation Activity
-
WCS got a reaction from TheMuDojo in Automate Email Campaigns for Membership Subscribers
You can now send automated emails to your Member Site members when they sign up!
👉 The process is a bit long for the forum, especially with screenshots, so I created a blog post: View blog post here.
It has more in-depth steps with images as the settings can get a bit confusing -- especially for those who haven't used Squarespace Campaigns yet.
Here are the core steps:
Step 1: Go to Marketing > Email Campaigns > Automations
Step 2: Start a New Automation
Step 3: Click 'Customer Activity' and then 'Thank you email'
Step 4: Select a template to get started. Once you've opened the template, click Automation Settings on the right
Step 5: Change Conditions to None
Step 6: Select Purchases and then click on Digital products. Select the Member Site you want the email to be sent to
Step 7: Click Back and then change when the email is sent. It should automatically be 1 Day Later but you can change this to Immediately
Step 8: Review your settings
Step 9: Activate your automation
-
WCS got a reaction from sayreambrosio in How to move domain to a specific page on squarespace
@ThomasDris You can set up a Domain Forwarding Rule for a specific page so that when someone types in that secondary domain, it goes to the page you want. However, it will still display the primary domain url in your web browser's address bar.
This means that if you have 2 domains connected to your website, you have:
www.DomainA.com > Takes you to www.DomainA.com
www.DomainB.com > Takes you to www.DomainA.com
They both take you to the homepage and it then displays www.DomainA.com
If you want www.DomainB.com to go to your page /services, then you can set up a Domain Forwarding Rule. That means your domains now:
www.DomainA.com > Takes you to www.DomainA.com
www.DomainB.com > Takes you to www.DomainA.com/services *
*It will not say www.DomainB.com as if it's a different website.
This Squarespace help article has instructions: https://support.squarespace.com/hc/en-us/articles/214767107-Forwarding-a-Squarespace-domain#toc-forward-to-a-specific-page
When you add the domain forwarding rule, it will look like:
-
WCS reacted to jonuehring in Exclude custom CSS from specific blocks?
@WCS sorry for the late reply - that worked, thanks so much! And good to know!
-
WCS reacted to Tankgurl in Change section background color around inset background image
Thank you for the help!
Finally worked.
Melanie
-
WCS got a reaction from Lakey in Custom Fonts not working AND deleted some CSS code for 'Image Block Poster' - can anybody help?
@Lakey This should be easy enough to fix! Once we do, I recommend that you copy / paste your CSS into a document for safe keeping.
Initial thoughts:
The text that says missing opening '{' shows an error in the code and when that happens, the rest of the code may not work. From what I can see, your custom font should display correctly once we fix that issue. There was definitely something deleted above the code I've highlighted in the box below. This is the source of the error. Delete the code in the box and replace it with:
.design-layout-poster .image-card-wrapper {
visibility: hidden;
opacity: 0;
transition-duration: 0.5s;
}
-
WCS got a reaction from tuanphan in How to hide an icon on mobile but leave it on desktop?
@SelwynGoodman Oh no, I didn't see your response because you didn't tag me! In the future, click @ and then type the username in. When done correctly, it will appear in a black pill shape like yours does here. Glad @tuanphan got you the finally code! 😊
-
WCS got a reaction from mary654849 in How to hide an icon on mobile but leave it on desktop?
@SelwynGoodman We can fix that with a little CSS magic!
Log into the backend of your website Go to Website > Website Tools > Custom CSS Copy / paste the below CSS and click save @media screen and (max-width:480px) { #block-#######{
display:none
}}
Please note:
This code requires a block # to target the icon. If you share your site, I can update the CSS. As cell phones change, some large phones may show the icon. You can adjust the max with to 770px, which would hide it on some tablet devices as well. -
WCS got a reaction from Johnny87632 in Anchor link to a testimonials section
@Magmorphius Glad you figured it out! You can also use code instead of targeting a specific section. If you find that the anchor link scrolls too close to the top of the testimonials, you can add code at the bottom of the section above to give a little buffer.
<p id="this-text-is-the-id"></p>
-
WCS got a reaction from Magmorphius in Anchor link to a testimonials section
@Magmorphius Glad you figured it out! You can also use code instead of targeting a specific section. If you find that the anchor link scrolls too close to the top of the testimonials, you can add code at the bottom of the section above to give a little buffer.
<p id="this-text-is-the-id"></p>
-
WCS got a reaction from Pureform in Mobile Preview from Desktop is different than actual Mobile Site plus White Space on the Right Side
@Pureform Thank you! I took a look and while I can see your menu icon, I can also scroll to the left and right. This is usually caused by code that adjusts margins. To fix it:
Log into the back of your website Go to Website > Website Tools > Custom CSS Copy and paste the below code, then click Save html, body {
overflow-x: hidden}
-
WCS got a reaction from Callan in Colour change code for accordion
@Callan Of course! Happy designing. 😊
-
WCS got a reaction from gcart in What are your best practices for mobile styling?
Hi @drunkbeetle, welcome to the forum!
While you could technically use code to have 2 different sets of design, it's not a good idea for your site's health or for SEO. Sometimes it makes sense to hide 1 section and show another on mobile but that's on a small scale.
There are things you can change on mobile view that don't impact the desktop design:
Button size Layout of items (text, images, etc.) Image size Text block size However, you can't change the below without it modifying on desktop:
Image alignment Text alignment or color Settings to list items Basically, you can move items and change the boundary box without it altering your desktop design -- these changes are more about where items go. However, changing the content or styling of a text box, image, etc. will appear on both desktop and mobile.
💡 If you're designing on a monitor, your settings and window size may modify the mobile preview. I'd highly recommend updating a section and then checking on your phone to see if the two versions are close. If they aren't, you may need to adjust your set up.
There is CSS that can be applied to modify list carousels, text styling, and more. If there are specific places where you're struggling, post your issue with a screenshot, link, and password (if your site isn't launched yet, you'll need to go to Settings > Site Visibility > Password Protected and set a password). 😊
-
WCS got a reaction from leedbssk in How to change colours of the buttons on hover
@leedbssk Happy to help!
Here's code for modifying the header button:
// This creates a small transition buffer
.header-actions-action--cta .theme-btn--primary-inverse{
transition: transform 0.3s !important}
// Change the specified colors
.header-actions-action--cta .theme-btn--primary-inverse:hover {
opacity: 1 !important;
background-color: red! important;
color: #495A58}
^ I don't know what color you want the background to be. If you don't want it to change, then you can remove that part of the CSS.
For the slideshow button, can you please share a link to your site?
-
WCS reacted to Callan in Colour change code for accordion
Thank you! My CSS was a little off, I was using:
#block-yui_3_17_2_1_1709022622203_38394
.accordion-item__description {
text-color: #fffff !important;
-
WCS got a reaction from Callan in Colour change code for accordion
@Callan The CSS for this should be:
#block-yui_###### .accordion-item__description{
color: white !important
}
Is that what you were using previously?
Sometimes CSS doesn't display on the backend unless you save, leave the Custom CSS window, refresh, and then go back in.
-
WCS reacted to graphicabyss in Why can't I hide images on Mobile only using the CSS I'm adding?
It worked! Thank you so much! I increased to 800 to hide on iPad as well but thats been amazing to solve this!
-
WCS got a reaction from nick_sh in Why can't I hide images on Mobile only using the CSS I'm adding?
@graphicabyss Is it removing the image in the mobile preview, but not on your phone? If so, then you may have to adjust the max width to 720. I had to do this for a client recently.
@media screen and (max-width: 720px) {
#block-yui_3_17_2_1_1689763110049_14549 {
display: none !important;
}
}
-
WCS got a reaction from JDED in Why can't I change the point size of the excerpt in a summary block?
@JDED Try this code and let me know if it works:
.summary-excerpt p:last-of-type{
font-size: 12px
}
-
WCS got a reaction from Margaux in Text block alignment - Mobile version
@tci_ca Absolutely! You can add some CSS to make this change for all fonts or one block of text.
To add the below CSS:
Click on 'Website' Scroll to the bottom and click 'Website Tools' Then 'Custom CSS' // Change alignment for all h2 text on mobile
@media screen and (max-width:640px) {h2{
text-align: center}}
You can swap out h2 for a different font size:
h1 h3 h4 p.sqsrte-large (p1) p (all paragraph fonts) p:not(.sqsrte-large):not(.sqsrte-small) (p2) p.sqsrte-small (p3) If you want to target only one specific block of text, you will need to find the block id for the text block. To do this:
Install the Chrome Squarespace ID Finder extension Go to the page you want to modify and select the extension Find the block id for the text box you want to modify and click on it (it will copy it for you) The insert that into the code, as shown below, before the font you want to modify @media screen and (max-width:640px) {#block-123456789 h2{
text-align: center
} }
If this screenshot, you can see that there is a white box with #block-##### above a header. If I was to use that specific number in my code, it would change the h2 font only in that text box. The one over the image would be used to target that element.
If something doesn't modify, try adding !important
@media screen and (max-width:640px) {#block-id123456789 h2{
text-align: center !important
} }
-
WCS got a reaction from arielestulin in Adding Adobe Fonts
@arielestulin You still can! 😊
1. Go to https://fonts.adobe.com and find the font you want.
2. Click on </> icon. It will ask you to add it to a project -- create one for your website.
3. Adobe will give you 2 pieces of code. The first you need to put in your site's header. You can find this by going to Website > Website Tools > Code Injection
4. You'll also receive something that looks like the below. You'll use this to specify what text you want on your site to be the Adobe font you selected.
Go to Website > Website Tools > CSS and add:
@font-face {
copy / paste all the provided css font here
}
Then specific what text you want in that font. For example, if you wanted all h2 headers to be transformed, add:
h2{
copy / paste the font-family line here
}
If you want it to be all headers, it would look like:
h1, h2, h3, h4{
copy / paste the font-family line here
}
For all paragraph text, do:
p{
copy / paste the font-family line here
}
-
WCS got a reaction from derricksrandomviews in Trying to change arrows on summary carousel. Help?
@matt1234 That guide is good but it does have an error in it and the arrows may overlap the text, making the testimonial not fully legible.
Here's a revised version to try:
section[data-section-id="65d8dcbcf210d40479a7b669"] {
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
float: none;
width: 120%;
position: absolute;
bottom: 42%;
left: 50%;
-webkit-transform: translate(-50%,-35%);
-ms-transform: translate(-50%,-35%);
transform: translate(-50%,-35%);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next::before {
background-color: #f5c06a;
color: #000000;
padding: 20px;
border-radius:50%;
content: '▶' !important
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous::before {
background-color: #f5c06a;
color: #000000;
padding: 20px;
border-radius:50%;
content: '◀' !important
}
}
Customize it for your site:
You can add #block-yui_3_17_2_1_1693334706601_32976{ to the beginning and } at the end if you want to apply it only to the slider on your homepage.
You can modify the arrows by copy/pasting a new unicode character and replacing the symbols (◀ and ▶) in the below code. Here's a link to a list of viable options: https://insidethesquare.co/unicode-for-squarespace
content: '▶' !important
content: '◀' !important
-
WCS reacted to derricksrandomviews in Trying to change arrows on summary carousel. Help?
This guide should help you:
https://www.inscapewebdesign.com/free-squarespace-hacks/styling-squarespace-summary-carousel-arrows-like-list-section-carousels
-
WCS got a reaction from tuanphan in Adding Adobe Fonts
@arielestulin You still can! 😊
1. Go to https://fonts.adobe.com and find the font you want.
2. Click on </> icon. It will ask you to add it to a project -- create one for your website.
3. Adobe will give you 2 pieces of code. The first you need to put in your site's header. You can find this by going to Website > Website Tools > Code Injection
4. You'll also receive something that looks like the below. You'll use this to specify what text you want on your site to be the Adobe font you selected.
Go to Website > Website Tools > CSS and add:
@font-face {
copy / paste all the provided css font here
}
Then specific what text you want in that font. For example, if you wanted all h2 headers to be transformed, add:
h2{
copy / paste the font-family line here
}
If you want it to be all headers, it would look like:
h1, h2, h3, h4{
copy / paste the font-family line here
}
For all paragraph text, do:
p{
copy / paste the font-family line here
}
-
WCS got a reaction from tuanphan in Put lowlight on hyperlinks but only on Paragraph 2
@Chanel1990 Try the below code and let me know if it works! 😊
p:not(.sqsrte-large):not(.sqsrte-small){
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #e1c4ff 65%);
display: inline
}
This article shows some more options as well: https://www.beatrizcaraballo.com/blog/low-highlight-heading-links-squarespace
-
WCS reacted to tuanphan in Change Gallery Columns for Mobile Only?
Change this line
figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } to this
figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; margin-bottom: 30px !important; }