iamdavehart

You just need to create the map in the My Maps section of your google account. add all the pins and lines and annotations you want. then make sure its set to public and use the "Embed In My Site" option. That will give you some iframe code that looks like this. you don't need the iframe bit, just copy out the link. the example here is a demo I just made for you of two points in london.

<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1nInyBQ5-RZ8w71nRNrN4nm1WkuYZFf-h" width="640" height="480"></iframe>

next, go to your squarespace site, and add an Embed Block. just copy the link in and wait for it to locate the link and you're golden.

if it doesn't find the link. then click the little icon </> and paste the whole iframe code in from above, but change the width to "100%" and the height to whatever you want.

EDIT: here’s the link to Google’s docs on My Maps  https://www.google.com/maps/about/mymaps/

@lidyaaC

if you want to remove the headings from the simple grid layout you can do that with some css. 

exactly how you do that depends on whether you want to get rid of the text on all your portfolios or just a specific one, and possibly whether you're on a business/premium plan.

To start with though, this will hide the text under portfolios in all cases. Add this code to your Custom CSS in the main Design menu

div.portfolio-text {
    display: none;
}

if you want to get rid of it on a specific page and you're on business / premium plan, then wrap the code above in <style> </style> tags, and put it in the advanced code injection part of the page settings.

if you want to get rid of it on a specific section then you'll need to find the section id. you can do that using a chrome extension Squarespace ID Finder, or look in the source for "data-section-id". once you've got it you can edit the rule above to be more specific. something like this, but insert your section id:

section[data-section-id="600ff3ae2549287fcef1d4d2"] div.portfolio-text {
	display:none;
}

hope that helps.

In this case, because of the way that squarespace clips things, we need to make all the non-active ones slightly smaller. same effect, just safer with layout. I've transformed all slides to 90% of original size and forced the active one back to 100%. then added a transition to make it ease in and out.

Put this in your custom css. i've used the block id to make it just for that section, but you could remove that and it would apply to all carousels.

div#block-yui_3_17_2_1_1628511352168_11887 .sqs-gallery-design-strip-slide {
    transform: scale(0.9);
    transition: ease 0.5s;
}

div#block-yui_3_17_2_1_1628511352168_11887 .sqs-active-slide {
    transform: scale(1) !important;
}

To have the active slide centered, you don't need CSS. when edit the design of the carousel you can pick "Centered" for the property "Active Alignment" and that should sort that bit

those author profile images at the bottom of the blogs are 50px, so to double them to 100px you need to use add some rules to your custom css (from the main Design menu).

.blog-item-author-profile-wrapper .author-avatar {
  width:100px;
  height:100px;
}

.blog-item-author-profile-wrapper .author-avatar img {
  width:100px !important;
  height:100px !important;
}

obviously you can change the 100 to whatever you like.

can't see your site as no link posted, but you could add some css to your site's Custom CSS section to do this. tested this on my 7.1 site.

.header-nav-folder-item--active {
  font-weight:bold;
}

The active top-level folder should already be styled differently (with an underline usually), but you can target that with css like this

.header-nav-item--folder.header-nav-item--active {
  font-weight:bold;
}

Hi Macaila,

if you want people on here to look at your site, could you post the password here for us. 

Squarespace will optimise their sites to be responsive across all widths, by default it should look right, so it's possible that if you've used "lots" of custom css that you might not always have the correct media queries (these tell browsers to layout differently for different screen width ranges). Mostly things like margins etc are set site wide, so it would probably just be some site-level css to change it.

you can add a form block as normal, and under the design section tick the "lightbox" bit. you'll be left with a button. you can edit the text on that screen to Enquire or whatever you want. I would add this in the footer probably so that it appears on every page.

Next go to the Custom CSS section in the main Design menu and copy in the following rules

footer button.lightbox-handle {
  position:fixed;
  right:25px;
  bottom:25px;
  z-index:999;
  opacity:0.7;
}

footer button.lightobx-handle {
  opacity:1;
}

this looks for a button that has been marked as a lightbox opener in the footer. (there will only be one, the one you've just put in) and then fixes it to the bottom right. The "position:fixed" is the bit that does the hard work. I've added an opacity filter to show you how you can have it react to the mouse hovering over it, but you can remove those opacity lines if you don't like the effect. 

It's currently 25px in from the bottom right, but you can edit that as you wish by modifying the right and bottom properties.

Hope that helps

add this to your sites custom css (if you want it to happen for all galleries). 

p.gallery-caption-content { text-align:center; }

if you want to just do it on that page then wrap the same code in <style> blocks and put it either in the page header (needs business/premium plan) via the Advanced section of the page settings, or put it in a code block on the page.

<style>
p.gallery-caption-content { text-align:center; }
</style>

when you've embedded it, you've specified the width of the iframe to be 700 pixels. find the bit that says width="700" change that to width="100%" and you should be fine.

The code block does have a bit of padding on it which you probably don't want in your mobile version as this will probably upset the way the form fills the width, so you might also want to add this code to your code block (put it above the iframe bit and you'll be fine, if not add it to the custom css part of your site from the main Design menu without the style tags around it).

