Squarespace text block background color ⚡️ FREE TRAINING⚡️ DIY Your Dream Site: 5 key steps to a stress free + beautiful website - Join instantly here: https://bigcatcreative. field-list . I have created a duplicate with the classic editor. This step by step tutorial involves a bit coding but it’s really easy! It’s a simple copy and paste code to add the background color to the text block and will work on any Squarespace website or plan. Oct 31, 2012 · You want to target the ID as the selector to change the background color of one specific block. accordion-divider { color: #ff00ff !important; } #2. Sep 26, 2024 · Change the text color of your quotes. Where I had opacity, it removed it. An example is www. /* Background Colour */ #BLOCKID { background : rgba ( 0 , 0 , 0 , 0. Use Heather Tovey's most excellent looking Squarespace ID Finder to get the data section id. If you put that text into a new page section in the index and break up the page into the content above and below (you would want to duplicate the page and delete the top half on one , and the bottom half on the other and then put them into the same index). Modify the background color of the quote block. Feb 10, 2014 · I have a issue with the effects of the code displaying only when I go to Design --> Custom CC. Apr 12, 2022 · This tutorial is about how to change the background color on your SquareSpace website. sqs-block-content { padding-left: 5%; Sep 26, 2024 · Change the text color of your quotes. 6 ); padding-top : 1vw ; } #BLOCKID { background : rgba ( 0 , 0 , 0 , 0. 3:25 Adjusting the left and right padding with spacers Jun 6, 2019 · Was this helpful? Ask your Squarespace questions now: https://www. Nov 14, 2022 · The way that you currently have this set up, that text is in one block but it is not in a section that we can colour from edge to edge. com on Feb 13, 2025 · I am looking for some CSS or JavaScript that will change the background color of the gallery block editor UI. It has to do with this code specifically, which creates a translucent-white background for text in a specified block: #block-848b3e4b0bc6ae27ccc5 { <---- my block ID background-color: #f0f0f088; padding: 1px; text-align: center; } Oct 18, 2024 · By considering color psychology, color harmony, and contrast and readability, you can choose the perfect color for your text block in Squarespace. I was wondering if there was a way to add colour to a block to make it a physical box of one colour which my text would sit in and be far easier to read. In this default size you can see there's no visible background so the first thing we have to do is to check what is the id of the block which has the text we want Here's how you can edit your text blocks on Squarespace to add a background color#squarespace #websitedesign #bycrawford #shorts Aug 25, 2020 · Ideas to where to add a background color to your website design. org Hi everyone! I'm stuck in how to change the color of the scrolling text! I've looked everywhere and followed directions I've found and still I can't figure out how to change the text from black to red Any help is greatly appreciated! Aug 30, 2020 · It seems like Squarespace doesn't like the semi-transparent option. squarespace. Once added, drag it onto your text block and resize it to match the text block size. I was unable to change it in the theme/style section. There are 7 "steps" so 7 different dropdown boxes and each needs a different color (hex codes below) I tried changing background and using the ID block and markdown-block {color: #####} and {background:#####} and nothing has worked. Using an image block is super fun hack to adding color behind text without using the text block. To add a different Dec 23, 2022 · One of the things that makes Squarespace so great is its flexibility – you can change the background color of any text block to match your brand or style. By whereisscott, July 1, 2020 in Customize with code. Thanks for reading. Adding a background color to a text block in Squarespace can help make your website more visually appealing and engaging. see screenshots. First, go to the page where you want to add the text block. button-block . First, find Text Block ID. 15 in this case) represents the opacity of the background color. The video below is a pretty outdated, but the codes themselves are still great! Underneath the video you’ll find the codes and info on how to use them in Squarespace. I did not insert any CSS that would effect the background color of a text box. I hope to get the left and right animation of text happening in this section using the classic editor but want the translucent box overlapping like it is on fluid editor and the same size too. To do this, go to your text block area and add a shape block from the +Add block toolbar. ). You can also apply different blend modes and blur options to the individual block. 0 Cover Page: Add background color to text block. I can see it when I am in the css panel and view the "preview" however it is no longer visible on the Live site. I found that changing the background color of each individual box is not possible without finding the block ID and changing it yourself in the custom CSS, so thats what I did. Then follow the 5 steps below to customize it for your website design. Oct 16, 2022 · 4) Add Background Color to Text Block in Squarespace Using Shapes. min-height with fixed pixels to equal all columns 2. Find the Source Block ID for the text block you'll be adding the background to. form-block { /* block background color */ background-color: #000000; /* text color */ color: #ffffff; } The Submit button will also change color when you do this, so you can add the additional code below, if you want to modify the Submit button too: Jun 13, 2021 · The div that contains the text has class "sqs-block-content" (try it). To change the background color of a text block, simply click on the block and then click Apr 15, 2023 · Hello. fe-block-d76286978c2c65f9e336 {display: none !important;}} You can adjust the position of the text block in Squarespace editor. Aug 17, 2021 · Use the CSS snippet below to add a transparent background behind any text or image block on your Squarespace website. Can't find the right code. 2) Make the background change when you hover over a specific list item. Answer within 24 hours. com/free-training-ytCr Dec 28, 2022 · There are two ways to change the background color of a text block in Squarespace. TIMESTAMPS: 0:00 – Intro 0:37 – Codes and Chrome Plugin Mar 12, 2021 · Following what seems to be an update to SS yesterday, my code for adding a color background to a text block is no longer working. Alter the quote source text appearance. I'd prefer the full screen width of the May 8, 2022 · Site URL: https://www. However, the text is staying beige, even when addi Jun 23, 2022 · Hi @NVD. com This is a Squarespace tutorial on how to change the background color of a Tex May 19, 2020 · Creating a Faded Coloured Text-box Background for a Contacts Page 1. What's the fix for this? Can someone help me with this? Thanks in advance! Jan 5, 2021 · Hey @SolveigTraeet 😀 If you are using the built in newsletter bock for squarespace, this code will change the color of the "input text" . remove current background, and set background for container contain (text & button) Just some suggestions. Mar 4, 2025 · If you scroll down to the "Related Product" section, the text "You Might Also Like" has the same color has my background. com Password: demo Basics of Adding Background Text Block. has-background ): hover . Learn 3 ways to add a background to your text. 2:20 How to change the padding and alignment. To make the color transparent I added e0 after the color, like this: #947342e0 #collection-5f4719c8e451e21ba1543a9d . 0 and 7. I want the color of the form to match the background color of my website, and the text to be white The code I have in "Custom CSS", which worked before, looks like this: . . Text blocks can have a solid color background, and thanks to CSS we can customize it!- - -This is just the start of all the cool things you can do with custo Dec 1, 2020 · #block-d325a806d44c4257f1d4 { background: hsla(0,0,0,. 1:52 How to change the background color. Use Chrome Block Identifier to source block ID . Adding a background color or image to a text block in Squarespace can help make your website look more visually appealing. But i did try with CSS putting blend mode on the text block, but literally nothing happened to the text, it was just plain white text. To change the background color of a text block, simply click on the block and then click the “Style” button in the toolbar. Aug 9, 2023 · The code for changing the background color behind the text of a form block has stopped working on my website. Aug 16, 2019 · Specifically the colored text boxes arranged side by side, one on top of another. Here are some useful code when you use the accordion block (Add to Design > Custom CSS) #1. Here are the steps to follow: Accessing A text content block can have a unique background color and border (stroke). equinox. Apr 3, 2020 · If you’d like to add a background color to text only, simply forget about the button block and format the text in front of the background color as you would like to design it. section-background { background-color: red; } This is for v7. In the Block Settings panel, select a Background Color. I'm also wondering if it's possible to add a background color to a text block, image caption? See same screenshot from sketch. sqs-block-html . Steps to Add a Background Color. The specific code used to achieve this look (see below) Show Notes. fe-block-270c1c9e6080aa2c3621 {display: none !important;}} // text block for desktop hide on mobile @media screen and (max-width: 767px) {. css; Recommended Posts. None of the CSS I have added changed ANY color to the sky blue that now appears everywhere. In this case, I want the grey box with black text to change to the green background colour and white text on hover. Last but not least there are features to outdent/Indent text, Copy plain text, and clear all kinds of formatting from the text. Something like this, where the text is regular text (not part of an image), so I can add links etc. Sep 18, 2019 · @chocolatesalam so you can use 1. Jun 27, 2024 · Thanks tuanphan, this worked for the background of the text block - however i had overlaid it over a shape so that the 3 shapes across the page will be identical. newsletter-form-field-element::placeholder {color:red!important} Mar 1, 2024 · Hi brains trust, I have tried changing the colour profile of an accordion in one of my courses but it keeps reverting back to original settings for some reason. To do this, click the Settings icon (the cog) in the top-right corner of the text block. Does anyone know if it's possible to have a semi-transparent color behind text? Copied the code below. Could someone assist please with correct CSS to change accordion description text to white (on my brown background). By alanna7181, November 1, 2021 in Customize with code. Nov 21, 2024 · Add this code into custom css and . The first is to use the Block Settings panel. text; Squarespace Webinars. Thanks! Sep 26, 2024 · Here are the codes used in this tutorial. The final way to change the background color of a text block in Squarespace is to use the shape block. Click on the “Edit” button to access the page Jun 11, 2024 · // text block for mobile hide on desktop @media screen and (min-width: 768px) {. Please help and thank you in advance!! Nov 1, 2021 · Creating code for a solid color background behind a text block. When I switch the block ID in your code to that of the shape, the gradient doesn't take effect. Squarespace Webinars. Mar 23, 2025 · To add a background to Text Block (on Product, Blog Post, Event Detail) you can follow these. field . sqs-block-button-element { background: red !important; color: green !important; } Email me if you have need any help (free, of course. 1:25 How to change the text color. 1. To reach all of these design settings, click on the text block once and select the paint can icon that appears above the block. 0:28 Insert code block. form-wrapper . Adding a Background Color & Corner Radius to Text Block. Want to add some color to your Squarespace website? In this super quick tutorial, I’ll show you how to add a background color to a text block to make your co Aug 6, 2015 · This should do the trick for the Form Block background: . Jun 2, 2020 · . The block-ID div is probably not the right target. The second way to change the background color of a text block is to use CSS. May 28, 2024 · Hello, I have two questions on how to customize hover effects using a Simple List in a Services Section. 15); padding: 1px; text-align: center; } For anyone that doesn't know, the last number (. I couldn't find that text category. Oct 21, 2024 · I didnt, I used the option in the text block "Style background", where you can select blend mode without having a background color. I am using the color codes and css below to make certain homepage images have a transparent dark grey overlay with beige text change to a transparent beige background with dark grey text on hover (basically just switching colors on hover). We can also add a text strike feature to our website Text. So if you want to learn how to change the background color on your Squ Aug 15, 2021 · I'm trying to justify the text on my Image Poser block, and would like it to align in in the left top corner. Change Dividers Color /* accordion divider color */ . Be sure to edit the values so they match the style of your own website! Sep 24, 2020 · I'd like to create a part of certain pages (not the headers) with a text block and behind it a color other than my regular background color (which is white). I'm able to change the background color with this code: #block-5f063dd8e30efe54dc47 {background: #809DB3; padding: 50px; text-align: center; color: #FFFFFF;} But there's no spacing in between the blocks. Nov 15, 2023 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. #block-1235455 { background:#0000; } change the id according to your text box id and change the color what you want. Click the B icon on your Chrome tool bar and it will display source block ID for all the elements on your page. The code itself is working. Mar 30, 2023 · Both ordered and unordered Bullets can be added to the website using text block. Difficult to send exact code without site url. I am creating a gallery grid full of logos that are white text with transparent background. Happy website designing! Jan 17, 2023 · Create a block of text with a background color in Squarespace 7. Nov 8, 2021 · Squarespace released an Accordion Block a few weeks ago. I would like to know how to: 1) Make a card appear when you hover a specific list item. Mar 1, 2021 · The blue boxes of text with icons and colored background. #yui_3_5_0_1_1351742388720_92 { background-color: #009999; } Apr 13, 2023 · Hi, I have just added a new page to my site and want to change the background colour of the text blocks to match the other pages. I made two columns and started putting in each text box. Adjust the font style and size. See what I am aiming for in the attached screenshot. SIF will return something like the following. To add a background text block, you need to follow a few simple steps. #1. Sep 11, 2020 · Thanks @Tuanphan. Sep 4, 2024 · Suppose you want to change background/text color of this text box First, you can follow this to find Text Block ID In my example, it is: #block-f560450d89c45a385423 Apr 27, 2023 · Adding a coloured background to a text block is a great way to break up the space on your web page or highlight an important section. One of the things that makes Squarespace so great is its flexibility – you can change the background color of any text block to match your brand or style. Sep 9, 2020 · I am trying to change the color of these markdown boxes. Here is the website: polygon-moose-4jeh. sqs-block-newsletter input {color:red!important} And this code will change that placeholder text that says "email address" . Dec 28, 2020 · [data-section-id = "[enter data section id here between double quotes replacing square brackets]"]: not (. I wanted to let you know that you can now add a background color to Text, Accordion, Summary, Quote, and Newsletter blocks directly in Squarespace. It would be something like this in the Custom CSS. Jul 1, 2020 · 7. I press Edit/pencil on the box I want to change and then go to the Color tab in site style but the only section that it gives me an option to change is the whole page Mar 28, 2024 · I managed to change the color of individual elements but it's not exactly what I want, I want them all to change colour once I hover on the box background. I w Oct 1, 2022 · Squarespace is a great platform for creating beautiful websites. usmexicofoundation. AskQuesty. Which means that I can't see them against the white background of the gallery block editor. Mar 4, 2025 · You can do that by adjusting the section settings -> background to "Inset" and making sure the section background and inset border are different colours in the styles -> colour theme menu: Alternatively, you can set the text block background colour to grey and the colour theme to have a dark background. This way it will only affect the background color and not the whole block, thus the text stays opaque while you can freely change the Nov 30, 2023 · I had spent hours setting all the colors as I want them, but all of the sudden all text blocks changed to a sky blue that is on my palette. field-element { Apr 11, 2013 · When I create a block, the block is transparent so all of my text/content sits on top of my background which is a problem as my background goes between dark and very bright. 6 ); padding Today we'll be looking at how to make a text block background of a different color, In this background color squarespace tutorial you can see a text block with a red color background. nne ctq aclaoim armzg gagnuwr wqkw sjcgo dbjuagh ogx pbxssmrf