pixies1
Member-
Posts
45 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by pixies1
-
Site URL: https://type-a-professionals.squarespace.com https://type-a-professionals.squarespace.com password: verbatim Hello experts! I'm using a typewriter effect on my redesigned site and I've gotten it close to the way I want it to look, but I need some help with the finishing touches, please! How do I get the cursor to finish "typing" after the last period and not continue on to the end of the code block? I have the display set to "flex" but the tablet view still cuts off the A and the period. How do I fix that? (It looks fine on mobile.) And while we're at it, if it's possible to make the cursor a little shorter top-to-bottom, I'd love for it to be the same height as the letters. Here's my current code, many thanks in advance! HTML: <div class="typewriter"> <div class="typewriter-text"> <h1> Hi, we're Type A. </h1> </div> </div> CSS: .typewriter { font-family: Rubik, monospace; display: flex; } .typewriter-text { display: flex; overflow: hidden; animation: typing 4s steps(20, end), blink 1s step-end infinite; white-space: nowrap; color: #006373; border-right: 3px solid #bdbdbd; box-sizing: border-box; margin: auto; } @keyframes typing { from { width: 0% } to { width: 100% } } @keyframes blink { from, to { border-color: transparent } 50% { border-color: #bdbdbd; } }
-
Make phone number a clickable link using HTML
pixies1 replied to pixies1's topic in Customize with code
Works perfectly now, thank you so much! -
Make phone number a clickable link using HTML
pixies1 replied to pixies1's topic in Customize with code
Or if it's easier/cleaner, here's the CSS I added to hide the phone number in my primary navigation header from the mobile navigation menu. This CSS does this correctly, but then it also hides the phone number everywhere else on the site, which I do not want it to do. //hide phone number in mobile nav// @media screen and (max-width: 640px) { [href="tel:+18055008973"]{ display: none; } } -
Site URL: https://typeaprofessionals.com Hello Squarespace community! I'm redoing my site using the Brine template (not yet published, current site still visible). I want to add a line that looks like this, but with the phone number as a clickable link: Call or text: 805-500-TYPE I need to do this in a code block rather than adding a phone link the normal way (long story). I have this line of code that makes the colors look right, but I don't know where to put the href=“tel:805-500-8973” to make the number clickable: Call or text: <p1 style="color:#BABC16;">805-500-TYPE</p1> Thank you!
-
How can I change the hover color on a custom social media icon?
pixies1 replied to pixies1's topic in Customize with code
Thank you! Looks much better. Is it possible to have the second column underneath the first column and the fourth column underneath the third column so they read down in alphabetical order?- 27 replies
-
- social-links
- hover
-
(and 1 more)
Tagged with:
-
How can I change the hover color on a custom social media icon?
pixies1 replied to pixies1's topic in Customize with code
Yes! My site looks okay on a horizontal tablet view but vertical looks terrible, as you noticed 🙂 If you can instruct me how to fix it, I would be most grateful. Thank you!- 27 replies
-
- social-links
- hover
-
(and 1 more)
Tagged with:
-
@lplabranche, did you try adding this entire code?: //remove underlines from hyperlinks// .sqs-block-html a {background-image:none!important} /* Remove non-background image underline for heading and paragraph links */ h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important}
- 41 replies
-
- squarespace-7.1
- css
-
(and 1 more)
Tagged with:
-
@Anat13 That worked, thank you! I had to keep my current line of code and add yours to remove both underlines: //remove underlines from hyperlinks// .sqs-block-html a {background-image:none!important} /* Remove non-background image underline for heading and paragraph links */ h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important} I chatted with Squarespace and they said they weren't aware of any issues or recent changes that would cause the problem and they said I shouldn't use CSS on my site 😒 I'm still wondering what is causing a double underline on my site, but at least I'm able to get rid of it now. Thank you SO much!!
- 41 replies
-
- squarespace-7.1
- css
-
(and 1 more)
Tagged with:
-
Site URL: https://typeaprofessionals.com Please help!! The first CSS I ever entered on my site was to remove the underlines from all hyperlinks throughout my site: .sqs-block-html a {background-image:none!important} Today I was playing around in a code block to see if I could make the hyperlinked text semi-bold and for some reason now the underlines are back in all of my hyperlinks that are not in a code block (the hyperlinks in code blocks still look correct with no underline). I didn't change anything to the CSS and I deleted that code block that I was playing with, but the underlines are still there. If I delete that CSS above, it actually adds a second underline to all the hyperlinks. Can you please help me fix this?? Thank you!!
- 41 replies
-
- squarespace-7.1
- css
-
(and 1 more)
Tagged with:
-
How can I change the hover color on a custom social media icon?
pixies1 replied to pixies1's topic in Customize with code
Haha, I thought I deleted your placeholder text when I pasted the new URL but now I see that I hadn't 🙃 It looks perfect!! Thank you for the elegant solution!!- 27 replies
-
- social-links
- hover
-
(and 1 more)
Tagged with:
-
How can I change the hover color on a custom social media icon?
pixies1 replied to pixies1's topic in Customize with code
Thank you bangank36, I uploaded a green version of the icon and added your CSS, but now the icon disappears on hover instead of turning green. Any ideas?- 27 replies
-
- social-links
- hover
-
(and 1 more)
Tagged with:
-
Site URL: https://typeaprofessionals.com Hello! For my social media icons, I was able to replace Squarespace's generic link icon with a customized Google icon using the code below (and uploading an image of the Google icon). However, I would like the Google icon to hover on the same color as my other social media icons. Does someone know how to add to my code below to make this work? Thank you in advance! ------ //replace link icon with Google icon// .sqs-svg-icon--list a:nth-of-type(2) { svg { display:none; } background-image: url(https://static1.squarespace.com/static/5ec8617eea936a6584ab0cca/t/603c4d56d5c9360a36489e3a/1614564694083/G+icon.png); background-size: 83%; background-repeat: no-repeat;} //social media icons color// //standard color// .sqs-use--icon { fill: #d9d9d6 !important; } //social media icons color on hover// .sqs-svg-icon--wrapper:hover { .sqs-use--icon { fill: #babc16 !important; } }
- 27 replies
-
- social-links
- hover
-
(and 1 more)
Tagged with:
-
Thank you, I'll look into plug-ins if adding code to Squarespace to make this adjustment is not possible. Thanks!
- 11 replies
-
- summary
- summary-block
-
(and 1 more)
Tagged with:
-
Hi there, I’m using a summary carousel block to display testimonials (actually blog posts). I click the right arrow to scroll through the testimonials. When I reach the last one, it stops and does this fast rewind left back to the first one. Is it possible to add code so you can keep clicking the right arrow and it will keep cycling through in a continuous loop? I don’t want it to scroll automatically, I just want the right arrow (or left arrow) to keep cycling through instead of stopping at the end and then fast-rewinding back to the first one. Any help is much appreciated. Thanks!
- 11 replies
-
- summary
- summary-block
-
(and 1 more)
Tagged with: