Insert Code Block/HTML in Auto-Layout Simple List

Placing HTML in the list item's description doesn't actually display the code. Seems this will require custom code injection. Anyone know how to insert custom HTML below the description in an auto-layout simple list?

What HTML are you trying to add? Can you give an example?

Can you share your website URL and site wide password if applicable?

16 minutes ago, Ziggy said:

What HTML are you trying to add? Can you give an example?

Can you share your website URL and site wide password if applicable?

Page: roadrunner-echidna-9e76.squarespace.com/semicustom
PW: ephemora2k22

You'll see a section at the top that's custom coded: this looks like what I want it to look like, ultimately, but re-coding this section for mobile is going to be a lot of work. Figured I'd try using the new list auto-layout, but then I can't insert my custom HTML link. HTML and applicable CSS below. I inserted a blank blue section to differentiate between my custom-coded section (top) and the auto-layout section (bottom; you can see I'm messing around with styling the button to no avail).

Current red arrow links:

HTML:

<div style="text-align:center;">
<div class="arrow-link">
    <a href="/semicustom/pebbles">
      Check it out<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 22.91 10.19" style="enable-background:new 0 0 22.91 10.19;" xml:space="preserve">
<path class="arrow" d="M15.39,0h-0.88v4.08H0v2.04h14.52v4.08h0.88l7.52-4.45v-1.3L15.39,0z M16.07,7.66V2.53l4.46,2.57L16.07,7.66z"/>
</svg>
</a>
</div>
</div>

CSS:

.arrow-link {
  font-family:vintage-deco;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.6;
  font-style: normal;
  color: @red;
  display:inline-block;
}
svg {
  position: absolute;
  width: 1.8em;
  margin-left: -1.8em;
  padding-top: 5px;
  fill: @red;
  opacity: 0;
  transition: all 300ms ease-out;
}
.arrow-link:hover {
  svg{
    margin-left: 10px;
    opacity: 100;
  }
}
.arrow-link *:not(svg) {
  transition: all 300ms ease-out;
}
.arrow-link *:not(svg):hover {
  margin-left: -1.8em;
}

If the hover arrow is the main thing that you're trying to add via HTML to the list, why not use a hover effect targeted to links within that section that adds the arrow using the CSS a::after and "content:arrow;". and then apply your transitions etc.

2 minutes ago, Ziggy said:

If the hover arrow is the main thing that you're trying to add via HTML to the list, why not use a hover effect targeted to links within that section that adds the arrow using the CSS a::after and "content:arrow;". and then apply your transitions etc.

Eek, sorry, this is beyond my knowledge. I barely know how to use SVGs, and I have no idea how to use ::after...

Add a text link instead of the button and then start with this:

.user-items-list-simple .list-item-content__description a:hover:after {
  content:"arrow";
}

instead of "arrow" you'll want to upload the svg to Squarespace and reference it with the URL:

content: url('/s/your.svg');

Hopefully you can use this to adapt the rest of the CSS.

You may be able to add a title using this code, but I haven't worked out how you would go about colouring the top:

#block-yui_3_17_2_1_1662896689914_2831 {
  .form-wrapper::before {
    content:"TITLE";
    padding:12px 0px;
  }
}

4 minutes ago, Ziggy said:

You may be able to add a title using this code, but I haven't worked out how you would go about colouring the top:

Scrap this! Add a Line to the form fields, and your title, un-toggle the underline, and move it to the top, then you can style that section.

2 hours ago, Ziggy said:

Add a text link instead of the button and then start with this:

.user-items-list-simple .list-item-content__description a:hover:after {
  content:"arrow";
}

instead of "arrow" you'll want to upload the svg to Squarespace and reference it with the URL:

content: url('/s/your.svg');

Hopefully you can use this to adapt the rest of the CSS.

Okay, cool, so now I am able to have a hover effect where the SVG appears very large on the next line below the link on hover. Now I need to be able to style the SVG independently of the rest of the link, which is easily doable when it has its own class, but as it's now inline CSS, I'm not sure how to do that.

Here's my CSS currently:

section[data-section-id="6336cf19602266514b1dba78"] {
  .user-items-list-simple .list-item-content__description a {
    font-family:vintage-deco;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.6;
    font-style: normal;
    color: @red !important;
    text-decoration: none;
  }
  @arrow-svg: url(/s/Ephemora-Arrow.svg);
  .user-items-list-simple .list-item-content__description a:hover:after {
    content: @arrow-svg;
  }
}

The CSS I need to use to style the SVG itself is the set its position to absolute, and its width, its margin, its opacity, and its transition properties, etc. Is there a class or an element I can target to do that?

I think you should be able to define the size and other properties under the @arrow-svg

20 minutes ago, Ziggy said:

I think you should be able to define the size and other properties under the @arrow-svg

No, because @arrow-svg isn't an element styled with curly brackets. It's just a definition. I don't know how to style the properties of a definition, only of a class/element.

This might be the answer then, there's a few different methods:

You can use svg as background-image: .withimage:before { content: ""; display:block; height:125px; width:125px; background-size: 125px 125px; background-image: url(test.svg); background-repeat: no-repeat; }

Not sure I'm in the right place. I need help inserting HTML header on all pages. Can someone help me? 

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JZZDCKR7QC"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JZZDCKR7QC');
</script>

On 1/27/2023 at 2:17 AM, JeffreyDavison56 said:

Not sure I'm in the right place. I need help inserting HTML header on all pages. Can someone help me? 

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JZZDCKR7QC"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JZZDCKR7QC');
</script>

Add to Home > Settings > Advanced > Code Injection > Header