Style a Wall of Love with custom CSS
Write CSS rules that restyle any part of your Wall of Love's embed and hosted page, with selectors from Snippets, and check them in the builder.
On Business, Custom CSS on the Wall of Love builder's Design tab restyles any part of a wall, beyond what the other options on that tab cover. Your rules apply to the wall's embed on your site and to its hosted page, and to both in the builder's preview.
Open Custom CSS
In the Wall of Love builder, open the Design tab and click Custom CSS in the list.
Pick a part from Snippets
Click Snippets and pick the part you want to style, or type to search. The list shows only what your wall draws, in up to three groups:
- Embed and Page: the wall and its cards, such as the Wall Card, the stars, the quote, the author's name, the Company Logo, a Tag, an Image, the Source Logo, custom fields and a Custom Card.
- Embed Only: the Embed Heading, the embed's Branding, and for a wall with the Carousel layout, the Carousel Arrows, Carousel Dots and Active Dot.
- Hosted Page Only: the Page Root and the page's sections, such as the Header, Hero, Filters and Footer CTA. A section's parts are listed while the section is on.
Each one adds an empty rule for its selector where your cursor is.
Write your rules
Write your CSS between the braces, for example:
.wall-card {
border-radius: 4px;
}Your rules win over the wall's own styles wherever they match, on the embed and the hosted page alike, so you don't need !important.
Check it in the preview
The preview updates as you type. Switch it between Hosted page and Embed to check each one. When you leave the box, a message under it names the line of anything left unfinished, such as a { with no }.
What happens next
Your CSS saves with the wall. Once the wall is published, edits go live as you make them, on the embed and the hosted page. See Create and publish a Wall of Love.
If your plan changes to one without custom CSS, the embed and the hosted page show the wall without it. The CSS is kept, and Clear removes it.
How the embed reads your CSS
The embed sits on your site in a space of its own, so your site's stylesheet can't reach the parts inside it, and your custom CSS reaches no further than the element that holds the embed.
:hostis the element that holds the embed on your page, such as:host { max-width: 960px; }.- Rules that start at
body,htmlor:rootstyle the hosted page, and do nothing in the embed.
What custom CSS can't do
- Load fonts in the embed. A font from
@importor@font-facedoesn't load in the embed, and the builder's preview leaves both out. Choose the font in an element's drawer instead, such as Quote / Body. - Style the video cards' player. The video cards aren't in Snippets. Their look is set under Video Cards.
Was this page helpful?
Design your Wall of Love page
Set up your wall's hosted page in the builder's Hosted Page tab, from the header and hero to the closing button, background and search preview.
Embed a Wall of Love on your website
Set your wall's embed layout, columns, motion and size in the builder's Embed tab, then copy the code and paste it into your site.