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