Search the Community

Site URL: https://howtousepsychedelics.com I want to use tooltips to further define words. So, when users hover over a word, a tooltip box shows up and a definition of that word is in that box. Is this possible? If so, how? Thank you

Site URL: https://hexahedron-soybean-zdl8.squarespace.com/ Hi there, Is there anyway to change the header style for one page on my site? I currently use "Dynamic" across my site where i then have an image at the top of every page so that Navigation sits over the image. However, i would like to use a blog. Inside blog post pages, you cannot add images in a new section above the post. Therefore, when my site is set to "Dynamic", my header is white and bland. Ideally i would like to be able to set my header to grey with white navigation links and keep the blog post page white. Is this possible? I thought that the solution would be to use "Dynamic" header style across my site and then for my blog post pages, target them using CSS to change the header style to "Solid". I am not advanced enough at CSS to know how to write this code and if its even possible. Any help is massively appreciated. Thanks, Jon Site password: testing123

Site URL: https://www.danieljoseph.com.au/films Hey there, I am having trouble with adding a simple hover effect to my image blocks in the new Fluid Engine. Essentially I am trying to recreate this: http://www.ladybaguette.com/ Currently I have managed to Frankenstein some code which isolates each block individually and achieves the slight fade to black instead of the white background. Although for some reason I can't figure out why my ease transition CSS isn't working. My Code: #block-b1dfc7170d9088ca974b:hover .content-fill:after { content: ""; position: absolute; background-color: rgba(0,0,0,0.5); top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; transition: all .3s; } #block-b1dfc7170d9088ca974b:hover .content-fill:after { opacity: .3; transition: all .3s; } ^^ This is then replicated with the new block ID for the other images Another problem is that the fade animation will not happen when the cursor is over the text block which is on-top of the image. Any help in order to fix this would be much appreciated!!

Hi there, I'm wondering if anyone knows of a way to animate or change the behaviour of an archive block so that when clicking the drop down, instead of the list items instantly appearing, the list drops down smoothly? Or just any way for it to look less harsh. Thank you!

Site URL: https://bozoo.it/ Hello, I m having trouble with my website. I uploaded a custom font in CSS but it is not showing the right one in Safari/Android and Chrome from Android mobile HERE THE CODE USED AT THE MOMENT /* custom font*/ @font-face { font-family: NeueHaasUnicaW1G-Regular; src: url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339b37b08415113fc075b75/1664725884064/NeueHaasUnicaW1G-Regular.otf@font-face {); } // Newsletter Form Title // .newsletter-form-header-title { font-family: NeueHaasUnicaW1G-Bold !important; } // Newsletter Form Description // .newsletter-form-header-description p { font-family: NeueHaasUnicaW1G-Regular !important; } // Newsletter Form Fields // .newsletter-form-field-element { font-family: NeueHaasUnicaW1G-Regular !important; } // Newsletter Form Button // .newsletter-form-button { font-family: NeueHaasUnicaW1G-Regular !important; } // Newsletter Form Footnote // .newsletter-form-footnote { font-family: NeueHaasUnicaW1G-Regular !important; } // Site Title // .header-title-text a { font-family: NeueHaasUnicaW1G-Regular !important; } // Site Navigation // .header-nav-item a { font-family:NeueHaasUnicaW1G-Regular !important; } @font-face { font-family: NeueHaasUnicaW1G-Bold; src: url(https://static1.squarespace.com/static/62d133022b745d11a9223070/t/6339aee0e0b2951ae90bd2ff/1664724704997/NeueHaasUnicaW1G-Bold.otf@font-face {); } h1 { font-family: 'NeueHaasUnicaW1G-Bold'; } h2 { font-family: 'NeueHaasUnicaW1G-Bold'; } h3 { font-family: 'NeueHaasUnicaW1G-Bold'; } p { font-family: 'NeueHaasUnicaW1G-Regular'; } // Small or Tertiary Button // .sqs-block-button-element--small, .sqs-button-element--tertiary { font-family: NeueHaasUnicaW1G-Regular !important; } // Medium or Primary Button // .sqs-block-button-element--medium, .sqs-button-element--primary { font-family: NeueHaasUnicaW1G-Regular !important; } // Large or Secondary Button // .sqs-block-button-element--large, .sqs-button-element--secondary { font-family: NeueHaasUnicaW1G-Regular !important; } Thank you in advance

