Text Blocks & Links

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

Select a Squarespace Element to Examine CSS Selectors:    

Squarespace Element Description
Text and Link Elements Refers to text block selectors.

CSS Code Snippets for Customizing Text Blocks

Change the color of the "Marker" text element in light page sections when the marker background is dark

You’ll need to replace “UNIQUE_ID_GOES_HERE” with the “data-text-attribute-id” of the span element.

//Start: Change the color of the "Marker" text element in light page sections when the background is dark
.page-section.light, .page-section.light-bold, .page-section.white, .page-section.white-bold {
  span.sqsrte-text-highlight[data-text-attribute-id="58852261-8bbe-4c4b-85fa-02e3c77effcb"] {
    color: white;
  }
}
//End: Change the color of the "Marker" text element in light page sections when the background is dark

Change the color of the "Marker" text element in dark page sections when the marker background is light

You’ll need to replace “UNIQUE_ID_GOES_HERE” with the “data-text-attribute-id” of the span element.

//Start: Change the color of the "Marker" text element in dark page sections when the marker background is light
.page-section.dark, .page-section.dark-bold, .page-section.black, .page-section.black-bold {
  span.sqsrte-text-highlight[data-text-attribute-id="58852261-8bbe-4c4b-85fa-02e3c77effcb"] {
    color: black;
  }
}
//End: Change the color of the "Marker" text element in dark page sections when the marker background is light

Change the font size of a specific heading 1 element using the block ID selector

You’ll need to replace the block ID in the below code snippet with the ID of your specific text block.

//Start: Change the font size of a specific heading 1 element using the block ID selector
#block-6529f29c09b95258bb3fb582 h1 {
  font-size: 3em;
}
//End: Change the font size of a specific heading 1 element using the block ID selector

Change the font family of certain text elements

//Start: Change h4 font-family
h4 {
  font-family: Arial !important;
}
//End: Change h4 font-family

//Start: Change h3 font-family
h3 {
  font-family: Arial !important;
}
//End: Change h3 font-family

//Start: Change h2 font-family
h2 {
  font-family: Arial !important;
}
//End: Change h2 font-family

//Start: Change h1 font-family
h1 {
  font-family: Arial !important;
}
//End: Change h1 font-family

Change the text transform of specific heading level elements

//Start: Change h4 text-transform
h4 {
  text-transform: uppercase !important;
}
//End: Change h4 text transform

//Start: Change h3 text-transform
h3 {
  text-transform: uppercase !important;
}
//End: Change h3 text transform

//Start: Change h2 text-transform
h2 {
  text-transform: uppercase !important;
}
//End: Change h2 text transform

//Start: Change h1 text-transform
h1 {
  text-transform: uppercase !important;
}
//End: Change h1 text transform

Change the color of text links on hover based on the page section color theme

//Start: Change the color of text links on hover based on the page section color theme
.page-section.dark, .page-section.dark-bold, .page-section.black, .page-section.black-bold {
  p a:hover {
    color: magenta;
  }
}

.page-section.light, .page-section.light-bold, .page-section.white, .page-section.white-bold {
  p a:hover {
    color: blue;
  }
}
//End: Change the color of text links on hover based on the page section color theme

Remove underlines from text links

//Start: Remove underlines from text links
a {
  text-decoration: none !important;
}
//End: Remove underlines from text links


Custom bullet points for unordered lists using the background-image property

Use this code snippet to target all lists

//Start: Custom bullet points for unordered lists
@bullets_WidthAndHeight: 16px;

ul[data-rte-list] li>:first-child:before {
  content: "" !important;
  background-size: contain;
  background-repeat: no-repeat;
  width: @bullets_WidthAndHeight;
  height: @bullets_WidthAndHeight;
  position: absolute;
  top: @bullets_WidthAndHeight/2;
  left: @bullets_WidthAndHeight;
  background-image: url("https://images.squarespace-cdn.com/content/6504dbb5ab3c56395a35440a/b44b3f33-dcbe-4bc7-baf2-6220b89e36aa/Checkmark.png?content-type=image%2Fpng");
}
ul[data-rte-list] li>:first-child {
  position: relative;
}
ul[data-rte-list] {
  list-style: none;
}
//End: Custom bullet points for unordered lists

Use this code snippet to target a specific list using the text block’s ID

//Start: Custom bullet points for unordered lists
#block-yui_3_17_2_1_1695742272525_9030 {
  @bullets_WidthAndHeight: 16px;

  ul[data-rte-list] li>:first-child:before {
    content: "" !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: @bullets_WidthAndHeight;
    height: @bullets_WidthAndHeight;
    position: absolute;
    top: @bullets_WidthAndHeight/2;
    left: @bullets_WidthAndHeight;
    background-image: url("https://images.squarespace-cdn.com/content/6504dbb5ab3c56395a35440a/b44b3f33-dcbe-4bc7-baf2-6220b89e36aa/Checkmark.png?content-type=image%2Fpng");
  }
  ul[data-rte-list] li>:first-child {
    position: relative;
  }
  ul[data-rte-list] {
    list-style: none;
  }
}
//End: Custom bullet points for unordered lists
Previous

Digital Product Blocks
Next

Content Links