Search the Community

Site URL: https://star-oriole-yjrb.squarespace.com/config/settings/advanced Is there a way to add text blocks and code blocks within, and throughout the store page?

Hi there, I'm using the Brine template, and I'm looking to move the mobile sign in from on the page (top-left, top-center, top-right or bottom-left, bottom center, bottom-right) into the navigation. Is there a way to do this? Not sure if I NEED custom code for this, just didn't know if there was an existing workaround for this. The reason I want to do this is because it shows up a little weird on iPhone X, XS, etc. with the larger screen size. I'd rather just have it in the mobile navigation–seems more intuitive anyway. Thanks in advance!

Hi everyone. I'm currently trying to set up a webpage for an arts project featuring texts, in the form of poetry and prose, for a group of writers. For the design we all agreed on something simplistic like this page here: rapsode.no. No flashy imagery, just our works with a thick header like shown in the example. However I'm at a loss and seemingly unable to change anything about my header, except for placement. Will i need a custom CSS for this? And how would I go about doing so? Thanks in advance!

Site URL: https://www.hivemusic.com/spiritcity-1 Hi! I'm using a custom font on this site but am struggling to change the title and subtitle of the image card on this page to my custom ones.... https://www.hivemusic.com/spiritcity-1 I'm talking about the area that says "SPIRIT CITY" and the area below that which has the description in? Thanks! R

Site URL: https://www.geekwire.com/2020/concure-oncology-raises-2-5m-breast-cancer-treatment-fights-tumors-radioactive-seeds/ Hi, I would like to add a page to my website for media related content. GeekWire recently published an article and I would like to embed the content of this article onto my page. I have been trying to embed the URL to the article but it does not seem that it is considered an "embeddable URL" which means that I may need to inject custom code in order for this to work. Is there a general script that I can code inject onto my page? Thank you

Site URL: https://www.thefizeekgeeks.com/ How do I adjust the size of the black space when the drop down menu occurs? It is too wide compared to the font... Example: Thank you

Site URL: https://www.libraeducation.co.uk/home Hi, The dropdown menu on my site has white font and white background. Does anyone know how I might change that? Many thanks to anyone that can help! Oscar