I am looking at a way to insert data from a single cell from a Google Sheet into a website so that whenever the cell is updated, the site will auto update. Is this something I can do within the tools available on Squarespace or does this require a special code block?

My typefaces are not showing up on my mobile site. Below is the code, I'd love some help! @font-face { font-family: 'mundial', sans-serif; src: url('https://static1.squarespace.com/static/62cd90e706e63f41715fba9f/t/633b0ffe7e360b02782dc2fd/1664815102204/font.ttf') format('truetype'); src: url ('https://static1.squarespace.com/static/62cd90e706e63f41715fba9f/t/633b08f4432c494ec162dc04/1664813300976/font.woff') format ('woff'); }

Site URL: https://bozoo.it/ Hello, I've update a custom font on my website and I would like to manage and control the type size of specific sections without affecting the rest of the site. Here the request: Make the newsletter title and body text smaller (for example the title not to be h1 but h2) Make header text text smaller without affecting the rest of the site. In the shop section https://bozoo.it/shop/p/fred the product title, quantity and price do not use the custom font I uploaded. In that section How can I make the accordion title text smaller and the product title larger? thank you in advance!

Site URL: https://granata-bio.squarespace.com/contact Does anyone know how I can move the form titles underneath the form field? https://granata-bio.squarespace.com/contact PW: BIO834

Site URL: https://www.azulstudio.co.uk/ Site URL: https://www.azulstudio.co.uk/ Hello! my website is https://www.azulstudio.co.uk/ I need help with my slideshow gallery section (the WORK section) so the button becomes a sort of frame around the project image (see screenshot). Also, I would like the title to be placed on top of the image, and the description below (while remaining inside the frame). This way it will feel like you are clicking on the image but instead you are clicking on the button. If this is not possible, could the image have a link to its specific project (page)? thanks for the help!

Hello. Is there a custom css code to change the color of my PNG logo (which is black on main page and inverted on other pages) in navigation bar during hover effect? Thank you in advance! Sincerely, Ashley

Site URL: https://www.prsnlhb.com/ Hi everyone, Does anyone know how customise / increase the weight size for buttons? Thank you!

Hi I have used the below custom code to change the banner size on the bedford template so it displays nicely on a ipad screen. However this also effects a pc with the display resolution size 1024X 768 is there any code I could use so it would just effect a ipad screen and not a pc screen? Thanks in advance for any help given. /* tablet top banner changing size to display better on tablets */ @media screen and (max-width:1112px) and (min-width:769px) { figure img { width: 100% !important; height: auto !important; left: 0 !important; } .banner-thumbnail-wrapper.has-description { height: 180px !important; } }

Site URL: https://www.dantonedesign.com/ Is there a way to add fading load animation transition to code blocks? Basically, I want the 'colour swatches' for each project on the home page (https://www.dantonedesign.com/) to load smoothly, in a similar way to the instagram lazy-load-style fade in, visible on this page (https://www.dantonedesign.com/play) - in other words, i would like the code blocks used for the project 'swatches' to fade in, the same way an image block does if you add a SQSP fade in animation. so the website looks smoother when changing pages. Any help would be amazing, thanks in advance! 🙂 Dan

The default action is a zoom in on the same picture no matter which accordion item is clicked. Is there a way to assign a picture to a specific accordion section and for it to change to that picture when it's clicked?

Site URL: https://mistoa.squarespace.com/ Hi! I'm trying to change Checkout button's color on Cart page, but haven't been able to do it. https://mistoa.squarespace.com/cart Any ideas? Thanks!

