![]() ![]() You should be able to see the changes happening while you adjust this in your CSS editor. Not sure what hex code you need? Use this website to create your own. Replace the color hex code with whatever color you want. The last line doesn’t need a comma after it. If you are wanting to target multiple styles (say H1 and H2) within one block, you’ll need to have each one separated by a comma, just in the example above. If it’s Heading 2 text it will be h2 (and so on!) If it’s regular Paragraph text it will be p Replace the P/h1/h2/h3 with whatever style of text you are trying to target: Paste your Block ID into the CSS editor, then add a hash (#) at the beginning of it so it now looks like: #block-53c818fd6d3f39517aedĬopy and paste the code below into your CSS editor: I recommend having the page you’re planning to work on (with the said block) open while you are working on the CSS, because when you make the CSS changes you will be able to see them happening on the page! Once you have found the correct Block ID, make sure you have it copied. If it starts with anything else, it’s not the correct ID. TIP: Make sure the Block number starts with Block. Though there are a lot of “ID’s” so make sure you look for the correct one, it needs to start with block. Somewhere in the code for that certain object it will say ID=block etc. Otherwise, you can right click on the block and then click Inspect. If you don’t use Google Chrome: Firstly, I recommend downloading it even if it’s just to use option one, as it will save you a bunch of time. Open up the page with the block you want to identify, click on the Identifier Tool in your Chrome Extensions and it will instantly reveal the Block Identification Numbers (which will be something like #block-53c818fd6d3f39517aed or #block-yui_3_17_2_1_1556302617094_72323)Ĭlick on the Block you want to use and it will automatically copy the Block number for you! This extension is designed to help you find the Block Identification Number of each Block on your Squarespace Site. If you’re using Google Chrome: Download this Squarespace Block Identifier extension for Chrome. Once you find the identification number of a certain block, you can easily make CSS changes to it over in the Squarespace CSS Editor. Using a Block Identifier and adding basic CSS Step 1 : Identify your blockĮach Block on your site (eg text blocks, image blocks etc) has a different identification number. ![]() Maybe you just want one Block to really stand out from the rest, if that’s the case, then this tutorial will help you. This is just an example of a time where you might want to change the color of just a single block of text, but there’s many situations where this pops up. Squarespace has the Global Design Styles-to keep things easy, of course-but it can be frustrating when you want to have light text on a dark background in one section, and the opposite on another section, but Squarespace only gives you one font color option for the whole site. ![]() Squarespace limits a lot of customization options for good reason, and that’s why it’s so easy to DIY a website that looks sleek and professional.īut sometimes there’s just an option that you really need-this happens quite a bit and with a variety of things, but today we’re talking about changing the color of your font or your text within just one text block. I totally understand where they’re going with this-as soon as you start offering DIYers all of the options, it’s so easy to get carried away and go overboard. Unfortunately sometimes that means giving us less customization options. Squarespace does it’s best to make building a website easy and DIY friendly, and we totally stan that.
0 Comments
Leave a Reply. |