Jump to content

Insert Code Block/HTML in Auto-Layout Simple List

Recommended Posts

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;
}

 

Link to comment

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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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...

Link to comment

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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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;
  }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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?

Link to comment
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.

Link to comment

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • 3 months later...

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>

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.