Custom HTML Color changed box

Highlighted
Tourist
4 0 2

Hello guys

I'm here today because I need help if one code

My Custom HTML code is:

<div id="section-{{ section.id }}" class="{{ section.settings.section_style }}" data-section-id="{{ section.id }}" data-section-type="custom-html-section">
  <div class="{% if section.settings.padding_section %}box{% endif %}">
    <div class="wrapper{{ section.settings.wrapper_size }}">

      {% if section.blocks.size > 0 %}
        <div class="custom-content">
          
          <!-- Blocks -->
          {% for block in section.blocks %}
            {% case block.settings.width %}
              {% when '25%' %}
                {%- assign block_width = 'small--one-whole one-quarter' -%}
              {% when '33%' %}
                {%- assign block_width = 'small--one-whole one-third' -%}
              {% when '50%' %}
                {%- assign block_width = 'small--one-whole one-half' -%}
              {% when '66%' %}
                {%- assign block_width = 'small--one-whole two-thirds' -%}
              {% when '75%' %}
                {%- assign block_width = 'small--one-whole three-quarters' -%}
              {% when '100%' %}
                {%- assign block_width = 'one-whole' -%}
            {% endcase %}
            <div class="custom__item {{ block_width }}" {{ block.shopify_attributes }}>
              <div class="custom__item-inner custom__item-inner--{{ block.type }}">
                {% case block.type %}
                  {% when 'html' %}
                    {% if block.settings.code != blank %}
                      <div class="{{ block.settings.text_alignment }}">
                        {{ block.settings.code }}
                      </div>
                    {% else %}
                      <div class="text-center">
                        {{ 'home_page.onboarding.no_content' | t }}
                      </div>
                    {% endif %}
                {% endcase %}
              </div>
            </div>
          {% endfor %}
        </div>
      {% endif %}
      
      {% if section.blocks.size == 0 %}
        {% include 'no-blocks' %}
      {% endif %}
      
    </div>
  </div>
</div>
  {% schema %}
  {

    "name": "Custom HTML",
	"class": "custom-html-section",
    "max_blocks": 100,
	"settings": [


	  {
        "type": "checkbox",
        "id": "padding_section",
        "label": "Add padding",
		"default": true
      },
      {
        "type": "select",
        "id": "section_style",
        "label": "Section style",
        "default": "",
        "options": [
          {
            "value": "",
            "label": "Default"
          },
		  {
            "value": "bg-section",
            "label": "Add background color"
          },
          {
            "value": "border-section",
            "label": "Add border top"
          }
        ]
      },
	  {
        "type": "select",
        "id": "wrapper_size",
        "label": "Wrapper size",
		"default": "",
        "options": [
		  {
            "value": "",
            "label": "Default"
          },
	      {
            "value": "-fluid",
            "label": "Fluid"
          },
		  {
            "value": "-full",
            "label": "Full"
          }
        ]
      }
	],
    "blocks": [
      {
        "type": "html",
        "name": "Custom HTML",
        "settings": [
          {
            "type": "html",
            "id": "code",
            "label": "HTML",
			"default": "<p class='fas fa-code fa-3x'></p><h2>Custom HTML!</h2><p>This section can be used to code your own custom layout.</p>"
          },
          {
            "type": "select",
            "id": "width",
            "label": "Container width",
            "default": "100%",
            "options": [
              {
                "value": "25%",
                "label": "25%"
              },
              {
                "value": "33%",
                "label": "33%"
              },
              {
                "value": "50%",
                "label": "50%"
              },
              {
                "value": "66%",
                "label": "66%"
              },
              {
                "value": "75%",
                "label": "75%"
              },
              {
                "value": "100%",
                "label": "100%"
              }
            ]
          },
		  {
            "type": "select",
            "id": "text_alignment",
            "label": "Text alignment",
            "default": "text-center",
            "options": [
              {
                "value": "text-left",
                "label": "Left"
              },
              {
                "value": "text-center",
                "label": "Center"
              },
              {
                "value": "text-right",
                "label": "Right"
              }
            ]
          }
        ]
      }
    ],
    "presets": [

      {
        "name": "Custom HTML",
        "category": "Advanced layout",
        "blocks": [
          {
            "type": "html"
          }
        ]
      }
    ]
  }
{% endschema %}

but this code don't have the box to change color like this:

<div class="page-width"{% if section.settings.background %} style="background-color: {{ section.settings.background_color }}; padding: 20px;"{% endif %}>
  {{ section.settings.custom_html }}