<style>
  @media screen and (max-width: 767px) {
    #block-yui_3_17_2_1_1628417923165_5434 {
      padding:0;
    }
  }
</style>

The overflow-wrap property for your site is set to break-word. this means that if a long word is encountered that is wider than the container its in, then browsers are allowed to break that word at arbitrary points and move it on to the next line. This is actually the default for Squarespace, so you could override that in CSS. To be honest, this is probably the best setting though...

Before we override then, we have to wonder why it wouldn't break at the existing spaces for example around DWP? Well, it seems that there are non-breaking spaces around those which have been put in. These tell browsers not to break there, so it looks at "begins, DWP Restart" all as one word. if you look at the HTML for this it looks like this. "begins,&nbsp;DWP&nbsp;Restart".

So really what you need to do here is remove those non-breaking spaces. I don't know if you put them in yourself and if so why? but if you remove them it will be fine. It looks like there's loads of these non-breaking spaces in your article, so I'm wondering if you've copied them in from another system maybe.

What you probably need to do is copy the text of your articles again, and when you go to insert it into your blog post, use the clipboard icon on the tool bar (or press Ctrl+Shift+V) to make sure that you copy it in as plain text and not with the existing formatting which seems to have these non-breaking spaces embedded in them.

That should solve your problem. Without fixing that, any CSS override/implementation will likely make things worse not better.

EDIT: Just thought I'd add the screenshot of your source. Here's the code of your site and you can see all the non-breaking spaces in there. you can't see them in your site though (they're spaces!)

Hi,

you can mostly do what you're talking about with CSS. CSS is for the most part only for changing style and adding new content in isn't really its strength. for that you'd want to start using javascript, and it gets more complicated, requires a premium/business plan and personally I think the JS solutions are often trying to make Squarespace do something it doesn't want to do, which makes it harder to maintain etc.

So, assuming you've rationalised all that and really want to make it do something it doesn't currently do then here's a CSS only way of getting what you want. I tested this with a summary block set to grid. I've used your block id, but if you change things around you'll obviously need to update it.

#yui_3_17_2_1_1628375697042_148 .summary-item {
  position:relative;
  overflow:visible;
}

#yui_3_17_2_1_1628375697042_148 .summary-item:hover:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0.3;
  background-color:black;
  z-index:100;
  transform: scale(1.1)
}

#yui_3_17_2_1_1628375697042_148 .summary-item:hover:after {
  content:'Learn More';
  position:absolute;
  top:10%;
  left:25%;
  width:50%;
  text-align:center;
  display:block;
  color:white;
  padding:5px;
  border:solid 2px white;
  font-weight:bold;
  z-index:101;
}

#yui_3_17_2_1_1628375697042_148 a.summary-title-link:after {
  content:'';
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:102;
}

Here's what this is doing:

• Sets the overflow of your summary item to visible. the summary items don't have padding so to make the overlay look better I'll scale it later on which you can only see if you set it to visible here.
• Adding a content block overlay to the summary item. This is set to opacity of 0.3 to make this darker push this number up towards 1. it scales by 10% to add padding. set this to 1 or remove this line to have a tight overlay
• Adds learn more "button". it's not really a button. you can't add one with css, you'd have to use javascript for this, but seeing as the whole thing is going to be clickable it probably doesn't matter
• takes the summary title (which is a link) and "stretches it" to go on top of the overlay. This makes the whole thing clickable.

This is close I think to what you want. if you want a real button, you'd need to use javascript to add it. But to be honest, I'd really think hard about whether trying to customise this sort of thing away from what sqs wants to do. it does make it a lot harder to maintain in the long run. hover effects don't translate to mobile well, and customising off-the-shelf software too much is pretty much always a bad idea... sacrilege to say so in a forum like this, but just my opinion. 

that said, hope the code helps. and at least for educational purposes there's some good css lessons here...

EDIT: you have some cool pictures of planes on your site. worth editing it just to tell you that.

If you've got a business / premium plan then you could do this with javascript. Put it in the pages code injection in the Advanced part of the pages settings. If you don't have the business premium plan then I don't think you can do this.

