-
Posts
150 -
Joined
-
Last visited
Reputation Activity
-
abc reacted to videomatt32 in Contact button color when on the contact page
Thank you - that worked great!
-
abc reacted to IhabKhiri in CSS Help Needed: Underlining Hyperlinks in Paragraph Texts Only
Thank you, this worked!
-
abc reacted to Web_Solutions in Trying to remove footer from Search page ONLY
Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.
body:has(.sqs-search-page) footer { display: none !important; }
-
abc got a reaction from tuanphan in Adding a custom icon next to the hamburger nav icon
Thank you, Tuan!
-
abc reacted to tuanphan in Adding a custom icon next to the hamburger nav icon
Use this code under
<style> @media screen and (max-width:767px) { .header-burger { left: -5vw !important; position: relative; } a.custom-search { position: relative; left: -3vw; } } </style>
-
abc reacted to tuanphan in Adding a custom icon next to the hamburger nav icon
Add to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<a href="/search" class="custom-search"><i class="fa-solid fa-magnifying-glass"></i></a>').insertBefore('.header-burger'); }); </script> <style> a.custom-search { margin-right: 20px; display: inline-block; } </style>
-
abc reacted to iamdavehart in Custom marquee speed
There's no official way, but just because it seems fun and interesting (ie more interesting than what I'm supposed to be doing...) here's one code way that I guess is a little hacky.
The way that Squarespace do this is they write the properties that you specify in the designer into JSON within a script tag that has the class "Marquee-props". When the page is loaded up one of Squarespace's javascript files kicks in and reads those properties out and then applies them to the marquee. It does the marquee animation in code - as opposed to SVG animation, or CSS animation via properties - so it's not really possible to change these values once they've started. at least not easily. However, if you can get to the values before their scripts kick in, read in the properties, change them and then write them back out then it will pick up the new values once the initialisation script finally kicks in.
So, you can stick a code block in (pro feature obviously) somewhere after the marquee in the flow of the page and add the following code:
<script type="text/javascript"> // this will only find the first marquee on the page // (at the point that the script is executed) const el = document.querySelector(".Marquee-props") const props = JSON.parse(el.innerText) props.animationSpeed = 5.0 // this is the speed!!! el.innerText = JSON.stringify(props); </script> now save it and load your page and watch your marquee whizz by....
I think you could file this under "non-production, educational purposes". squarespace could change their implementation at any time, but I've tried it and it does work.
-
abc reacted to DPruitt in Trying to insert text underneath the logo using pseudo element
Here you go:
.header-title-logo a:after { content: 'Subtitle Text'; font-size: 18px; color: #000000; text-align: center; display: block; }
-
abc got a reaction from creedon in Changing section background color on hover
Ah, interesting. I didn't know that.
-
abc reacted to creedon in Changing section background color on hover
Custom CSS uses the LESS preprocessor, an ancient version from years ago that hasn't kept up with modern CSS standards. The other injection areas do not use LESS.
-
abc reacted to creedon in Changing section background color on hover
Please see the following for a start on your effect.
Let us know how it goes.
-
abc reacted to creedon in Changing section background color on hover
Try...
transition : background-color 0.5s ease-in-out; after you fix the other issue.
-
abc reacted to creedon in Changing section background color on hover
I updated my referenced post. Apparently SS is blocking the use of their CSS variables in the editor.
-
abc reacted to creedon in Change background colour on hover
@Anele0610
Add the following to Websites > Website Tools ( scroll to the bottom of the panel ) > Custom CSS.
[data-section-id="[enter data section id here between double quotes replacing square brackets]"]:not( .has-background ):hover .section-background { background-color : red; } This is for v7.1.
Use Heather Tovey's most excellent looking Squarespace ID Finder to get the data section id.
SIF will return something like the following. section[data-section-id="614b8ba6cbf4aa0de33419f4"]. You only need to enter the number between double quotes in the code above.
Let us know how it goes.
-
abc reacted to creedon in Why is Search so slow on Squarespace? Any way to speed it up?
Please see the following.
-
abc reacted to expertlypaul in Changing light box submission button background color and font
Thank you so much! Worked perfectly!
-
abc got a reaction from expertlypaul in Changing light box submission button background color and font
This will change your two buttons "Open Form" and "Get Your Cheatsheet"
.form-block .lightbox-handle, .form-wrapper input[type=submit] { background-color: #215eed; font-family: "Montserrat", Helvetica, Arial, sans-serif; }
-
abc reacted to Tiernan in How do I find out what the CSS structure is for Squarespace?
That's really neat, thank you for pointing that out!
-
abc got a reaction from Tiernan in How do I find out what the CSS structure is for Squarespace?
Developer Heather Tovey created a chrome extension specifically for finding various Squarespace IDs (such as blocks, sections, collections, etc.). I've been using it for several years now, and it's a huge timesaver. A must-have for anyone who builds with Squarespace.
Link: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
-
-
abc got a reaction from Beyondspace in Squarespace 7.1 - How do I get rid of the black border around Text Input Field whenever it's in focus?
Thank you!
-
abc reacted to davidhunternyc in Squarespace has issues with animated SVG logo
I just want to say that is impressive! I'm using Safari and when I first clicked on your test page both logos worked. Then when I clicked on each of the Test links only the bottom logo worked. The top left logo was static. I know nothing about website building or coding so I'm sorry I can't be of help. Still, I am searching for CSS or javascript code where I can load up my static logo as a SVG. Would you happen to have code that works for static logos? Thank you.
-
abc reacted to Beyondspace in Squarespace 7.1 - Is it possible to make mobile navigation overlay slide up and down instead of fade in and out?
Try
[data-section-id="overlay-nav"] { height: 0px; visibility: unset; -webkit-transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1), height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1); transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1); } .header--menu-open [data-section-id="overlay-nav"] { height: 100%; } Let me know how it works on your site
Support me by pressing 👍 if this useful for you
-
abc got a reaction from Beyondspace in Squarespace 7.1 - Is it possible to make mobile navigation overlay slide up and down instead of fade in and out?
I have one specific example that I would like to achieve for my website. Take a look at https://apple.com on mobile, and try opening and closing their menu. Notice how it slides down and up smoothly. Is there any way to achieve something similar on 7.1?
I've attached a screen recording of Apple's mobile navigation in action:
Screen Recording 2022-01-04 at 16.44.06.mov
-
abc got a reaction from CSMaderer in Increase Caption Size Under Image Slideshow
Try this code:
.gallery-section .gallery-caption p { font-size: 18px !important; }