Change the font size or color of a text block within Squarespace can be complex. In this article we’ll outline how you can do so using custom CSS.
Squarespace provides color themes to keep your site consistent, but sometimes more flexibility is desired. In this article we will outline two methods that can help break free using CSS.
Background Color
Squarespace used to require custom code in order to change the background color of text blocks, but recently made improvements that make this task much simpler than before. Watch this video or read through this blog post below for instructions!
Process is straightforward, however to identify the block you wish to alter you will need its identifier number – this can be found by either using an inspector tool and searching for its ID, or Squarespace’s tool for identifying blocks by their IDs.
Squarespace version 7.1 introduces a change to how colors work: rather than selecting individual element colors, you select an entire theme and Squarespace will automatically color elements on various pages based on it.
Header Color
Squarespace provides several methods for customizing its header, such as changing its color or adding images. If these changes seem overwhelming, consider installing Spark Plugin as it will make these adjustments simpler.
There are various ways you can alter the font used for folder titles on your Squarespace website. CSS snippets allow you to change both their colors and font styles accordingly.
These code snippets also allow you to alter the page titles displayed in your website’s header or alter their font – simply replace YOURFONTFAMILY with the name of the font family you use on your site.
These code snippets allow you to change the colors of buttons on your site’s header. While Squarespace provides multiple primary, secondary, and tertiary button styles for you to select from, these codes allow you to tailor them precisely so they match your visual design perfectly.
Footer Color
An ideal Squarespace website footer should contain information about your photography business, such as contact forms and social media links. In addition, it should include copyright notices, privacy policies, sitemaps and logos relating to it.
Change your footer by clicking Edit on any page, hovering over its footer area and selecting “Edit Footer.” Additionally, blocks and content can be added by using Design tab or the Customize option.
Custom CSS allows you to change the colors of blog post titles on Squarespace. By default, they match Heading 1 font style; this video tutorial shows how you can use custom CSS to change its color, font weight (boldness) and family – creating an individual and distinctive appearance for your Squarespace blog posts – easily replicable across your entire site.
Text Color
Before, in order to change the text color of blog post titles on Squarespace, custom CSS code was needed. But thanks to recent improvements made by Squarespace, customization can now occur more easily without needing special knowledge in coding languages like PHP.
Christy Price, an authorized Squarespace trainer, provides two different methods for changing the font color of individual blocks of text on your website. Each method offers an effective solution; however, there may be slight variances.
One technique uses the p> tag with its style attribute. Another way is identifying which text box IDs need changing and adding this information into CSS files – although it requires more work! Both techniques can provide effective results, though the p> tag may be easier for beginners to work with.
