Customizing the Colors and Fonts on Embeds (Pro Feature)


#1

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:"sans-serif",
              text_font_size: "16px",
              title_color:"#ffffff",
              title_font:"sans-serif",
              item_title_font_size: "20px",
              list_title_font_size: "26px",
              link_color:"#008c9e",
              secondary_link_color:"#aaa", 
              separator_color:"#444",
              item_separator_width: "10px"
           }])
</script>

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

border_color:
If specified, you get a border around the list

border_width:
The width of the border around the list

text_color:
The copy of the text in the list.

text_font:
Font for the copy in the list

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

text_color:
Color of the text in the list

title_color:
Color for all title text in the list

title_font:
Font for title text

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

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

link_color:
The color of links in the list

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

separator_color:
Color for the line separator between items in the list

item_separator_width:
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.


Customizing the Colors and Fonts on Embeds
Customizing font, etc. in non-3rd party JScript embed
Customizing font, etc. in non-3rd party JScript embed
Space between items
Cache list in self hosted Wordpress blog?
How to add header text using Markdown in item description
How to add header text using Markdown in item description
#2

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?


#3

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:


#4

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