<script>
document.addEventListener("DOMContentLoaded",function() {
  const sourceField = document.querySelector("input[name='SQF_SOURCE']");
  if (sourceField) { sourceField.setAttribute("value",window.location.hostname); };
  const dateField = document.querySelector("input[name='SQF_DATE']");
  if (dateField) { dateField.setAttribute("value", new Date(Date.now()).toISOString()); }
})
</script>

• you can see the names SQF_SOURCE and SQF_DATE in the code, you should obviously change those to match the hidden elements in your form.
• I've used hostname to just give you the domain, but if you wanted the actual page then you could use window.location.href. Anything else search the internet for window.location
• Dates in javascript are notoriously tricky (actually, they're very tricky in pretty much all programming). I've output the ISO string here, I don't know what your support for things like timezones are etc, so it's up to you to work out what you do with that. search the internet for javascript date functions if you want to change it.
• this is based on putting it in the pages header, so it has to add an event listener to make sure the form has been loaded. There's plenty of other ways to do this, you could use jquery, you could also put this in a code block after the form and in that case you'd only need the four lines that find and set the inputs.

Stumbled across this and thought I'd throw something into the mix. I suppose you could try to find all the places that interact with the cart and attach listeners to those but I think that sounds fragile. I think if you were really trying to do this (and you probably shouldn't), then you'd need to listen to the cart API calls.

To be clear, I don't think you should do this, even though there's nothing fundamentally wrong with it, so I'll put this here "for educational purposes".

😀

So... you could monkey-patch the open method on the XmlHttpRequest prototype, then inside that you could add an event listener and then you'd have a hook to do whatever you wanted.

For example, you could inject this to your cart page (or any page for that matter) and open up the console and see all the requests that squarespace are making. 

<script>
((open)=>{ 
  XMLHttpRequest.prototype.open = function() { 
    this.addEventListener("readystatechange", ()=>{ 
      console.log("look at this!", this.readyState, arguments); 
    }); 
    open.apply(this, arguments); 
  }; 
})(XMLHttpRequest.prototype.open)
</script>

obviously you would check arguments[0] for the method and arguments[1] for the api url. If you were doing this properly you would probably want to monkey-patch the fetch api too, but we wont go into that.

you could extend this and wrap the send method of the prototype and see what they're sending etc etc. (open up the Network tab of the developer tools and you can see that the request payload has the ItemID, sku and quantity in it for example). 

You're also inside the page, with all the cookies you need, so you could also send your own request to get the carts contents and then forward it out and off to your own API if you really wanted...

Again, I'm not saying you should do this, I'm just saying it's javascript and you can do what you want, so you could do this.... for educational purposes... 

the right answer is obviously to vote up the feature request for a signed webhook for cart items.

I don't think it's your CSS that's doing this. just looks like your tel URL has been changed. the link is pointing to http://tel:+0xxxxx, so you've got multiple protocols. 

Go into the Social Links part of your settings and check the profile and make sure its just tel:0xxxx. You can do that from the Settings menu or by editing an existing Social icons block.

EDIT: I've noticed that if you do this through the Settings menu, Squarespace will not like it and try to add http:// in front of it. perhaps this is where your problem arose. It seems to be much happier to accept the tel: protocol if you edit if via a Social Links block. I'd do it that way 

