Chele

@tuanphan - have you created this guide yet? I am trying to solve for the exact same problem!
 
Thanks!

I would love to know how to do this. I need something where they can tick boxes for multiple lists if possible. For example I have a list for writing tips for other authors, my main newsletter list, and my author empire design builds list. I would love it if they can check more than one and be filtered to that list.

@jaeveedee, @tuanphan - I've managed to alter the check box & radio box elements (see below) - it's a little more work to change the drop down selection menus and I haven't had any success with those yet. Any input would be great…
/* Radio Buttons */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.option input[type="radio"]:active {
  cursor:pointer;
  width:30px;
  height:30px;
  background-color:#0e1021;
  border-radius:50%;
}
/* Selected */
.option input[type="radio"]:checked {
  cursor:pointer;
  width:30px;
  height:30px;
  background-color:#e9530d;
  border-radius:50%;
}
.option input[type="radio"] {
/* un-selected */
  background-clip: content-box;
  border: 4px solid #e9530d;
  border-radius: 50%;
  content: " ";
  cursor:pointer;
  width:30px;
  height:30px;
}
/* check boxes */
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.option input[type="checkbox"]:active {
  cursor:pointer;
  width:30px;
  height:30px;
  background-color:#0e1021;
  border-radius:50%;
}
/* Selected */
.option input[type="checkbox"]:checked {
  cursor:pointer;
  width:30px;
  height:30px;
  background-color:#e9530d;
  border-radius:50%;
}
.option input[type="checkbox"] {
/* un-selected */
  background-clip: content-box;
  border: 4px solid #e9530d;
  border-radius: 50%;
  content: " ";
  cursor:pointer;

so awesome @Hudson_mod. You're missing a height/width on the unselected checkbox but otherwise working perfectly for me! 

Is there any way I can customize the CSS in my email campaigns? Basic things like font selections and padding would be great to match my site's style, but if those things are possible, I imagine other customization are possible. Where would I make these changes?

This works for the web, but is there a way to do this in the email marketing tool? Can't seem to figure out how to remove the underline from email links. 

Thank you!

Hi everyone, 
I have managed to make folder links clickable in my desktop navigation bar but am struggling with the mobile view just like so many others. I have understood that folder links cannot be clickable in the mobile nav bar. Do you have any idea for a workaround? My site URL: https://meetra.squarespace.com/
@tuanphan: Would it for instance be possible to add a menu item in a particular folder in the mobile navigation bar and hide this item when in desktop view? On my page this would mean that after clicking on the folder "Professionals" the first menu item would be sth. like "Overview" and when clicking on it the user would be directed to the page https://meetra.squarespace.com/career (the same page which opens when clicking on the folder in desktop view).
I have used the following code to make my folder clickable in desktop view: 
<script>
  (function()
  {window.addEventListener("load", function () {
    var tours = document.querySelector('[href="/career-all"]');
    tours.addEventListener("click", function () {
      window.location = "https://meetra.squarespace.com/career";
    });
  })}
  )();
Big thanks in advance! This forum has been really helpful so far. 

 

What does that code do to the folder when using Mobile view?

You are a genius @WillMyers! Thank you!!
 

@tuanphan Thank you so much for this! I have been looking for a workaround for a while and this works perfectly. Thank you so much! 

What aboutttttt This?
 
/*Card Flip Effect*/ .image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; perspective: 1000px; } .image-block:hover .design-layout-poster { transform: rotateY(180deg); } .design-layout-poster .intrinsic{ z-index:0; } .design-layout-poster figcaption{ z-index:1; } .design-layout-poster .intrinsic, .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .design-layout-poster figcaption{ transform: rotateY(180deg); background:black; /*Add if Needed*/ /*border-radius: 20px;*/ }  

I've coded poster images to flip to show the description when scrolled over. It looks really good on chrome but safari makes it all glitchy. Is this something I can fix? Any advice? Sorry, I can't put the url because the website isn't live yet but here is the code I'm using.
.design-layout-poster img{ transition: 1s}
.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1s} 
.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s;}

try this
button { font-size: 18px !important; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; color: black !important; background: white !important; }  

Add to Home > Design > Custom CSS
@media screen and (max-width:767px) { .homepage .gallery-fullscreen-slideshow[data-width="full"] { height: 30vh !important; } }  

@Pandagal Is this the effect you're after? If so this could should get you started

 
/* Add this code to Design -> Custom CSS */ .gallery-caption { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 102%; text-align:center; opacity: 0; transition: all .3s ease; background-color: white; height: 100%; } .gallery-masonry-item:hover .gallery-caption { opacity: 1; transition: all .3s ease; } .gallery-caption-wrapper { display: flex; place-items: center; justify-content: center; }  
CleanShot 2020-06-19 at 12.09.19.mp4

Add to Page Settings > Advanced > Header
<style> @media screen and (min-width:768px) { .design-layout-card .intrinsic { width: 30% !important; } } </style>  

try
margin: 0 auto !important;

@sansari I found this article and it helped me a lot (even though it's for 7.0 and I'm using 7.1) https://beatrizcaraballo.com/blog/loading-background. I was using all black backgrounds and even though i wasn't using any of the light ones at all it was still flashing white when changing pages.
I changed the Main color and Overlay color on all the light background options to black and it fixed my problem. I'm not sure if that will work for all issues but perhaps it will help with yours too. 

You can use this code
/* Line under header */ header#header { border-bottom: 4px solid #f1f2f3; }  

@creedonI see! It worked. Thank you! I was using the Section ID I think. Thank you very much!

Excellent. Thank you so much for your quick reply @paul2009 Gives me an impetus to learn Jquery 😉

Excellent. Thank you so much for your quick reply @paul2009 Gives me an impetus to learn Jquery 😉

I've assumed that you have one scheduling page shared among all mentoring sessions and that this scheduling page is unlinked and hidden from search results - and similarly hidden on Calendly - to prevent non-purchasers discovering it.
Some JS could be written to look for a common abbreviation (usually in the SKU as this metadata isn't as obvious to the customer as the product title). If the phrase is found on the Order Confirmation page, the JS will modify the page content to add the scheduling page link and some instructions/guidance for the customer.
 

Can you provide a few details of your use case, including a working link to the site? With more context, we may be able to help.
 

@MarcWatson I too would love to know your workaround as I'm in need of this solution as well. I'm trying to get the client to go to a scheduling page but ONLY for certain products that require it. I'm trying to make it so people who haven't bought the product can't access the scheduling page (and not all products on my site require scheduling).