bonesie

Hey guys, I have a question that I am not entirely sure how to ask, so if I end up confusing you I apologize. Basically, I want to know if there is any way I can leave a color unspecified in CSS so that the element in question's color can still changed in the Squarespace website editor. I am trying to customize one of the built-in text highlight features Squarespace offers in the Fluid Engine Editor. Specifically the Over and Underline or "enclose" effect, pictured in the first screenshot. I want to turn this text highlight effect into a "lowlight" effect. I have succeeded in changing the look of the effect by removing the SVG associated with the text highlight. I then replaced it with a linear gradient to get the lowlight using this code: .TextShape-node[data-shape="enclose"] svg { display: none } .TextShape-node[data-shape="enclose"] { background: linear-gradient (180deg, transparent 50%, @green 50%);} Only problem now is that I want the highlight to appear as different colors in different places! I'd really like to be able to change the color of the lowlight within the Fluid Engine Editor instead of specifying the color as green across the board. I know that I can add more CSS to achieve this, but that seems silly and redundant to do - especially if there's a relatively simple solution I'm unaware of. I have tried using the inherit keyword, however I don't think there is a parent element to even inherit a color from. Any help is greatly appreciated - even if it's just to tell me that this is impossible through CSS My website is www.canisfashion.com. I can provide the login details if you need! Thank you in advance 🙂

Hey Tuan, I am also looking into style #13, however, I would like to apply it globally to ALL buttons on my site. I would still like the option to be able to change the button colors in the fluid engine editor without having to write color-specific CSS for every button on my site. Is this something that is possible?

A while back, I coded a floating "Back to Top" button into my website. All was well for quite some time, but recently I've been having some display issues on desktop, and for the life of me I can't figure out why. In the fluid engine editor, the button displays and operates exactly as it should on both the mobile and desktop previews. The button also looks/works perfectly on the live mobile version of my website. However, although it works fine on the desktop site (color/shape, delayed visibility, scrolls back to top on click, etc, etc), the arrow goes missing! I've tried everything I can think of as far as solutions go, but I am still very green to coding and would appreciate any help I can get. I've included the HTML and CSS I used to create and style the button, as well as screenshots of what it looks like in the desktop editor preview, mobile editor preview, and live desktop site respectively. <!-- Back to Top Button --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <button onclick="topFunction()" id="btt" title="back to Top"><i class="fas fa-arrow-up"></i></button> <script> window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("btt").style.display = "block"; } else { document.getElementById("btt").style.display = "none"; } } function topFunction() { $('html,body').animate({ scrollTop: 0 }, 750); } </script> // BACK TO TOP BUTTON #btt { width: 50px; height: 50px; display: visible !important; position: fixed; bottom: 40px; right: 40px; z-index: 99; border: 1px solid #fff; font-size: 27px !important; color: #fff !important; padding: 10px 10px 10px 11px; border-radius: 50%; background-color: #4d7d7d; } #btt:hover { background-color: rgba(113,151,151,.9999)!important; } // ^ smaller for mobile @media screen and (max-width:767px) { #btt { width: 40px; height: 40px; display: none; position: fixed; bottom: 50px; right: 30px; z-index: 99; border: 1px solid #fff; font-size: 20px !important; color: #fff; padding: 8px 10px 10px 11px; border-radius: 50%; }}

Hey there, sorry I'm late to the party. I've inserted this code into my site and it works great! However, I have two carousel-style sections on the same page and the code only seems to target whichever section comes first. I would like for the code to only target the second one instead. Any ideas?