knockout

I would assume this isn't doable without some javascript, but in the off chance it's doable with a language I know, I'd really love to hear how you've figured out how to do this!

Because it's a circle, and the edges have a jagged white outline, visible against our blue footer background.

URL: https://roadrunner-echidna-9e76.squarespace.com/ PW: ephemora2k22 Location of image in question is the red logo in the footer. I'm trying to create an animated logo in my footer. I have two parts to the logo: The background consists of a red circle with our brand initial in it; this should remain static. The foreground has some text in a circle and a transparent background; this should rotate 360 degrees. I've attached a GIF showing what the final result should look like. I've run into the problem of applying multiple transforms to one element: I'm not able to both position the foreground image AND give it a keyframe rotation animation, because I can't apply two transform properties (transform:translate and transform:rotate) at the same time. So, my solution is to use a spacer block instead of code to position the foreground image, and only apply transform:translate to the background image, which is set to position:absolute. While I'm not too worried (yet, knock on wood) about positioning the background image to always be centered behind the foreground image, where I'm having trouble is in the rotation animation. My foreground image is a perfect square, and the text is perfectly centered within it. However, if you view the animation as it currently is, you'll see that the foreground seems to be rotating around a point subtly off of center. I have no clue where to start with this. If inspected, I'm seeing some inline code stating that the "data-image-focal-point" is set to 0.5,0.5 instead of 0,0 (see screenshot). Could this have some effect? I have no idea how to affect code written inline like that. CSS as it currently exists: //background and note i have not set these transforms yet and they are mostly just placeholders #block-yui_3_17_2_1_1666705251314_15319 { position: absolute; @media screen and (min-width:1200px) { width: 13.5vw; transform: translate(0vw, -24vh); } @media screen and (min-width:768px) and (max-width:1199px) { width: 14vw; transform: translate(-1vw, -18vh); } @media screen and (max-width:767px) { width: 40vw; transform: translate(-1vw, -18vh); } } //foreground @keyframes turn { 100% { transform: rotate(360deg); transform-origin: center center; } } #block-yui_3_17_2_1_1612994196729_21815 { width: 180px; height: 180px; z-index: 10; animation: turn 20s linear infinite; }

Hey Tuan, I'm having the same issue on my site. https://roadrunner-echidna-9e76.squarespace.com/semicustom PW: ephemora2k22 I'm using a definition in place of the URL: earlier in my code I had defined @red-arrow-svg as '/s/Ephemora-Arrow.svg' and it worked only when the Custom CSS panel was open. I tried a few options: Redefining @red-arrow-svg as the whole URL: SVG doesn't appear on the live site nor with the CSS window open Not using a definition at all and just using the shorthand URL (starting with "/s/"): SVG doesn't appear on the live site nor with the CSS window open Not using a definition at all and just using the whole URL: SVG doesn't appear on the live site nor with the CSS window open So, the only way I can get the SVG to appear, but then only when the Custom CSS window is open, is as I originally had the code, as seen below (using the @red-arrow-svg defined as the shorthand URL): //List auto-layout// .user-items-list-simple .list-item-content__title { font-family: trade-gothic-next; font-style: italic; text-transform: none; } .user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__description { color: #000000; } .user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__title { color: #000000; } .user-items-list-simple .list-item[data-is-card-enabled="true"] { background-color: @lavender; } //List link styling 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; &:after { content: ""; display: inline-block; height:26px; width:26px; background-size: 26px 26px; background-image: @red-arrow-svg; background-repeat: no-repeat; opacity: 0; margin-left: -1.8em; margin-bottom: -8px; transition: all 300ms ease-out; } &:hover:after { content: ""; display: inline-block; height:26px; width:26px; background-size: 26px 26px; background-image: @red-arrow-svg; background-repeat: no-repeat; opacity: 1; margin-left: 10px; margin-bottom: -8px; } } } //end List auto layout//

Thank you!! This was the exact starting point I needed. Here's the CSS and a screenshot of the final result, as well as some notes: section[data-section-id="633754fe7c506e2e4e13c01a"] { .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-background { opacity: 0; } svg.user-items-list-banner-slideshow__arrow-icon { display: none !important; } button.user-items-list-banner-slideshow__arrow-button--left:before { content: @blue-arrow-left; display: block; width: 70%; margin-left: auto; margin-right: auto; opacity: 1; } button.user-items-list-banner-slideshow__arrow-button--right:before { content: @blue-arrow-right; display: block; width: 70%; margin-left: auto; margin-right: auto; opacity: 1; } } So first I had to keep my CSS of removing the circle backgrounds of the arrows. I uploaded my SVG files in their proper color (because you can't customize color of uploaded SVGs in CSS) to a disabled page and defined them using this code at the top of my CSS document: @blue-arrow-right: url('/s/Ephemora-Arrow-BlueRight.svg'); @blue-arrow-left: url('/s/Ephemora-Arrow-BlueLeft.svg'); So those are what's referenced in the code above. I also wanted them a little smaller, so I set the width to 70% and centered them in their containers with the margin properties. Lastly, for some reason the :after pseudo-element on the right arrow meant that once I had clicked on the right arrow, it disappeared until I clicked on the left arrow. I don't know why this happened. But changing it to a :before pseudo-element, as it is with the left arrow, fixed this issue. I don't understand this, but it worked so I'm rolling with it. Thank you to you and @tuanphan for the help!

