Moaxlycan Posted April 11, 2013 Posted April 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. 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. Thanks for reading. Moax Lycan
Scoobie Posted April 11, 2013 Posted April 11, 2013 for this reason I think the editor needs to allow the user to select blocks to have colors. Not everything is black and white.
Stacie1570047729 Posted September 11, 2013 Posted September 11, 2013 You first need to find the name of your block. Then you need to add custom code to your page. How to find your block ID I use Firebug - once you have Firebug open, go to your site, control click on the block you want to locate and scroll down to "inspect element in Firebug". Sometimes this search it is not exact in Firebug. It will find the text for instance but not the block. But if you scroll up the code, you'll get to something like: <div id="block-584f3b29b6217bdd611b"... Now copy that block ID somewhere (I use Notepad, something that won't add extra formatting. don't use Word for instance). How to add custom code to color your block Now go to manage site on that same page and up top click on Page Settings. Click on Advance and insert this code: <style> #block-yourblockidhere { background-color: #000000; *this is where you put the 6 digit color you want* padding: 10px; } </style> I also add some padding because once you have a colored box, you may not want the text going right up to the edge. Note: do not include my note "this is where you put the 6 digit color you want" in your code. Good luck!
Guest Posted October 3, 2014 Posted October 3, 2014 Im stuggling to find my block id's that arn't yui... any ideas?
Roppo Posted December 12, 2014 Posted December 12, 2014 Also struggling to find the block id, all of them say yui, any help / advice?
Guest Posted January 12, 2015 Posted January 12, 2015 Okay so I'm not amazing with css but I think I may have solved this, Firstly install Firebug forFirefox and then go to your page, right click on the block that you want to resize or change color of. You then need to find the Body ID, it will be somewhere near the top and will have the word 'Collection' followed by a series of numbers. i.e..... body='collection-54a9de84e3b040ef87e421ef' You then need to find the .sqs widget code for your block, I am trying to change the background color of an audioblock so my .sqs widget code is..... sqs-widgets-audio-player-content ... but this may differ for photo galleries or whatever you are trying to change, but i think whatever it is you are looking for the word 'widget' within the code. You then go to squarespace choose your page to edit, then go Design > Custom CSS and enter the following code... #collection-54a9de84e4b040ef97e431ef #content div .sqs-widgets-audio-player-content {background-color: #ffffff; } So as mentioned above you replace the 'collection' ID with your own from above, the .sqs-widgets with whatever your changing (audio block in this case) and the background color for whatever you want, in my case it is white (#ffffff) Really hope this helps cause this was bugging me for ages. i sent an email to squarespace saying that I feel this is a setting that has been overlooked as you are able to custom color every other feature without using custom css.
Scoobie Posted July 30, 2015 Posted July 30, 2015 Here is a new tool provided via Chrome Extension that's designed to help identify a Squarespace Blocks unique ID - for custom CSS purposes https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde Example here:http://www.bcarroll.us/developer-platform-tutorials/2015/5/19/chrome-extension-squarespace-collection-block-identifier
Guest Posted May 25, 2016 Posted May 25, 2016 Try adding this to a Code Block: <div class = "blockname"> This is the heading </div> Then, you can style it with CSS in the CSS Editor. Just make sure that you replace "blockname" with your own class names and call them appropriately with your CSS: .blockname { background-color: red; text-align: center; font-family: arial; font-size: 20px; padding: 20px }
squarelust Posted December 6, 2018 Posted December 6, 2018 I'm banging my head on the wall trying to do this same thing, but now it's 2018 and things have changed on SS. I'm wondering if someone can update the 'How To' for this request. It seems like such a basic feature for SS to include, but they don't. So frustrating. Thank you for any help.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.