Hi, I'm trying to create a site with page sections that are the full height of the viewport (and that flex with window size). This was quite achievable in 7.0, and also in 7.1 pre-Fluid Engine update. Now it seems there's no options at all for having full viewport height sections that flex, unless I'm missing something. In the classic page section editor in 7.1 setting the section height to 100 would give you a 100vh section that adjusts to viewport size. Doing that in a Fluid Engine section does not yield the same result. Any ideas or help on achieving this would be greatly appreciated.

Hi, I'd like to change the banner height on the header image of just one of my index pages. It's currently full screen but I want it do just be half of that. What is the best way to do that?

Hello! SOS! I have an Image gallery carousel set up in a blog post and I am trying to figure out how to show the caption on hover as well add a teal overlay and if possible also make the image bigger when hovered over. This is what I have: This is what I would like it to look like:

Site URL: https://imicrobes.com/press I'm looking to figure out how to disable the links on the thumbnails. When its clicked it goes to the blog post within the squarespace website. Ideally I would like it to go to the link that is the same as the source url however that seems more difficult.

Site URL: https://tarantula-porcupine-bkrr.squarespace.com/ Hi all! Site password is 1234 Using the Team 2 page layout, I'd like to center the items within each list section while retaining the Max Columns value. I've tried using different design options and using this code in Custom CSS: .user-items-list-simple { justify-content: center; display: flex !important; } All with no luck thus far. Has anyone come up with a solution for this? Thanks!

Site URL: https://www.mikepintea.com On the mobile version of my front page there is a strange white space below my only section on that page. This white space is only visible on mobile, not on desktop version. Using Version 7.1. Played with every setting I could find, and tried some previous Custom CSS that people have suggested, but they did not work for me!

Site URL: https://turkey-emu-sd4a.squarespace.com/ Hi all, I've added Muli and Lato as custom fonts to my site. Lato is working well but on some browsers/devices another serif font shows instead of Muli for paragraphs. My code has worked fine for another site, also using the 7.1 template, so I'm baffled. Any ideas on how to troubleshoot would be very welcome? My custom code is below and I've uploaded a pic to show my fonts have been added as custom files. @font-face { font-family: 'Muli'; src: url(https://static1.squarespace.com/static/5efccf013260ec23a0736abe/t/5efcd5307e7bab5539c1e493/1593627952821/Muli-Regular.ttf); } @font-face { font-family: 'Lato'; src: url(https://static1.squarespace.com/static/5efccf013260ec23a0736abe/t/5efcd4e8603e98547506a5bd/1593627880622/Lato-Regular.ttf); } h1 { font-family: 'Lato'; } h2 { font-family: 'Lato'; } h3 { font-family: 'Lato'; } h4 { font-family: 'Muli'; } p { font-family: 'Muli'; }

Site URL: https://sphere-perch-tsl5.squarespace.com/available-works I want to display my artworks but in their full sizes, the system is not allowing me to do this. This is why I have investigated the Custom CCS option. So far I have deleted the image for one that doesn't show all of the artwork, and attempted to insert a new image file uploaded from my computer, but it keeps telling me 'Syntax error on line 1' and the https:// is highlighted in purple. I didn't enter any code above or below this. I don't know if that matters. But if it does I want to know how I can fix it so I can have all of my images showing properly. At the moment most of them are cropped - not good. I should add that I'm a complete ignoramus when it comes to coding, so you're going to have to explain it to me like I'm a toddler. (Sorry!) Thanks in advance for the help. Orla

Hi, I have applied a portfolio page which is acting as my home page. On this page I have customised the header to be sticky so that it appears under a video on loading the page and as you scroll down it sticks to the top. This works perfect on the home page but it is the only page that i want it to appear. It doesnt happen on the contact us or about page however at the moment it is appearing on the portfolio subpages which are linked to the home page. Does anyone know how to exclude this style from appearing on the subpages. Below is the code I have currently <style> @media screen and (min-width: 768px) { #header { position: sticky; top: 0; display: none; z-index: 10000; } main .page-section:first-child + #header { display: block; } main .page-section:first-child { min-height: calc(100vh - 93px)!important; } } </style>