iamdavehart

you won't find "content:f290" because that is from font-awesome (an icon font). you've inserted a custom script to add a font-awesome icon. the script looks like this, and there will be a font-awesome link/script tag as well probably <script> $(".Cart-inner").append("<i class='fa fa-shopping-bag' aria-hidden='true'></i>"); </script> It will probably be in your site-wide code injection. The location of the script in your sites source is consistent with where squarespace puts site-wide injected footer code. Go to settings > advanced > code injection

if you're the author of a post then you can click the tick/check mark just above the upvote button which will mark the post as the "best" answer for the original question. if not no worries. good luck with the rest of your site design.

text fields are not put in a fieldset as they don't get grouped. .sqs-block-form .field-list div.field.textarea .title, .sqs-block-form .field-list div.field.text .title { color:#008E8E; font-size: 2rem !important; } (btw, please could you mark the post that contained the answer to the original post as the solution, it helps people answering the questions - or looking for answers!)

no need for fancy devtools, just add "/safe" to the url in your designer and it will stop custom code running. then you'll be able to delete the script block. so change the url in your browser to "http://whateveryoursitenameis.squarespace.com/config/safe" and press enter.

for the background you've got a couple of options. simplest is to change the accent-color property, more complex way is to set appearance to none and style the checkboxes however you want /* simplest version */ .sqs-block-form .field-list fieldset.checkbox input[type="checkbox"] { accent-color: purple; } /* alternative version here but commented out. don't add both of these together, try the accent one first and if you want to go further try this */ /* .sqs-block-form .field-list fieldset.checkbox input[type="checkbox"] { appearance: none; width: 16px; height: 16px; background: red !important; border-radius: 2px; border: solid 1px white; } .sqs-block-form .field-list fieldset.checkbox input[type="checkbox"]:checked { background: blue !important; } */ for styling the legend titles but only for checkboxes use the rule: /* this is more specific than squarespaces normal rule for colour so you don't need !important, but for font-size there is a rule that's already been marked !important so you need it then */ .sqs-block-form .field-list fieldset.checkbox legend.title { color:blue; font-size: 2rem !important; }

