Customizing the Colors and Fonts on Embeds (Pro Feature)

To customize the look and feel of Listly embeds on your site, add this code to the head section of your website that is used commonly across all pages on your site.

<script type="text/javascript">
  var _lstq = _lstq || [];

           _lstq.push(['_theme', {
              background_color: "#343838",
              border_color: "#444",
              border_width: "0px",
              text_color: "#dddddd",
              text_font_size: "16px",
              item_title_font_size: "20px",
              list_title_font_size: "26px",
              item_separator_width: "10px"

The background color of the list. It can have the value of “transparent”

If specified, you get a border around the list

The width of the border around the list

The copy of the text in the list.

Font for the copy in the list

Font size for the text. Add with quotes such as “14px” or “1.1em”

Color of the text in the list

Color for all title text in the list

Font for title text

Font size for the list title. Add with quotes such as “26px” or “1.4em”

Font size for the text. Add with quotes such as “20px” or “1.2em”

The color of links in the list

Color for subtler links in the list (such as in actions in the item footer)

Color for the line separator between items in the list

By default this is 1px adding a thin line between items. If specified, the line can be made thicker. Creatively setting border color, background color, separator color, and item separator width will allow you to blend in (or stand out) the embedded list area from the rest of your page.

Colors can be specified in hex or rgba. border_color is optional. Do not specify a border_color if you don’t want a border around the list. When specifying fonts, you can choose generic web font OR if you specify a custom font, make sure you are loading that font on your site. Font sizes can be in px, em, pt, or %, but put quotes around the sizes such as “14px” or “1.2em”

In Wordpress

  1. Go to your theme editor and find your header.php file.

  2. Open that file in the editor and search for “”. The final instance of this term should be just before a “<?php”

  3. You need to paste this code inside an existing “?>” “<?php” (or add your own if you know what you are doing)

Here’s a screenshot of an example

Notice the search term highlighted in orange and custom CSS in blue.

I am having problems adjusting the font in my theme. There is no section I see where I can append this according to the instructions. can I share my header file or code?

Can you see if this updated screenshot helps?

If not, can you post your corresponding screen?

One more option is that the Listly Plugin Settings screen has an option to choose font so you can completely skip this instruction and use that:

I will try the options through the plugin,. thank you