this is actually a pretty interesting question! I don't think Squarespace lets you directly modify attributes on the elements like class and name. However, they do use nice html elements rather than just divs everywhere, which means that you can do some pretty cool stuff with css nth-child selectors. My guess is you don't like looking up the IDs, so this could do something instead of that (although if you rearrange the order of the sections you'll have to be careful!)

Squarespace uses an <article> tag for its non-header/footer content and the <section> tag for sections in a 7.1 layout so we'll start there and use our nth-child selector. At it's most basic, you do this kind of thing, supply a number and it picks that section.

<style>
  /* this will apply a red border to the top of the 3rd section */
  section:nth-child(3) {
  	border-top:solid 2px red;
  }
</style>

However, the nth-child selector in css has some tricks up its sleeve, because it can accept a function that is applied to the n in the form An+B. It can also accept odd or even.

so you can do things like this:

<style>
  /* put a red border on the top of section 1,3,5 */
  article section:nth-child(odd) {
    border-top: solid 2px red;
  }
  /* put a blue border on the top of the first three sections */
  article section:nth-child(-n+3) {
    border-top: solid 2px blue; 
  }  
  /* put a green border on the top of the third section and all following */
  article section:nth-child(n+3) {
    border-top: solid 2px green; 
  }  
  /* combine them for a range! put an orange border on the top sections 2-4 */
  article section:nth-child(n+2):nth-child(-n+4) {
    border-top: solid 2px orange; 
  }  
</style>

Things to note:

• n starts at zero for formulae
• it has to be An+B. this is why you don't write 3-n, you have to write -n+3.
• squarespace will also use a section for the pagination so you need to make sure that the article part is in the css rule. you might also want to use an id for the top level or put this in a code block to make sure it doesn't happen on every portfolio/layout
• reordering sections will cause n to change so if you want the sections to stay even when reordered you'll have to use IDs
• in terms of specificity all the rules are the same, which means that they get applied in the order they're listed, so in that example, the last rule (orange) will overwrite earlier rules.

you can find out more about the nth-child selector here: 
:nth-child() - CSS: Cascading Style Sheets | MDN (mozilla.org)

Hope that gives you some ideas. you could also combine this technique with css first-child and last-child selectors too. 

If you've got business/premium plan then probably best to put this code in the page header, by clicking the pages settings and then advanced and copy it in there. If you don't have premium/business, then just add a code block somewhere on that page . e.g. just below the logo for the those four bit. In that code block make sure it says HTML and then copy in this bit of code. same bit of code regardless of where you put it.

<style>
#title-area { display:none; }
</style>

Squarespace uses a background to draw this line in, so you need add this to your site's custom css (found in the design section of the main menu)

.header-nav-item--active a {
  background: none !important;
}

You've got a fixed width and height set (1920x1080 like a full HD Screen!) so its overflowing. 

Just change the width to "100%" and the height to something suitable and you'll be fine. it does seem to work in a markdown block as you suggest, or in an embed block and click the </> and paste your iframe code in there. not sure what plan you need to do that.

e.g.

<iframe width="100%" 
        height="500" 
        src="https://xd.adobe.com/embed/46fe53f9-9d26-4448-827f-88b5d8d04224-13ad/?fullscreen" 
        frameborder="0" 
        allowfullscreen>
</iframe>

Tuan is right though, it's definitely easier to help you if you do post a url and a temporary password, but I tried this and it works.

you've got two URLs stuck together in your code. remove the bit the says "https://azalea-echidna-nxxw.squarespace.com/config/design/undefined" so it just has the static1.squarespace.com url. 

@font-face {    
	font-family: 'LitteBeeVector';       
	src: url('https://static1.squarespace.com/static/61044e72da22704fa3741951/t/6108e2fb478b8949c8cd887f/1627972347739/littlebeevector_cricut-webfont.woff');  
}

* {
    font-family: 'LitteBeeVector' !important;
}

should work then

Your logo is quite simple and black, so it can be inverted with a CSS filter. You can either choose to do this yourself by adding a code block to the relevant page, or you can let squarespace help you out. It identifies headers that will be light on dark by adding the "black" class to the header. you can see the effect of this very easily by reverting to a text only header.

if you want to follow that, then add this code into your sites custom css

header.black div.header-title-logo img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}

note that your logo will be black on white backgrounds, and white on darker ones.

if you want to do this just for one page, then add a code block to that page and add the code above but without the header.black bit, and place it inside a style block. like this

<style>
div.header-title-logo img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}
</style>

that should do it.

I'd favour the first option using the Custom CSS (from the main Design menu of the editor). it will make the change automatically as you add new pages, and much easier to change later on if you want to alter the way it looks.

you could do it in a code block. add a code block and use the following HTML / Style

<div style="background-color:#CB4342; color:white; font-weight:bold; padding:0.5rem 1.5rem; border-radius:4px; display:inline-block; font-size:large;">
  STEP 1
</div>

if you're going to use this in more than one place, then add the style bit as a class to the Custom CSS in your site (go to Design from the main menu of the editor) like this

.redLabel {
	background-color:#CB4342; 
	color:white; 
	font-weight:bold; 
	padding:0.5rem 1.5rem; 
	border-radius:4px; 
	display:inline-block; 
	font-size:large;
}

and then in your code blocks use this class like this

<div class="redLabel">Step 1</div>

This comes up when you enable the lightbox option on a portfolio gallery. add this to your site's custom css. (in the main Design menu of the editor). If it doesn't work then do share your site URL so we can see which part of your site is showing this cursor style

.gallery-grid-lightbox-link {
	cursor: pointer !important;
}

This is one of those questions where the answer should be simple, but CSS doesn't give you control over the spacing between the dots/dashes. Which means that any answer that gets you exactly what you want can become more than a little complex...

