Full-Width Custom HTML Section

Astronaut
1012 131 240

So your section has a {% schema %} at the bottom of it. Inside the schema is all your settings that you can use for the section. There's many different types of data that you can allow the customize editor to access. So let's say for instance your section and schema looks like this:

 

<div class="">
{{ section.settings.my_html }}
</div>
{% schema %}
  {
    "name": "Custom HTML",
    "settings": [
      {
        "id": "my_html",
        "type": "html",
        "label": "Custom HTML",
        "default": "<div><p>Some HTML content</p></div>"
      }
    ]
  }
{% endschema %}

By default, inside the containing div that has no class at the moment, this will render your "default" html until you add something into Custom HTML in your customize editor. What I was saying, is that you can add an additional setting called "Custom Class" that you can then use for the div with (right now) no class name. Actually, I think a checkbox would be more appropriate. So say you had a checkbox for full width, you would add this to the schema, and then add a conditional statement for the class:

<div class="{% if section.settings.full_width %}full-width{% else %}container{% endif %}">
{{ section.settings.my_html }}
</div>
{% schema %}
  {
    "name": "Custom HTML",
    "settings": [
      {
        "id": "my_html",
        "type": "html",
        "label": "Custom HTML",
        "default": "<div><p>Some HTML content</p></div>"
      },
      {
        "id": "full_width",
        "type": "checkbox",
        "label": "Full Width",
        "default": false
      }
    ]
  }
{% endschema %}

Now in your customize editor there will be a checkbox called "Full Width". If  "Full Width" is checked in your customize editor it will add the class "full-width", otherwise it will have the class "container".

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
9 0 0

I tried to implement this, the checkbox appeared, but now front-end simply says "This section doesn’t currently include any content. Add content to this section using the sidebar." and nothing I add into the box changes that.

 

This is what was entered into the section by default:

 

{% comment %}
** Custom HTML - homepage partial **
- Draggable section
{% endcomment %}

{% include 'include-custom-html' %}

{% schema %}
{
  "name": "Custom HTML",
  "class": "custom-html-section",
  "settings": [
    {
      "type": "textarea",
      "id": "custom_html",
      "label": "Custom html"
    }
  ],
  "presets": [{
    "name": "Custom HTML",
    "category": "Content",
    "settings": {
    }
  }]
}

{% endschema %}

Where would I add your amendments?

 

Thank you again for all your help so far!

0 Likes
Astronaut
1012 131 240

could you also post the code for the snippet that is included? That's where you're going to have to make your html edits. In the snippets folder the "include-custom-html.liquid" is the file you'd be looking for.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
9 0 0

Of course, here is the content:

{% if type == 'block' %}
  {% assign custom_html = block.settings.custom_html %}
{% else %}
  {% assign custom_html = section.settings.custom_html %}
{% endif %}

<div class="homepage_content clearfix">
  <div class="container">
    <div class="sixteen columns">
      <div class="section clearfix">
        {% if custom_html != blank %}
         {{ custom_html }}
        {% else %}
          <p class="center">
            {{ 'homepage.onboarding.no_content' | t }}
          </p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
0 Likes
Astronaut
1012 131 240

What I'm gathering here is that you haven't actually added anything into the custom HTML area. That condition that says:

 

        {% if custom_html != blank %}
         {{ custom_html }}
        {% else %}
          <p class="center">
            {{ 'homepage.onboarding.no_content' | t }}
          </p>
        {% endif %}

Is saying, "if there is custom_html, put it here, or else put {{ 'homepage.onboarding.no_content' | t }} there.

 

 

That's probably the message you were seeing, if you go into your Locales folder and open you en.default.json (I think that's what it will be called) and ctrl+f and look for "no_content", you'll probably find the message you saw appear. This should go away when you start typing custom HTML into the text area and be replaced with what you type. So you have a div with the class "container" in the second level of all that html, which I assume is giving you a max-width restriction. So add the checkbox to the schema, like we discussed earlier, and change that class to the conditional statement provided before:

 

<style>
.homepage_content .full-width {
  width: 100%;
}
</style>
{% if type == 'block' %}
  {% assign custom_html = block.settings.custom_html %}
{% else %}
  {% assign custom_html = section.settings.custom_html %}
{% endif %}

<div class="homepage_content clearfix">
  <div class="{% if section.settings.full_width %}full-width{% else %}container{% endif %}">
    <div class="sixteen columns">
      <div class="section clearfix">
        {% if custom_html != blank %}
         {{ custom_html }}
        {% else %}
          <p class="center">
            {{ 'homepage.onboarding.no_content' | t }}
          </p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Custom HTML",
  "class": "custom-html-section",
  "settings": [
    {
      "type": "textarea",
      "id": "custom_html",
      "label": "Custom html"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Full Width",
      "default": false
    }
  ],
  "presets": [{
    "name": "Custom HTML",
    "category": "Content",
    "settings": {
    }
  }]
}

 

 I also added a style for full-width at the top in style tags to give it 100% width. This should work, assuming that there is not some other container that {{ content_for_index }} is inside. 

 

 

 

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
9 0 0

I did as instructed but for some reason, everything that was entered into Custom HTML was duplicated on the front-end.

0 Likes
Astronaut
1012 131 240

Im not sure what you mean, do you mean that it's showing the actual HTML on the front end?

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
1 0 0

This solution worked great for me.  Couldn't figure this out until reading through these comments.  Thanks to all!

 

In the timber.scss.liquid file using Debut theme...

 

.wrapper {
/*max-width: $siteWidth;*/
max-width: 98%;
margin: 0 auto;
padding: 0 ($gutter / 2);

@include at-query ($min, $postSmall) {
padding: 0 $gutter;
}
}

@media screen and (min-width: 1400px) {
.wrapper {
max-width: 80%;
}
}

 

I am also using some classes on div's within theme.scss.liquid to resolve some things I didn't like at 80% width...

 

I hope that helps someone!!!

0 Likes
Highlighted
Excursionist
15 0 1

Hello,

 

I'm also trying to edit my custom html, which is a text with a background color, to a full width background color that fills the whole rectangle, but I can't find the styles.scss.css file, any idea? Alternatively I'd be also very grateful if some'd overtake this for me as I'm not too familiar with html.

 

Store: https://ehre-official.de/Screenshot.PNGScreenshot 1.PNG  

0 Likes
Astronaut
1012 131 240

You can send me a personal message on here if you want. You will have to enable messaging in your profile. Just let me know what you want to do and we can talk about it, I'll request access to your store after you send me a message.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes