How to customize chart blocks in Squarespace // Squarespace CSS Tutorial
The chart content block in Squarespace is a super easy way to get a quick visual of data built right into your site. The designs might seem limited but with a little CSS you can make that chart look even more awesome!
We can’t change the color of the chart elements, but we can do fun things like add borders, and background colors. Here are the codes from this tutorial; be sure to adjust any colors and values to suit your Squarespace sites unique style!
/* Give the chart a border */
.chart-block-container {border: 5px solid red}
/* Give the chart a background color */
.chart-block-container {background: mistyrose}
/* Give the chart a gradient background */
.chart-block-container {background: linear-gradient(#e5f5f6, #50bdb8)}
/* Give the caption a border */
.chart-block-container .chart-block-caption figcaption{border: 5px solid teal}
/* Give the caption a background color */
.chart-block-container .chart-block-caption figcaption{background: aliceblue}
These are the code names (selectors) for each chart type:
Bar Chart: .chart-type-1009
Pie Chart: .chart-type-1011
Line Chart:.chart-type-1010
Here are the code names for chart elements used in the video:
Chart Caption: .chart-block-caption
Chart Legend Container: .chart-block-legend
Chart Legend: .legend-content
/* Premade code style from the end of the video */
.chart-block-container {border: 2px solid #333; border-radius: 25px}
.chart-block-container {background: linear-gradient(#fff, #e5f5f6)}
.chart-block-container .chart-block-caption figcaption{box-shadow: inset 0px 5px 5px #999; border-radius: 0px 0px 25px 25px; border-top: 2px solid #333; text-align:center}
---
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
---
Get my custom code collection 👉 https://insidethesquare.co/css
---
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
---
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
Смотрите видео How to customize chart blocks in Squarespace // Squarespace CSS Tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь InsideTheSquare with Becca Harpain 04 Январь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,212 раз и оно понравилось 22 людям.