Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'custom-css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://www.halftijds.be Hi everyone, I'm looking for an automatic counter I can embed on blog posts and event items so people can see how many people have seen the page. I want to do this for every page i have so it has so i need a widget or code i can easily multiply. Anyone any ideas?
  2. Hello! I am building out an online virtual class website for a client and they would like to have a member area. I am curious if there is any way to have each new member that signs up to check off that they have read and acknowledge the terms of service? Thanks!
  3. Hi, I am trying out some layout ideas on fluid engine but I can't seem to get any sticky positioning css to apply to them? Has anyone managed this? I want a text block to be positioned:sticky on a page, so when you scroll it stays put. have tried #block-yui_3_17_2_1_1655973398342_27738 { position: sticky!important; position: -webkit- sticky!important; top:50%; } But it's not working...
  4. i'm making changes to my button styles but my old code isn't working for the different button sizes now with this new update (primary, secondary, tertiary). any tips?
  5. Site URL: https://www.thesecomefromtrees.com I need to change the Header background color on only the Shopping Cart page (https://www.thesecomefromtrees.com/cart) so the white logo will show up. Right now the header background on that page is white, which is a problem because I use the logo as the link back to the Home page. I've played around with various codes in previous answers, but they aren't working. I was able to fix it on the Blog pages, but this one has me stumped. Here's the color I want to use: #10612e Thanks!
  6. Site URL: https://degriolaw.squarespace.com/ I need help making the last card a different color. Any help with the css for this? I am assuming it will be a nth-child situation but not sure how that works. Thank you in advanced
  7. Site URL: https://goldchain.studio/ Hey Squarespace gang! 🙂 I have a dropdown menu on my website and randomly an underline appeared under the first link in the dropdown on both browser and mobile view and I haven't figured out how to remove it. I've done some forum sleuthing and tried some of the custom css recommendations but to no avail. Anyone have any experience with this and have any tips on how to remove? Also while we're at it, I like having a simple "+" that hovers for my dropdown menu but I'd like to remove this stage in the mobile view so you don't have to flip through 2 stages to get to the navigation menu. Any tips on how to remove the "+" on mobile view? Here's a link to my site! https://goldchain.studio/
  8. Site URL: https://tuanphan.squarespace.com/timeline-01?noredirect Demo Link (Password: abc) How to This can work with All Plans (Trial, Personal, Business...) 1. Add a Code Block > Paste the code <ol class="t-timeline"> <li> Point 1 <span class="details"> Description of point 1 </span> </li> <li> Point 2 <span class="details"> Description of point 2 </span> </li> <li> Point 3 <span class="details"> Description of point 3 </span> </li> </ol> 2. Add this to Design > Custom CSS /* Timeline CSS */ ol.t-timeline { position: relative; display: block; margin: 100px; height: 4px; background: #9b2; } ol.t-timeline::before, ol.t-timeline::after { content: ""; position: absolute; top: -8px; display: block; width: 0; height: 0; border-radius: 10px; border: 10px solid #9b2; } ol.t-timeline::before { left: -5px; } ol.t-timeline::after { right: -10px; border: 10px solid transparent; border-right: 0; border-left: 20px solid #9b2; border-radius: 3px; } /* ---- Timeline elements ---- */ .t-timeline li { position: relative; top: -77px; display: inline-block; float: left; width: 150px; transform: rotate(-45deg); font: bold 14px arial; } .t-timeline li::before { content: ""; position: absolute; top: 3px; left: -29px; display: block; width: 6px; height: 6px; border: 4px solid #9b2; border-radius: 10px; background: #eee; } /* ---- Details ---- */ .details { display: none; position: absolute; left: -85px; top: 60px; padding: 15px; border-radius: 3px; border-right: 2px solid rgba(0,0,0,.1); border-bottom: 2px solid rgba(0,0,0,.1); transform: rotate(45deg); font: 12px arial; background: #fff; } .details::before { content: ""; position: absolute; left: 10px; top: -9px; display: block; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: #fff; border-top: 0; } /* ---- Hover effects ---- */ .t-timeline li:hover { cursor: pointer; color: #28e; } .t-timeline li:hover::before { top: 1px; left: -31px; width: 8px; height: 8px; border-width: 5px; border-color: #28e; } .t-timeline li:hover .details { display: block; color: #444; } 3. Customize Timeline Line Color, Size. Find this code ol.t-timeline { position: relative; display: block; margin: 100px; height: 4px; background: #9b2; } Point 1, Point 2, Point 3 color .t-timeline li:hover { cursor: pointer; color: #28e; } Circle Color/Hover color .t-timeline li::before { content: ""; position: absolute; top: 3px; left: -29px; display: block; width: 6px; height: 6px; border: 4px solid #9b2; border-radius: 10px; background: #eee; } .t-timeline li:hover::before { top: 1px; left: -31px; width: 8px; height: 8px; border-width: 5px; border-color: #28e; } Description of point 1, point 2, point 3 .details { display: none; position: absolute; left: -85px; top: 60px; padding: 15px; border-radius: 3px; border-right: 2px solid rgba(0,0,0,.1); border-bottom: 2px solid rgba(0,0,0,.1); transform: rotate( 45deg ); font: 12px arial; background: #fff; } .t-timeline li:hover .details { display: block; color: #444; } Notes Code by Anders Grimsrud - Codepen Tested on SS 7.1
  9. Site URL: https://scarlet-magenta-kera.squarespace.com/orthopedic-issues password: VMPT123 I want the drop down menu as it is now, however orthopedics/sports is always underlined, how can I remove that below is the code i am using currently .header-nav .header-nav-item--folder .header-nav-folder-content{ font-weight: bold; } a.header-nav-folder-title:hover + div, .header-nav-folder-content { text-align: left !important; position: absolute; left: 100% !important; right: 0% !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); background: transparent !important; } thanks
  10. Site URL: https://palestinefund.squarespace.com/ password: Palestine Hi I want to remove the white box that popups up when you click to add in your email, as well as when you type the text be white not black --- see attached photo this is the current code I have now footer.sections input { border-color: white !important; background: transparent !important; border-top: none !important; border-left: none !important; border-right: none !important; } footer.sections input::placeholder { color: white !important; } footer.sections button.newsletter-form-button.sqs-system-button.sqs-editable-button-layout { color: black !important; border-color: black !important; }
  11. Site URL: https://goldfish-red-5c6m.squarespace.com/ I am trying to make a burger menu that opens to the top left and extends outward (and is transparent) instead of down (see attached photo) not sure this is possible, but this is the code I have for now .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;} .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; box-shadow: -5px 5px 15px #000}
  12. Site URL: https://springtail-violin-hntl.squarespace.com/ Hi guys, I've searched on google and the forum but there are a few steps I couldn't figure out yet (most of the css I searched and fixed myself) I know the settings within the GUI that I'd like, but I don't know how to translate them to the CSS code. Link: https://springtail-violin-hntl.squarespace.com/ Password: waterkantThe settings I'd like are as follows: HEADER Homepage: Home -> Design -> Site styles -> Fonts -> Assign Styles -> Site Navigation -> Size -> Custom 1.4rem Home -> Edit (page) -> Edit Site Header -> Desktop Icon -> Link Spacing 3.0 exclude the header social icons exclude the header button HEADER everywhere else: 1: Home -> Design -> Site styles -> Fonts -> Assign Styles -> Site Navigation -> Size -> Paragraph 2 include the header social icons include the header button Home -> Edit (page) -> Edit Site Header -> Desktop Icon -> Link Spacing 1.5 2: site header to fit with the 'content width' of '89' as the rest of the site follows this as well (same as footer for example) ----- Other minor steps I'd love to figure out: 'over ons' page: have the picture of Marlies the women above the text on mobile (basically flip the 2 boxes in the section for mobile) across the whole site: I would love a 'back to top button' on the bottom right saying "^" (for mobile and desktop), I have no idea how. Is this a feature inside squarespace? Hope the description makes sense, if not please let me know so I can elaborate Thanks so much in advance, Kind regards Patrick de Waal
  13. Site URL: https://www.beginners2runners.co.uk/ Please help me! On the mobile version, there is lots of white space above the homepage video, which is under the header. ... Also, when the website is loading the CSS is showing before the page loads under the announcement bar, can anyone help please??
  14. Site URL: https://www.vanitybrothers.com Hello, I have pasted the following custom css to prevent my homepage banner video resizing on mobile. I am left, however, with some padding left and right (see screenshot). Does anyone know how I might remove this in order that the video is full width? The site is vanity brothers.com, password 'vanity'. Thank you, Katie @media screen and (max-width: 640px) { body.homepage .Parallax-item:first-child iframe { width: 100% !important; left: 0 !important; height: auto !important; inset: unset !important; top: 0 !important; height: 200px !important; } body.homepage .Parallax-item:first-child figure.Index-page-image.loaded { transform: unset !important; bottom: 0 !important; height: 200px !important; } section#vanity-brothers-showreel { height: 200px !important; }}
  15. Site URL: https://www.coastalathletics.net/events Hey! On my event pages on the link listed above, I have form buttons placed on each page to collect registrations. I would love to have these placed in a more centralized location under the address of each event-specific post. I have searched for this capability and tried writing some code but have had no luck. Please let me know if you have questions, any help is greatly appreciated. Best, Patterson
  16. Site URL: https://www.emeraldbarkley.com/checkout/order-confirmed?oid=62b86e4dce91c46dd2c77202&authCode=NjJiODZlNGRjZTkxYzQ2ZGQyYzc3MjAyOjIwMjItMDYtMjZUMTQ6MzM6NDYuNzk1WpemBMbQ3lFIAsBG_NkUy9G7nckSzXVhoMwYTyDJGNmB Hi there! I've had a few customers let me know that both my Shopping Cart page and my order confirmation page have white text on a white background, so you can't see anything. I'm all thumbs when it comes to CSS, but I managed to find something in the forums to give my shopping cart a grey background; however I'd really love to keep the white background for both pages and just have black text. Would anyone be able to help me out? I placed an order and have a link to the confirmation page: https://www.emeraldbarkley.com/checkout/order-confirmed?oid=62b86e4dce91c46dd2c77202&authCode=NjJiODZlNGRjZTkxYzQ2ZGQyYzc3MjAyOjIwMjItMDYtMjZUMTQ6MzM6NDYuNzk1WpemBMbQ3lFIAsBG_NkUy9G7nckSzXVhoMwYTyDJGNmB Many thanks in advance!
  17. I've got image blocks that are set to clickthrough to another page. I wanted those images to have a hover over effect and I have found the code for that but it only works when you add a custom css block to the page. So I get the image to show up but so far can't find a way to link a URL to it. Is there anyway to link a clickthrough URL to a custom css code? Below is the code i'm using <img src="https://static1.squarespace.com/static/53407622e4b0f0bdc6e387dc/t/5dcf181f66e4061a93334439/1573853226998/WinterWandering.jpg" onmouseover="this.src='https://static1.squarespace.com/static/53407622e4b0f0bdc6e387dc/t/5dcf18cc3563fc67fd558d75/1573853393669/WinterWanderingv2.jpg'" onmouseout="this.src='https://static1.squarespace.com/static/53407622e4b0f0bdc6e387dc/t/5dcf181f66e4061a93334439/1573853226998/WinterWandering.jpg’"> The link to the page i'm trying to do it is here www.wraysinclair.com/film - the top one is how I want the clickthrough to work, and the bottom image is how I want the hover effect to work. Does anyone know any code that I could add a clickthrough URL to my custom css block? Specifically the url I want to link to is www.wraysinclair.com/winter-wandering
  18. Site URL: https://papaya-armadillo-7acs.squarespace.com/ Password for website: design101 I'm trying to customise a summary block on this website. I'm using the summary block as a testimonial carousel slider, so I'm feeding in the content from blog posts. I can kind of get the content looking almost how I want it when I'm in 'list view', but I still want to show multiple so I'm wondering how I can achieve this. if there even is a way. **This occurs on the home page and the 1:1 coaching page. Below is what I want to achieve. Below is what I've been able to achieve (minus the carousel element).
  19. Site URL: https://www.houseofflow.co/ Hi All: I am having the most difficult time trying to figure out how to add a save/like feature on my website that will allow my users to favorite a video and then have these videos appear on their personal member page. I have been told that Squarespace doesn't have that functionality, but if there is someone that knows or has a plugin/work around then please let me know. Please see the screenshots below for better clarification of what I'm trying to do. Thanks in advance for your help. Best, Grant
  20. Hi, is there any way I can replace the left / right arrows of my carousel to a set of buttons (similar to the photo attached), on both browser and mobile? (Squarespace 7.1.)
  21. Site URL: https://petitepaks.squarespace.com/ I added a custom font into my CSS and it looks fine in the Headers on the desktop view. When I click into the mobile view the line height spacing becomes huge. I have tried to add CSS to both mobile and desktop but when one is right, the other is not. Any help appreciated! Desktop view: Mobile:
  22. Site URL: https://www.currentmoodinteriors.com/collection I have these widgets provided by a 3rd party site embedded on one of my pages as HTML code and can't figure out how to get them centered -- it's driving me nuts! I saw there was a previous post about this but since it was from 2 years ago, I thought I'd repost as a new question 🙂 I tried the methods I saw in the previous post but none seemed to work and I'm fresh out of ideas!
  23. Site URL: https://flatworm-platinum-yyzg.squarespace.com/config/design/custom-css Hello, I am updating my site and want to make my landing (hero?) page a headline that scrolls between several full-page images, each with a different text and button. Headline seems to be the easiest way to do this, except that I cannot figure out how to make my header transparent. I have tried a bunch of code variations from other threads and nothing has worked. Any advice would be so appreciated. Thank you!!!
  24. Site URL: https://www.homewardrestoration.com Anchor links do not work consistently. I am having trouble getting my anchor links to consistently navigate through my homepage. Occasionally it will jump to the bottom of the page instead. And sometimes it will navigate a bit lower or higher on the page than it should be. Password: 15367
  25. Site URL: http://www.gapeye.com Password: Ladybirddbp_1984 Hi, Can someone help me build a CSS code to customize my order confirmation page? I want to integrate my Client Intake form I created through ActiveCampaign once a customer places an order. This will trigger my automation to start after a customer presses submit. Below is an embedded code or link to my form: Simple Embed: <div class="_form_15"></div><script src="https://gapeye.activehosted.com/f/embed.php?id=15" type="text/javascript" charset="utf-8"></script> Link: https://gapeye.activehosted.com/f/15 Thanks a lot! Destini
  • Create New...