Shopify 2.0 - changing the colour for a single custom created block in footer.liquid file

Question

I’m new to liquid.

I have added a new custom block to footer.liquid file within the Yuva theme.

The custom block acts similarly to an announcement bar, exempt that the one I created has static and not rotating text.

The block has the following settings: 1- richtext type for the Heading 2- font color picker 3- background color picker

I have managed to make the color picker work and output correctly. However, I’m having issues with changing the color for the richtext heading setting.

So far,I have added the color settings to the block itself in the schema (not at the overarching level of the section settings).

What am I doing wrong?

This is what I have added to the schema:

 "name": "t:sections.footer.name",
  "tag": "footer",
  "class": "footer-section",
  "max_blocks": 6,
  "blocks": [
   {
      "type": "richtext",
      "limit": 1,
      "name": "CC LATEST NEWS BAR",
      "settings": [
        {
          "type": "richtext",
          "id": "heading",
          "label": "Make the Heading POP!",
          "info": "t:sections.footer.blocks.richtext.settings.heading.info"
        },
        {
            "type": "select",
            "id": "text-transform",
            "label": "Text transform",
            "options": [
            {
                "value": "normal",
                "label": "Don't transform"
              },
              {
                "value": "lowercase",
                "label": "Lowercase"
              },
              {
                "value": "uppercase",
                "label": "Uppercase"
              },
              {
                "value": "capitalize",
                "label": "Capitalize First Letters"
              }
            ],
            "default": "normal"
          },
          {
          "type": "color",
          "id": "background-color",
          "label": "Background color",
          "default": "#ffffff"
          },
          {
          "type": "color",
          "id": "font-color",
          "label": "Font color",
          "default": "#000000"
          }
      ]
    },

This is my for loop that I placed at the very top of the footer.liquid file.

{% for block in section.blocks %}
  {% if block.type == 'richtext' %}
    <div class="footer-latest-newsbar" style="background-color: {{ block.settings.background-color }};">
     <span>{{ block.settings.heading }}</span>
    </div>
  {% endif %}
{% endfor %}`

CSS Style added here after <style> tag
`<style>
  #shopify-section-{{ section.id }} {{ block.settings.heading }}{
  color:{{ block.settings.font-color }};
  }

this is the only CSS added:

<style>
  #shopify-section-{{ section.id }} {{ block.settings.heading }}{
  color:{{ block.settings.font-color }};
  }
...

Answer 1

Your issue seems to be around this part of the code:

#shopify-section-{{ section.id }} {{ block.settings.heading }}

{{ block.settings.heading }} you are just rendering the text of the heading, not a class.

Also, I believe richtext will wrap by default your text in a <p> tag