Add HTML code for Hexagons

I'm trying to add HTML code I found on CodePen for a hexagonal grid. I've added the CSS without a problem. However, when I add the HTML to the same code box in Upfront, I get an error that shows with the red exclamation mark that there is a problem with the code. But I don't know what the problem is that Upfront isn't allowing this to work. I'm copying the code directly from the CodePen site and it is open sourced on Git Hub as well.

GitHub
CodePen

I'm just starting to rebuild my site, so there is nothing there right now. I've opened the site to support. I'd appreciate help to find out how I can implement this code. Thank you.

  • Nithin

    Hey Enduring Epilepsy (Katrina),

    Hope you are doing good today. :slight_smile:

    You'll have to use the Code element, and select Embed 3rd Party Code in order to make this work. I added the code in my test server, and it worked fine.

    You can add the CSS in the Global Theme CSS section. Please add the code, and clear the cache, and please let us know if you still need any further assistance. Have a nice weekend. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hi Enduring Epilepsy (Katrina),

    Hope you are doing good today. :slight_smile:

    I tried using the Embed Code before contacting you and was getting the error for HTML. Did you change the code at all? Does the < b > code have to remain? Surround embedded code? Because I never had this issue before.

    I used the Embed 3rd Party Code instead of Write Custom Code. You are using the Write Custom Code of the Code element. You are noticing the errors(red exclamation mark), when you add the code in the HTML tab, of Write Custom Code section, because of the markup errors, for eg the img tag was giving a markup error from the code you shared:
    <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />

    Changing the above to the following will clear that error:
    <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" >

    So, minor markups like this wouldn't make the above code work in Write Custom Code section. It would be easier, and better to use Embed 3rd Party cod for such external scripts.

    I have created a test page /hexagon-test/ in your website, with the code from Codepen, please check, and see how that works.

    Also, why wouldn't you be able, in embedding the code, to add both the HTML and CSS to the same spot? It seems that adding the CSS to overall site would make things take longer since its calling on more sources.

    Yes, you are right. If the code you are adding is meant for a specific page, you can add the CSS in the same spot.

    Please check, and let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.