Site URL: https://roadrunner-echidna-9e76.squarespace.com/ PW: ephemora2k22 I've figured out the CSS to change the stroke color and width of the existing arrows, and to remove or change the shape of the encapsulating circles, but I have a custom arrow I'm using throughout the site and would like to insert that in place of the built-in arrows for consistency. How do I do this? This is the code I currently have affecting the banner slideshow auto-layout: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-background { opacity: 0; } .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-foreground { stroke: @blue; } .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-path { stroke-width: 3px; } The first screenshot is the results of this code. The second screenshot is what I want it to look like. I've included the HTML for my custom SVG arrow below. <svg class="custom-arrow" 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>

I so appreciate the help! If you have a Venmo or Paypal, I'd love to buy that coffee for you!

The second one here worked wonders! Thank you! Man, just when you thought you'd tried all the combinations... You've already dedicated like half a day to helping me, but if you have further thoughts on this, I'd take 'em. If not, I'll just leave as is. Thank you so much for your help!

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.

Okay, the second part of that, the one with the linear gradient, that was some magic. Very cool, thank you for that. Now, I feel like I've tried every trick in the book to style that one line's font-size to be larger, but it's not working. The most I can get is that the margin below "Request a Quote" increases as though the text is larger, but the text does't actually change size. Any ideas?

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?

Still no changes to the drop-down box. Okay, I set that up but it still appears inside the form-inner-wrapper and what I want to target to create this purple background is the upper part of the form-wrapper. I also added the below just to see what would be targeted: .form-wrapper .field-list .section:nth-child(1) { background-color: @lavender; }

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

1. Form name is already in there (see attached) 2. This worked, thanks! 3. No change at all when copy/pasting this in, unfortunately. I left your code in there however for you to see. (See screenshot also attached) 4. The text reading "Got a budget range?" and "When's your wedding?" are not aligned horizontally: the budget field is lower vertically than the wedding date question. This may be a moot question once question 3 is solved for, but just wanted to clarify just in case. And thank you for your help!

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

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?

It's not the same. I am trying to achieve the 4 items I described in my original post: 1. I want the form name at the top ("Request a Quote" in blue on purple); 2. I want to hide the "Last Name" field title in blue; 3. I want to be able to style the drop-down "Budget Range" menu; 4. I want to line up the Budget/When's your wedding fields horizontally.

No, not yet. The screenshot is my mockup; it shows what I want it to look like. You can see what it actually looks like at the link in question.

Site URL: https://roadrunner-echidna-9e76.squarespace.com/get-started Hi all, I need some help styling a form block. For reference, attached is what I want the form to look like. Link: https://roadrunner-echidna-9e76.squarespace.com/get-started PW: ephemora2k22 1. How can I get the Form Name to display in the form block? It appears in the Lightbox version of the form, but not in the block version. 2. I used two Text fields in place of the Name field because I wanted "First Name/Last Name" to appear as placeholder text. How can I hide the "Last Name" field title specifically? 3. How do I target the Budget dropdown menu? I want to style the box itself as well as the font. 4. I used custom code to place the First Name/Last Name fields side by side as well as the Budget/Date fields. However, it looks like the Budget/Date fields aren't lining up horizontally. These fields are not responding to margin edits. Mayyyybe once I style the budget dropdown box this will be taken care of, but IDK how to do that yet! Help? Thank you!

Perfect, thank you so much!

Site URL: https://flower-fish-2n8f.squarespace.com/ Trying to make header look like image "LV-Nav" below, but not having any luck with setting the CTA button to margin-top and margin-right 0, nor with setting the border to margin-left 0. I am fairly sure the class I want is .header-display-desktop, as that's giving me the line where I want it in relation to the CTA button, but nothing else I've tried works. Here's what I have working on the header right now: @LVblack: #231F20; .header-display-desktop { border-bottom: 1px solid @LVblack; } Site PW: headerhelp Thanks in advance for any insight!

I'm trying to create 3 sections so that they look like the below. Top section in white, middle section with a background of that photo, and bottom section in navy blue. Can someone walk me through this please?

Figured this out for myself. The correct code is below. div#block-id-goes-here button { font-family: 'Messapia-Bold' !important; font-size: 11px !important; letter-spacing: 0.2em; text-transform: uppercase; padding: 16px 41px 15px 42px;

Site URL: https://rhombus-flute-l6gf.squarespace.com/ I have two instances of a pop-up form on my single-page site. I need them both to be lightboxes, and I have styled the button per below: .sqs-block-button-element { font-family: 'Messapia-Bold' !important; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 16px 41px 15px 42px; } This works great in the button at the top, but the button at the bottom is not responding to this at all, even when I target that block specifically. I wonder if it's because on top it's in a "Lightest 1" section and at the bottom it's in a "Darkest 2" section? In the screenshots, the button in all caps is the correct styling. Site PW: knockout2k22

Bump, someone please answer this!