First option here is that you can fake the border with a background-image. Look here and there's a generator someone wrote on codepen  that will help you get something you want. you can then just copy the css it outputs into your button css. there's also a lot of fancy options available here too, including animating stuff etc.

More Control Over CSS Borders With background-image | CSS-Tricks

However, you might notice that CSS actually uses a different algorithm to draw a dashed border, i.e. it will always draw L shapes at every corner and then make sure that the corners have the right dash length, which this background image approach doesn't do. 

So if you want to be pixel perfect that makes things a little trickier too. if you want to do that you have to build a background image and then slice it up into 9 squares using the css border-image properties. it's tricky to be honest, but it can be done. 

try this for example:

.button-block .sqs-block-button-element {
border-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyNyIgd2lkdGg9IjI3IiBoZWlnaHQ9IjI3Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMCAwIEwgNiAwIDYgMyAzIDMgMyA2IDAgNiBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgZD0iTSAwIDIxIEwgMCAyNyA2IDI3IDYgMjQgMyAyNCAzIDIxIFoiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMjcgMjEgTCAyNyAyNyAyMSAyNyAyMSAyNCAyNCAyNCAyNCAyMSBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIiBkPSJNIDIxIDAgTCAyNyAwIDI3IDYgMjQgNiAyNCAzIDIxIDMgWiIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMCIgd2lkdGg9IjYiIGhlaWdodD0iMyIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMjQiIHdpZHRoPSI2IiBoZWlnaHQ9IjMiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjAiIHk9IjEwLjUiIHdpZHRoPSIzIiBoZWlnaHQ9IjYiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjI0IiB5PSIxMC41IiB3aWR0aD0iMyIgaGVpZ2h0PSI2IiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PC9zdmc+") 6 / 8px / 10px round;
}

I generated the SVG image its using as a background, but haven't made it up as a reusable codepen yet to allow you to generate one.

I think you'll be fine with the first option, but when I get time I'll make up the border-image one as a codepen and post the answer here

Youtube changed the options for embedding and you can't just disable it.

Your options are:

1. Use the rel=0 switch to make it so that the videos that are suggested only come from your youtube channel. you'd have to do this with an embed block rather than the video block as squarespace override the embed options
2. Use some Javascript code which listens to the videos events and places a picture over the video when it stops.

This blog has some code on it, which I've just tested on a 7.1 site with an embed block and works just fine: How To Hide Related Videos In YouTube Embeds (in 2021) - Maximillian Laumeister (maxlaumeister.com). (he also talks about the rel=0 option). Put an embed block in, and then click the little </> icon to the right of the URL. paste in the code from max's website, and make sure to change the bit he's highlighted with your own YouTube video code

I think you're right that at the moment you can't do this within the editor for 7.1 sites. As far as I know, you've got two options here.

1. Use javascript to change the target link (requires Premium/Business plan)
2. an alternative would be to inject a meta refresh tag (inside a code block or in advanced page settings)

OPTION 1: Use some Javascript to change the link in the front page (requires Premium/Business Plan)

this is probably the kind of solution most would employ and it won't muck your editor up quite so much. you need to find the link that has the "wrong" link and replace it with the "right" link. put a code block in your page and put the following code in.

<script>
let link = document.querySelector(".grid-item[href='/portfolio/digital']");
if (link) { link.setAttribute("href","/digital"); }  
</script>

this will change the link. What this won't do is redirect people if they directly visit a /portfolio/digital link. this might not matter, but I guess if the script fails, or they type it in then maybe they'd end up at the wrong page. 

OPTION 2: Use a meta tag to redirect the /portfolio/digital page

HTML has a meta tag that you can put in a page to redirect it. You can use this in a code block, but it does have the nasty habit of redirecting the editor so make sure you're in safe mode.

First things first, be Safe!

Before we start though, putting in redirect code like this is probably going to cause some strange behaviour with the editing experience, so you need to first put your editor into "safe" mode. To do this, look at your URL while editing your site and after /config add /site and then press enter. so the address will look like this

http://star-caterpillar-ej7s.squarespace.com/config/safe

You will now see a bar at the bottom that tells you that code blocks have been turned off. like this

Once you've done that we can begin. Add a code block (you might need to add a blank section beneath your portfolio first to do this). Now put the following code in your code block

<meta http-equiv="refresh" content="0;url=/digital">

if you click the "Enable Scripts In Preview" the page should redirect immediately. (the 0 in that code tells it to redirect immediately"

personally I like this option as it doesn't muck around with the main homepage but it does require you to have the /safe option on. I'm pretty certain that this would work in non-premium plans too. You could probably do both to be honest.

One of those should do what you want, depending on your plan.

Great content on your site btw!

D