I am creating a custom code section on my home page and want to use css-grid to style it. Everything works fine except when I try to use the minmax function with fr units. This is a common way of having elements stretch evenly across a container but then stack when the window is resized and the min width (250) is reached. However this isn't working for me in Squarespace. Any thoughts on why? I'm using Chrome, so fr units and css-grid is compatible. grid-template-columns: reapeat(auto-fit, minmax(250px, 1fr); This seems to work, but it's obviously not what I want: grid-template-columns: reapeat(auto-fit, minmax(250px, 300px); Here is my full code: <div class="home-services-container"> <div class="service-card service1"> <h3> Creative<br /> Engagement </h3> </div> <div class="service-card service2"> <h3> Ideation + <br />Innovation </h3> </div> <div class="service-card service3"> <h3> Career <br/> Coaching </h3> </div> </div> CSS: .home-services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 16px; } .service-card { display: flex; flex-direction: column; justify-content: flex-end; color: #401025; height: 200px; width: 1fr; padding: 32px; border-radius: 8px; box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1); background-repeat: no-repeat; background-position: -150px -80px }

Hi all, In my Brine template shop page, I am trying to re-order the sort function I have enabled for customers to sort through the different categories of products. Right now the function automatically orders the categories in alphabetical order, but that does not work with the layout of products on the shop page. Is there any way to customize the order the categories are displayed in? P.S. I am aware I can number them by editing the titles of categories, but I hate the look of them in numerical order, I just want to be able to display them in an order that follows how I have my products displayed. Thanks

im trying to override all cursors with an egg. yes you read that correctly, i want the cursor to be a tiny fried egg, please dont ask why. i used this from a previous discussion board but it didnt work: { cursor: e-resize; } or {cursor: url(images/my-cursor.png), auto;} any ideas?!??!?!?!?!??!?!?!? oh my site is maggiedrewbrennan.com in case you were curious. an egg would be perfect for it.

Hello, I run a small bread bakery and looking for a central pre-order location to give customers the opportunity to buy online and pick up. The challenge: for a pre-order we require 48 hours. So if someone went to the website to preorder on a Monday they could only pre-order for Wednesday bread production. Tuesday for Thursday, Wednesday for Friday, Thursday for Saturday, Friday through Sunday for Wednesday. Is this something that squarespace can handle?

Site URL: https://www.todoinc.co/ Hi everyone, Just wanted to ask how I should go about adding the word "MENU" right beside the hamburger icon in the navigation. I'm using the Ready template in the Skye template family. Ideally, it would look something like this: What code can I inject here? The site is https://www.todoinc.co/

Site URL: https://www.mildredlocke.com/ Hi there, I'm quite new to Squarespace and am struggling to make an embedded Instagram post on my blog look half decent! Basically when I add the embed code, what I get is a square block containing the photo at the top, the caption below it, but the whole thing is aligned to the left, so there's a big gap on the right hand side. What I'd like, ideally, is to be able to customise how the Instagram post is displayed, with the photo on the left, the caption on the right, and therefore a block that fits the entire width of the page. Is there a way around this? Including a current photo and an example of what I'd like to achieve. Thanks in advance!

Site URL: https://www.chrispcreations.com/ads#/jdholiday/ The light box description font is difficult to read. I tried to change the description font color to white by putting the following code into the specific page's advanced settings: <style> div.sqs-gallery-block-grid .meta .meta-description p { color: hsla(0, 0%, 0%, 1); } </style> Didn't work—is there a way I can make the description font white, or the hover overlay 100% opacity?

If you want to use custom font for Navigation, just copy - paste the following codes. Add code to Home > Design > Custom CSS 92 Templates Navigation Link Color - Hover - Active Color Avenue @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav nav ul li a { font-family: your-font-name; } Aviator @font-face { font-family: your-font-name; src: url(enter your font name url here); } nav#main-navigation ul li a { font-family: your-font-name; } Bedford Template Family Include: Anya, Bedford, Bryant, Hayden, Bedford @font-face { font-family: your-font-name; src: url(enter your font name url here); } #mainNavigation div a { font-family: your-font-name; } Brine Template Family Include: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. @font-face { font-family: your-font-name; src: url(enter your font name url here); } .Header-nav-item { font-family: your-font-name; } Farro Include: Farro, Haute @font-face { font-family: your-font-name; src: url(enter your font name url here); } .Header-nav-item { font-family: your-font-name; } Five @font-face { font-family: your-font-name; src: url(enter your font name url here); } nav#main-navigation ul li a { font-family: your-font-name; } Flatiron @font-face { font-family: your-font-name; src: url(enter your font name url here); } ul#nav li a { font-family: your-font-name; } Forte @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav ul li a span { font-family: your-font-name; } Ishimoto @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav #nav li a { font-family: your-font-name; } Momentum @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav ul li a { font-family: your-font-name; } Montauk Template Family Include: Julia, Kent, Montauk, OM @font-face { font-family: your-font-name; src: url(enter your font name url here); } #topNav ul li a { font-family: your-font-name; } Native @font-face { font-family: your-font-name; src: url(enter your font name url here); } #navBlock ul li a { font-family: your-font-name; } Pacific Template Family Include: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific @font-face { font-family: your-font-name; src: url(enter your font name url here); } #mainNavigation div a { font-family: your-font-name; } Skye Template Family Include: Foundry, Indigo, Ready, Skye, Tudor @font-face { font-family: your-font-name; src: url(enter your font name url here); } .nav-blocks-wrapper div a span { font-family: your-font-name; } Tremont Template Family Include: Camino, Carson, Henson, Tremont @font-face { font-family: your-font-name; src: url(enter your font name url here); } #mainNavigation div a span { font-family: your-font-name; } Wells @font-face { font-family: your-font-name; src: url(enter your font name url here); } div#topNav ul li a { font-family: your-font-name; } Wexley @font-face { font-family: your-font-name; src: url(enter your font name url here); } div#topNav ul li a { font-family: your-font-name; } York Template Family Include: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York @font-face { font-family: your-font-name; src: url(enter your font name url here); } .site-navigation div a span { font-family: your-font-name; } Squarespace 7.1 Include: Novo, Pazari, Nolan, Utica, Cami, Matsuya, Nevins, Kester, Gates, Zion, Classon, Hawley, Suhama, Elliott, Otto, Tepito, Balboa, Beaumont, Quincy, Talva, Minetta, Falodu, Hester, Crosby, Ventura, Maru, Tresoire, Almar, Alameda, Patil, Stanton, Paloma, Fillmore, Palmera, Souto, Brower, Merida, Grove, Harman, Rivoli, Noll, Bergen, Degraw, Corrigan, Sackett, Lakshi, Pulaski, Suhama, Cailles, Colima, Barbosa, Clune, Irving, Suffolk, Clarkson, Lusaka, Bailard, Malone, Roseti, Euclid, Carmine, Wycoff, Harbor, Ocotillo, Fayette, Roseti, Dario, Soria, Morena, Rey, Lenoix, Bleecker, Vandam, Cruz, Kitui, Waverly, Vance, Orina, Chotto, Auburn, Juniper, Palmer, Atlantic, Iduma, Pine, Eldridge, Pulsaki, Amal, Suhama, Hart, Carroll, Noll, Hidano, Palermo, Cailles, Archer, Kearny, Sellwood, Essex, Mason, Gramercy Studio, Cole, Devoe, Randi, Zorayda, Manor Studios, Grant, Toledo, Hoyd, Troutman, Tantillo, Maqueda, Hemlock, Bogart, Florence @font-face { font-family: your-font-name; src: url(enter your font name url here); } .Header-nav-item a { font-family: your-font-name; } Made by Tuan

I'm trying to change a text blocks background color and opacity using this css: #block-yui_3_17_2_1_1583796715032_20149 { background: #f0f0f0; opacity:.5; padding: 50px; } BUT the change in opacity effects the text as well, which I don't want. How do I isolate just the background opacity so that the text stays solid? UPDATE - I figured it out, had to change HEX to RGBA.

Site URL: http://www.coindisplays.com I have enabled related products on my site. When a customer goes to one of our products, they see the related products at the bottom. I was able to stylize some things like the amount of products shown and few other details however the title has been an issue. Currently, it seems to be defaulted to H2 size and it is just too big. I tried to omit putting a title but it would not let me, it is required. I want to be able to change the size of it, to H3 or different and not affect the rest of the site. This should be able to be stylized like the other details of this. The images adjust based on the browser however the text stays large. See attached image. Please assist if you know of a workaround or css code to change it. Thanks, Paul

Site URL: https://www.inverseimaging.live/test2 Hi! I've got a website with a webcast on it and my client wants the viewer to be able to ask questions. I've put a form in, which works great, however once the question has been asked the form changes to just 'Thank You'. Is there a way for the form to refresh again so the viewer can ask another question? Obviously I don't want the whole page to be refreshed as the webcast would be interrupted.

Site URL: https://spreadsheetman.com My product pages have the PURCHASE button at the very bottom of the text content... so as I add valuable content to the description of my products, the purchase button gets pushed lower and lower below the fold... Tests show my purchase volume to go down 50% when the purchase button is below the fold. How can I add a purchase button to the top (at the price) or move the current button in version 7.1 of squarespace?

How to do make my product title font be the same font as H1, and price font be the same as H2?

Site URL: http://bit.ly/39WMa9Q Hi everyone, I'm curious if anyone knows enough Squarespace behind the scenes to help me understand how a particular site customized their template. I'm familiar with basic CSS tweaks and styling themes, but not fully in a Squarespace context. I don't know the ins-and-outs of SQ templates, available content types, etc so could really use some pointers with the following example ... Here's the site I'm looking at - http://bit.ly/39WMa9Q . First of all, looking at the code, I know based on their template ID that it's a custom one based on Farro/Haute family (template id looks very similar but not quite the same). Looking at the two demo sites, I guess it's closer to Haute https://haute-demo.squarespace.com/ than to Farro https://farro-demo.squarespace.com/ . So with Haute as my starting point, what should I do to make my demo site I'm working on look a bit more like theirs? To achieve: a) most important - a similar looking Home page hero with the background looping video fading to image carousel. I think they might have done this with extra JS in their <head> section (look for function headerFade in their homepage source code), but I'm not 100% sure. How do I achieve this look? b) a similar looking content type like their About and Retailers pages (see their top nav); the About page in Haute is not quite there in terms of available layout elements I think, but I may be wrong? c) the tiling of content links under the hero banner (I believe this is blog post tiling because it looks very similar). theirs is tiled as 3-2: first a row of 3 , then a second row of 2; in Haute it goes 3-1-3 : 3 in 1st row, 1 in 2nd row (full width), then 3 per row again - and I don't know how to change it d) this one's not as crucial - the Instagram tiles at the bottom which also connects to their Gallery page

I would like to customize a few things in things in my carousel gallery with the Margot template. I am displaying photography work and would like the gallery to be clean and not distracting. How can I do the following? : - adjust arrow sizes (i'd like them to be smaller) or replace them with a different style/type of arrow - arrows on 0% opacity/transparent background. - have the first & last images be centered (at the moment only the in between photos are centered) Is it possible to display one image at a time in a carousel gallery or should I be using a different block? Thank you in advance!

Site URL: https://concure.squarespace.com/learn-more-about-concure-oncology Hi all, I have an unliked page that is public but not accessible through my main site (i.e. does not appear on the navigation bar). I would like to add code to the <body> of this page but the only option for code injection (Settings > Advanced > Code injection) only adds code to the header (<head> tag) of the page. The code I would like to add is meant to be specifically added to the body of the page but I have not found a way to do this yet. The pages on my main site, however, do allow for this through Settings > Advanced > Code Injection > Footer. Would the code added here also be included into all pages on my site? Even those that are not linked? If so, that would resolve my issue but I have not been able to confirm this yet. Thank you in advance.

Site URL: https://concure.squarespace.com/learn-more-about-concure-oncology Hi, I created an unlinked page that I would like to use as a landing page. However, I do not want users to see the navigation bar associated with my main site. Currently, this page has a logo and would like to keep it as is on the top banner. How can I just remove the navigation bar through a page header code injection? For reference, I am using the Bedford template. Thank you in advance.

Hi Guys, I'm an artist and would like to offer personalized e-cards with corresponding mp3 digital downloads of original music. I understand that it is not possible to offer variants of digital items, so I will need to make each a unique product. I believe I can create the products and set up the form for personalization without an issue. However, I am wondering if it's possible to implement my vision for delivery. After a person selects, personalizes and purchases an image/music combo, I would like the recipient to get an email with a standard subject ('A gift for you!'). The body of the email should display the image, the personalized message, and a link to the mp3 download. Is this possible? Any help would be appreciated!