The code you see on your computer is from the locally installed OpenType font which has the full set of characters. However, font files are quite large and as such when you use webfonts they are usually split up into smaller subsets (as most of the characters aren't used). Those subsets are usually conditionally rendered depending on whether a particular character is found in the page. The Omnes Pro font squarespace provide is from typekit and the particular unicode character you're looking for isn't in the subset provided so the browser is falling back to whatever default font it does have that character in. You can't directly alter the subsets that typekit download as they are done through Squarespace. However, with a bit of trial and error it does seem like you can overwrite the particular subset it brings down by modifying the font family declaration. so if you add this to your custom css you might find it works (I've only done this for the normal font weight, but it seems to work). @font-face { font-family: omnes-pro; src: url(https://use.typekit.net/af/fab690/000000000000000077359bed/30/l?subset_id=1&fvd=n5&v=3) format("woff2"), url(https://use.typekit.net/af/fab690/000000000000000077359bed/30/d?subset_id=1&fvd=n5&v=3) format("woff"), url(https://use.typekit.net/af/fab690/000000000000000077359bed/30/a?subset_id=1&fvd=n5&v=3) format("opentype"); font-weight: 500; font-style: normal; font-stretch: normal; font-display: auto; } Some things to note: I've completely (luckily and succesffully) guessed the subset_id so no idea whether that will break other unicode characters, but it works for this particular problem I'm not sure whether squarespace embed a unique code for each site, but give it a try. This definitely won't work if you change the font style / weight, you'd need a different set of CSS for that. Overwriting the default font rule for the whole site when it's just one word on one page seems overkill, so perhaps put that inside a style block on the particular page header if you can. Interestingly some of the google font collections that squarespace uses (e.g. Poppins) will render this unicode character correctly as it provides multiple subsets in a single stylesheet that are conditionally loaded, and has a subset that covers this range. here's a gif of me pasting that code into my site and the macron loading:

hi. you can add this to your custom css. When the header has an image specified the theme puts a class called Header--overlay on it. So if that's not there we can darken the image so much that it becomes black instead of white. header.Header.Header--bottom:not(.Header--overlay) img.Header-branding-logo { filter:brightness(0%) }

@alexdavey I replied in your other thread about how to get the email address. the iterableUserId was a bit of a red herring as that's more to do with the admin account that's logged in. you can do it (but you probably shouldn't) by accessing the profile api.

OK, I'm going to start by saying you probably shouldn't be doing this. I don't know what you're trying to do with the email on the client side, but there are probably other places to deal with this sort of information. That said, I don't know your use-case, so I'm putting this here for information / educational use. (which is basically what I did for the comment you referenced). As I said in the comment, once you've injected javascript you're working within the page, that means you can access the cookie, which in turn means that you can access the cross-site request forgery tokens and make calls to the squarespace api. so, what you need to do is grab the cookie, pull out the xsrf tokens and then call squarespaces profile api which will return you a json object of the logged in user. you can then deconstruct that to get the things that you want. but like I said, this is probably a bad thing to do as you will be returning the users first name, last name and email address into the browser network logs. this method does also return information about their addresses and orders if you've added anything like that. anyway, once that's done it's all relatively easy. this is the javascript that reads the cookie, finds the tokens, makes the call. note that the call is asynchronous so you have to do whatever work you want in the function. you won't be able to access the email until its returned. const cookieObject = document.cookie.split(';') .map(kv => kv.split('=')) .map(kv => [ kv[0].trim(), decodeURIComponent(kv[1]) ]) .reduce((o,kv) => { o[kv[0]] = kv[1]; return o; },{}) ; const userSiteInfo = JSON.parse(cookieObject["SiteUserInfo"]); const userFirstName = userSiteInfo["firstName"]; const userId = userSiteInfo["siteUserId"]; const xsrf1 = cookieObject["crumb"]; const xsrf2 = cookieObject["siteUserCrumb"]; const profileURL = "/api/site-users/account/profile"; const headers = { "x-csrf-token": xsrf1, "x-siteuser-xsrf-token": xsrf2 }; fetch(profileURL, { headers }) .then(r => r.json()) .then(j => { const userEmailAddress = j.email; const userLastName = j.name.lastName; console.log(userId, userFirstName, userLastName, userEmailAddress); // do whatever you want with your data here // but be very careful with peoples personal data!!! }); so you could - for example - create a code block which declares a span and then inside the response set that span to be the email address. Again: I don't know why you want to do this, but I would think very hard as to whether you did this for anything other than sh*ts and giggles. they can already access this information in the account frame and that is retrieved using a server side post not a client side one so is more secure. As you can see this returns the address book as well. (don't worry, I don't live in the Houses of Parliament), which could include a phone number. I mean, it's not *that* much of a worry in that you can only do this because they've already logged in, but still, I would question why you need to be making this API call and using this sort of data You'll also note that it returns a Payment Cards array. Did I mention that I don't think you should be mucking around with this sort of stuff?! I don't have any fake cards on this site (it's squarespaces yoga site)

pretty certain your url didn't upload correctly as if you visit the svg link directly it's just a blank screen. To be honest though, for just a small SVG like this, I'd encode it with a data url and then you can just do it all in CSS and you won't have to upload it anywhere. go to a website like this SVG to Data URI encoder (heyallan.github.io), copy your svg code in (just open your file with a text editor) click encode copy the output into your url (it will read something like url("data:image/svg+xml,.....")) should work just fine. further thought: If I was being totally honest, I'm not mad keen on the idea of putting the background-image rule directly on the SVG. doesn't sit right with me. I think it would be better to hide the SVG and then apply your background css rules to the containing link element. something like this .header-actions-action.header-actions-action--cart svg, .header-actions-action.header-actions-action--cart .icon-cart-quantity { display: none !important; } .header-actions-action.header-actions-action--cart a { display:block; width: 32px; height: 32px; background-size: 32px 32px; background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Shopping_Cart' dataName='Shopping Cart'%3E%3Cpath d='M2.86,3.95H2.85l.05.53Z'%3E%3C/path%3E%3Cg%3E%3Cpath d='M6.217,15.662a2.492,2.492,0,0,0,2.49,2.27h9.07a2.492,2.492,0,0,0,2.49-2.27l.67-7.52a1.478,1.478,0,0,0-.39-1.15,1.507,1.507,0,0,0-1.11-.49H6.407l-.14-1.82a1.752,1.752,0,0,0-1.74-1.61h-.97a.5.5,0,0,0-.5.5.508.508,0,0,0,.5.5h.97a.752.752,0,0,1,.75.69Zm13.05-.09a1.492,1.492,0,0,1-1.49,1.36H8.707a1.492,1.492,0,0,1-1.49-1.36L6.487,7.5h12.95a.49.49,0,0,1,.37.16.516.516,0,0,1,.13.39Z'%3E%3C/path%3E%3Ccircle cx='9.946' cy='19.928' r='1'%3E%3C/circle%3E%3Ccircle cx='16.436' cy='19.928' r='1'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; }

can't see the example on your site as there's no author profile on there, but the code still seems to work when I tested it out. what do you mean by distorted? if the aspect ratio is off make sure you've changed all instances of "100" in the code to be the same value. if you want to move the link about you can add another rule to the code to move the bio down (same thing as moving the link up) div.author-bio { order:100; }

Add this to your site css (this is for SQS 7.1) .header-actions-action.header-actions-action--cta { order: -1; } based on this layout

OpenSea's embed code uses their v1 API to locate the asset, which currently only supports NFTs released on ethereum. Your NFTs are minted on Polygon so you'll have to wait for OpenSea to release new embed code that calls to their (as yet unreleased) v2 API. more info here Support for MATIC network needed. · Issue #37 · ProjectOpenSea/embeddable-nfts (github.com) NFT API Overview (opensea.io) Squarespace certainly not interfering with the way it works. e.g. Try to embed something from the ethereum network and it will work just fine.

there are a lot of solutions on here for this kind of thing that require business plan and that's because at the moment there is no suitable element that contains the caption that we can use inside the lightbox version of the image. So any solution that is going to automatically copy the caption from the grid into the lightbox will need to use javascript to read the caption from somewhere and move a copy into a new element. I'm adding this answer here as this is a CSS only option which isn't quite right in that it won't allow you to automatically copy captions it will allow you to get the desired effect. Essentially what I'm suggesting is to use CSS rules that target the lightbox photo and fill in the content. this means that your captions end up inside css rules so you'd have to duplicate them if you wanted them in the gallery grid too. What we do here is create one rule that styles all our captions. we put an absolute position on it and I pin it to the bottom of the container element. I've centered it too because I haven't done anything about orientation of the picture here so this will work on landscape and portrait as it will centre. Here's the rules, with two caption examples: <style> figure.gallery-lightbox-item .gallery-lightbox-item-img::after { display:block; position:absolute; bottom:0; left:0; width:100%; height:25px; padding:2px; text-align:center; color:white; content:'' } figure.gallery-lightbox-item[data-slide-url=eh93bxzp9wth135k95a1y8qkpopbv7] .gallery-lightbox-item-img::after { content: 'Caption One' } figure.gallery-lightbox-item[data-slide-url=hfasdiorzzr0hmhb3shs8m0huja711-mcbhh-cfzz9] .gallery-lightbox-item-img::after { content: 'Caption Two' } </style> so what you need to do is add a code block to your page in an empty section beneath the gallery section (or you could do this in the main site css but it seems better to contain the code inside the page that has the gallery) and add the code above to your page. non business plans will be able to add an HTML code block and embed the rules in a style block as I have done here. What you will need to do is find your data-slide-url attributes and sub them in to the rules to set the captions. You can do this by looking in the source code of your site, or by publishing your gallery and then when you click the photo to open it in the url you'll see that the URL at the top of your browser will get an itemId appended to it. you need to copy those out and replace the data slide ids in your rules. just keep adding rules underneath the main one changing each data-slide-url to the itemId you've noted down above and then set the content to the caption you want. as we've said, this is specifically a non-javascript version, so it won't update automatically and you'll have to edit your code block each time you edit pictures or captions to line up, but this could provide a stop-gap until squarespace either allow the feature or give us a better element to style. Addendum: incidentally, just for css nerds, you can so nearly do this automatically with css, as there's an attr() function that can read attributes and so you could almost get it from the img tag's attributes (which do have the caption in) but unfortunately the img element is a self-closing tag and the pseudo-elements don't work.

@Enkue add :nth-child(1) to do this. replace 1 with 2 to style the second paragraph in a set of paragraphs etc. you might find you get some oddities with this because you can't be sure where squarespace are going to opt to use the paragraph tag, but it'll probably be mostly ok. if there are problems then you'll need a more specific rule as this if very general. so something like this will style the first paragraph with "freschezza" font and the others would be "okemo": @font-face { font-family: 'okemo'; src: url('https://static1.squarespace.com/static/60e62b67670179472177a892/t/6117cc3c4d93de1bc1c36a0a/1628949564190/okemo.otf'); } @font-face { font-family: 'freschezza'; src: url('https://static1.squarespace.com/static/60e62b67670179472177a892/t/6117cd3392b8dd44b5ac676b/1628949811699/Freschezza+Normal.otf'); } p { font-family: 'okemo'; } p:nth-child(1) { font-family: 'freschezza'; } more details here: CSS :nth-child() Selector (w3schools.com)

hey! change the selector to target only the section-background of the first section. just add section:nth-child(1) to your existing code like this: article section:nth-child(1) div.section-background::before { } hope that helps.

Hi @dylanwhite1570048433! The use case you described can be achieved in a lot of ways, but if you're on 7.1 then I'd just add a blank page, and then insert a gallery section and in that you can set the link to the picture. no coding required. It sounds like maybe you're using one of their portfolio pages but that's a different use case that provides a whole complex page underneath the specific item. I'd avoid that if you just want pictures that link through to hic et nunc, opensea or similar. if you're trying to do it using a gallery block, then click the little settings icon by hovering of the image thumbnail once you've loaded it up and you'll get a dialog that you can use to set the click-through link: If I've misunderstood and you're using a different technique to get your images on squarespace then let me know, as there are plenty of code options here to add your images using markdown blocks or code blocks, but I'd try and stick to Squarespaces in-built functionality if you can. FWIW, I think Squarespace and similar sites will integrate NFT sales at some point, and they'll do it well. Probably when they've been rebranded away from "NFTs" to "digital assets" or similar and more people are interacting with digital assets (whether they know it or not). Squarespace has a large market, but my guess is that the percentage of that current market who want to sell NFTs is small. When it gets big enough I'm sure SQS will implement features to allow it. They exist for the creators and as more creators seek to monetize their work this way you can be sure Squarespace will enable them.

you'll have to be a bit more specific about what looks "wonky" in each case, as it looks ok to me. maybe you mean the way the embedded calendar fills the code block? there's not much you can do within squarespace to change how the calendar looks *inside* the iframe, you'd have to do that in whatever embedding options Microsoft give you. There is a 17px padding in the code block you could get rid of if you wanted, just target that block in the css and set the padding to 0, that's about all I can see might be wrong.

I think if I understand you correctly the issue here is that the menu section begins below the "x" to shut it, so what we need to do is move the padding from outer container to the inner scrollable one and you should get the result you want. add this to your custom css and you should be alright .header-menu.header-menu--folder-list { padding-top: 0 !important; } .header-menu-nav-folder-content { padding-top: 167px !important; }

ok, so just put the block id back in then, that should do it. and add a * to make it apply to all elements inside that block @media screen and (max-width: 767px) { #block-46fb0b3b0ec8b69d2b6c * { font-style: normal !important; } }

take out the p2, and check the block id. that doesn't look right to me, you're better using sections. if you want it to be everywhere then you can probably just use body, but if you're trying to use specific pages, sections then download the Squarespace ID Finder chrome extension and find the relevant section id for your site/page. @media screen and (max-width:767px) { body { font-style: normal !important; } }

looks like you can use #sqs-member-access-page-root to access the div that contains the messages, as I can't see that id appearing in normal member pages, looks like it's just on that page. The components are #sqs-member-access-page-root h2#headline #sqs-member-access-page-root p#description #sqs-member-access-page-root button.join-button #sqs-member-access-page-root button.sign-in-button so you can add something to your css like this: #sqs-member-access-page-root h2#headline { color:red; } #sqs-member-access-page-root p#description { color:blue; } #sqs-member-access-page-root button.join-button { color:yellow; } #sqs-member-access-page-root button.sign-in-button { color:green; } give it a try and see how you get on.

CSS doesn't have a native sentence case as part of its text-transform property (it only has upper, lower and capitalize), but you can use the ::first-letter pseudo-selector to help you out. This won't be "true" sentence case insofar as it won't respect multiple sentences in a single block, but should be good enough for headings. so, if you type all your h2 and h4 headings as lowercase then you can style them as sentence case using the code that follows (don't need the style tags if you're putting it in your custom css): <style> h2,h4 { text-transform: lowercase; } h2::first-letter, h4::first-letter { text-transform: uppercase } </style> examples of all text-transform options:

you can just drop that iframe code into a Code block on squarespace. If it's not working it's probably because you haven't published your calendar in office 365 so that it can be made available publicly (the link you've provided doesn't work for unauthenticated users). once you've published it you can test if it's working by opening an incognito/private browser window and try to access your link. after that the embed should work.

You'd need premium to do this I think as you have to inject code into the lock screen. the standard custom css doesn't get inserted to the lock screen. If you've got premium, go to Settings > Advanced > Code Injection Then you can add something like this into the Lock Screen box (the bottom one) <style> .lock-screen::after { display:block; background-color:red; color:white; font-weight:bold; font-size:1rem; padding:1rem; margin:1rem; position:absolute; right:0; bottom:0; content:'Here is my red text' } </style> this will add the block you want EDIT: Assumed you've already tried this, but should point out that there are multiple editing and layout options for the lock screen in Design > Lock Screen and if you can use that to get your desired message across (albeit not in red and in exactly that position) you might find that easier.