</div>



{% schema %}
{
  "name": {
    "de": "Benutzerdefiniertes HTML",
    "en": "Custom HTML",
    "es": "HTML personalizado",
    "fr": "Code HTML personnalisé",
    "it": "HTML personalizzato",
    "ja": "HTMLをカスタムする",
    "nl": "Aangepaste HTML",
    "pt-BR": "HTML personalizado",
    "zh-CN": "自定义 HTML",
    "zh-TW": "自訂 HTML"
  },
  "class": "index-section",
  "settings": [
    {
      "type": "html",
      "id": "custom_html",
      "label": {
        "de": "Benutzerdefiniertes HTML",
        "en": "Custom HTML",
        "es": "HTML personalizado",
        "fr": "Code HTML personnalisé",
        "it": "HTML personalizzato",
        "ja": "HTMLをカスタムする",
        "nl": "Aangepaste HTML",
        "pt-BR": "HTML personalizado",
        "zh-CN": "自定义 HTML",
        "zh-TW": "自訂 HTML"
      },
      "default": {
        "de": "<h2>Informieren Sie über Ihre Marke</h2><p>Formatieren Sie Ihren Text mit HTML, damit er leichter lesbar ist. Mit diesem Text können Sie Ihre Kunden über Ihre Marke informieren.</p>",
        "en": "<h2>Talk about your brand</h2><p>Use HTML to format your text so it can be easily read. This text can be used to share information about your brand with customers.</p>",
        "es": "<h2>Habla sobre tu marca</h2><p>Usa HTML para formatear tu texto para que se pueda leer fácilmente. Este texto se puede usar para compartir información sobre tu marca con los clientes.</p>",
        "fr": "<h2>Parlez de votre marque</h2><p>Utilisez le code HTML pour formater votre texte afin qu'il puisse être facilement lu. Vous pouvez utiliser ce texte pour partager des informations sur votre marque avec les clients.</p>",
        "it": "<h2>Parla del tuo brand</h2><p>Utilizza l'HTML per formattare il testo in modo che sia facilmente leggibile. Questo testo può essere utilizzato per condividere le informazioni sul tuo brand con i clienti.</p>",
        "ja": "<h2>あなたのブランドについて話す</h2><p>HTMLを使用してテキストを読みやすくフォーマットしてください。このテキストはあなたのブランドに関する情報をお客様と共有するために使用できます。</p>",
        "nl": "<h2>Praat over uw merk</h2><p>Gebruik HTML om uw tekst zo op te maken dat deze makkelijk leesbaar is. Deze tekst kan worden gebruikt om informatie over uw merk met klanten te delen.</p>",
        "pt-BR": "<h2>Fale sobre sua marca</h2><p>Use HTML para formatar seu texto para que ele possa ser lido com facilidade. Esse texto pode ser usado para compartilhar informações sobre sua marca com os clientes.</p>",
        "zh-CN": "<h2>谈论您的品牌</h2><p>使用 HTML 设置文本格式,以便轻松阅读。此文本可用于与客户分享有关您的品牌的信息。</p>",
        "zh-TW": "<h2>描述您的品牌</h2><p>使用 HTML 設定文字格式,使文字容易閱讀。這段文字可以用來與客戶分享您的品牌資訊。</p>"
      }
    },
	{
	  "type": "checkbox",
	  "id": "background",
	  "label": "Use background color"
	},
	{
	  "type": "color",
	  "id": "background_color",
	  "label": "Color"
	}
  ],
  "presets": [
    {
      "name": {
        "de": "Benutzerdefiniertes HTML",
        "en": "Custom HTML",
        "es": "HTML personalizado",
        "fr": "Code HTML personnalisé",
        "it": "HTML personalizzato",
        "ja": "HTMLをカスタムする",
        "nl": "Aangepaste HTML",
        "pt-BR": "HTML personalizado",
        "zh-CN": "自定义 HTML",
        "zh-TW": "自訂 HTML"
      },
      "category": {
        "de": "Advanced",
        "en": "Advanced",
        "es": "Avanzado",
        "fr": "Advanced",
        "it": "Advanced",
        "ja": "高度",
        "nl": "Advanced",
        "pt-BR": "Advanced",
        "zh-CN": "高级版",
        "zh-TW": "Advanced"
      }
    }
  ]
}
{% endschema %}

I tried everything but without sucess.

someone to help ?

 

0 Likes