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. I am struggling to find the correct code to change the font for the titles of the projects in my portfolio and also in the navigation to 'next project' at the bottom of a project page. Thank you
  2. Site URL: https://www.returnermagazine.com/ Hi, my custom font isn't showing up in the mobile version of my website. I would like for it to apply on any phone iPhone/Android, etc. Can anyone help? Thank you so much in advance! Here's the custom CSS I'm using right now: @font-face { font-family: 'CatchyMager'; src: url('https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/62f924cdd583b67a0a6d077e/1660495054237/CatchyMager-Normal.ttf'); font-weight: normal; font-style: normal; } .has-site-title .Header-branding { font-family: "CatchyMager"; }
  3. Site URL: https://processworkuk.squarespace.com Hi, I'm trying to show the year on the date side tag that shows on an event thumbnail - currently it only shows Date & Month. Site - https://processworkuk.squarespace.com Password - ProcessworkUK2022 Any help would be great.. Thanks!
  4. Site URL: https://www.wellingtonlakesidemarket.com/ We run a seasonal market and had a need to create some sort of categorized vendor directory. I created the vendor directory using the following features: Vendor listings are created in a blog as blog posts - the blog URL is wellingtonlakesidemarket.com/vendors A portfolio page sorts the vendors into "projects" based on types - this is where I want visitors directed whether from the page or search engines wellingtonlakesidemarket.com/vendor-directory The project pages use summary blocks with matching tags to show which vendors are a certain type - ex. pets, baked goods, health and wellness, etc. My issue comes up with the blog posts themselves. I have been able to disable the links on the images of the posts (on the project pages), and hide the pagination once you click into them. However, I haven't figured out how to disable the title link so that it either... a. Does not allow you to click the title into the more detailed blog post OR b. If you can click into the blog post, that when you click "vendors" on the listing you are redirected back to the vendor directory portfolio page and not to the generic blog. I don't want it to go to the generic blog because it's uncategorized, limited to 20 listings, and shows pagination for "older posts" ex. wellingtonlakesidemarket.com/vendors It seems I can't create a redirect without "disabling" the blog, but if I disable the blog, then the clickable titles take you to an error page. Any help is appreciated.
  5. Site URL: https://www.jurajsimkovic.com/projects/slovak-national-theatre Hi, as the title says, I would like to add specific captions to specific images in my gallery and, this is important, I want them to only appear in the lightbox view. I don't want them to appear under the images when viewed casually on the site, without lightbox. Most of them are masonry grid-galleries, one of them is a simple grid-gallery. I have just paid for the personal plan and would like to avoid upgrading and paying for the higher tier business plan. The picture attached to this post should clarify the look of the captions. Thank you in advance. Juraj
  6. Hi there, I've uploaded custom fonts and for some reason they seem to be underlined and hyperlinked. Not sure how to fix this!
  7. Site URL: https://oarfish-lilac-zypa.squarespace.com/ Hi, I need to change the header button font to Geo custom font. Can you help? https://oarfish-lilac-zypa.squarespace.com/ Password: 1234 Thanks a lot! Barbara
  8. Site URL: http://www.ahmadjooma.com/shop Hello, I recently changed my template to Sofia Rey. (Squarespace 7.0) Everything is good except the categories do not show in the shop. I would like visitors to be able to filter by categories. ie. ALL / ART / Clothing etc. Here is my website link example: www.ahmadjooma.com/shop Kind regards, Ahmad
  9. Site URL: https://www.southcoastpolishedconcrete.com.au/ Hi I'm consistently getting a Syntax Error on line 2. I've redone this code several times. Same error. Any ideas? Thanks @font-face { font-family: 'Handel Gothic Regular'; src: url('https://static1.squarespace.com/static/62f8539daaeed83dbf327248/t/62fb44c2a851d622757d6a70/1660634306138/Handel+Gothic+Regular.ttf'); } h1 { font-family: 'Handel Gothic Regular'; } h2 { font-family: 'Handel Gothic Regular'; } h3 { font-family: 'Handel Gothic Regular'; } h4 { font-family: 'Handel Gothic Regular'; }
  10. Site URL: https://www.anastasiidesign.com Hi @tuanphan could you please help me with resizing my banner? All banners at the pages look like this on the phone. Thank you in advance! Here is link https://www.anastasiidesign.com/about
  11. Site URL: https://penguin-daisy-j23y.squarespace.com/ In the first section of the website, my client is seeing the font much smaller than I am in my device checks. I'm running through if she's seeing the smaller size because of her computer settings, but still TBD. Essentially, it should be larger (screenshot attached) and that's what I'm seeing on my end so I'm finding it hard to troubleshoot why she continually sees the font here so much smaller! 🙂 Any tips? PW: MYNDY123
  12. Site URL: https://www.countiesenergy.co.nz/residential/connections Hi there, We are having an issue with a module on a page on our website. https://www.countiesenergy.co.nz/residential/connections The section is not appearing as it should. The cache on the device/browser (iphone13/chrome) has been cleared but the problem persists. The section was built using custom code. Can anyone help? Thank you! Sam
  13. Is it possible to use CSS or other coding to turn on the ability for users to pinch-to-zoom on images in Lightbox view on mobile devices? (It would have to be the usual zoom in/out gestures, in Lightbox mode, on a Gallery Page.) I don't understand why Squarespace still doesn't allow this. Every other website and gallery maker I know of does it, as it's a hugely useful feature for photography and art given how small mobile screens are. Thank you!
  14. Site URL: https://sphere-wolverine-yt27.squarespace.com/ Hi I want to overlap the purple logo with the hero image any ideas for code? have not had any luck! thanks! Password: Emi123
  15. Hi, I'm trying to create a site with page sections that are the full height of the viewport (and that flex with window size). This was quite achievable in 7.0, and also in 7.1 pre Fluid Engine update. Now it seems there's no options at all for having full viewport height sections that flex, unless I'm missing something. In the classic page section editor in 7.1 setting the section height to 100 would give you a 100vh section that adjusts to viewport size. Doing that in a Fluid Engine section does not yield the same result. Ultimately what I want to achieve is the effect seen here - https://alvarotrigo.com/fullPage/#page1 Another thing I cant achieve because of this is having an image at the very bottom edge of the section and therefore the page as well. Any ideas or help on achieving this would be greatly appreciated.
  16. Site URL: http://thesprouthouse.net Hello, I am looking for help adjusting the margins/spacing between each section on the product details pages. I would like for the product title, description, price, options, and add to cart buttons to all be closer together on both desktop and mobile. If anyone can help, I greatly appreciate it! My site password is $prout, and I am in the trial phase. I know very little about CSS, but I am learning!
  17. hi! ☻ so i made some custom css to create a text "highlight" effect on my newest project but you'll see from the picture that the "background" color is overlapping on the previous line of text. i know i need to maybe shorten the height of the actual highlight element but i'm kind of a noob with css. if you look at the second example i provided it looks perfect because the highlight goes BEHIND the second line of text and i love the look of the highlight kind of touching the next line of text {am i even making sense?!} any ideas?? here is the code i added for reference: h2 strong {background: linear-gradient(to bottom, #F7F7EF 60%, #E6F09D 40%);} h1 strong {background: linear-gradient(to bottom, #F7F7EF 60%, #FECF97 40%);} thanks in advance!
  18. Site URL: https://yilinwong.com/cinematography Hi, Im trying to make a page with video project thumbnails in one column that fills up up the entire width of the web screen. The title of the project would show once hovered over. Attached is the cinematography page that I'm trying to apply this format to, how could this be done? Thanks in advance!
  19. Site URL: https://goldchain.studio/ Hi gang! The title pretty much says it all but I have a single dropdown folder menu for my navigation on browser and I'd like to replace the title with my own custom image. I've managed to do it for mobile view but I'm looking for a way to make this happen on browser view. Any ideas? 🙂 Thank you!
  20. Site URL: https://freedomofmovement.squarespace.com/ Hello, I am in the process of building a site and would need your help. I use the Growwell template and have a question about a specific header/navigation. I would like to have a fixed header that is first transparent/dynamic when opening a page (as it is at the moment on my site) so that photos and videos are not covered. Only when scrolling it should become a colored bar. I would like to adjust the color of the header to the background color of the specific subpages, i.e. the header should get a different color on each page. Here is a squarespace page with my requested header variation. https://www.thehappinessinstitute.at/ Can someone explain me how to create such a header? I would be very happy about your help!
  21. 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
  22. codepen:https://codepen.io/robin-dela/pen/KKPYoBq I have been trying to add this code into my sight, but I cannot seem to make it work. I have also tried adding it to a new section that uses the new Squarespace fluid engine and it appears to not even work at all versus applying the code to a code block in the previous version. Any help with this would be greatly appreciated!
  23. Site URL: https://freedomofmovement.squarespace.com/ Hello, I am in the process of building a site and would need your help. I use the Growwell template and have a question about the portfolio block. Under the section 'Retreats' on my page I have chosen the portfolio block to present events. On the page where all projects/events are listed I have chosen the option where text is on each image/link. Is it possible to style the font individually? I would like to have the date (at the top) and the location (at the bottom) a bit smaller and in a narrower font style. I am attaching an example image from another site. I hope my concerns are somewhat understandable. I would truly appreciate your help!
  24. Site URL: https://www.marieforleo.com/ Hi everyone, Is it possible to create a design similar to the "Ideal Design" in the attached image? I am trying to make it really simple for someone to download my freebie on our website so I can grow my email list. Marie Forleo is the best and easiest email sign up I have found - www.marieforleo.com SQUARESPACE NEWSLETTER BLOCK TWEAKS • Include an image • Remove "Surname" field • Stylise similar to Marie Forleo Can anyone recommend any advice or tutorials to follow? Our Website if needed - https://www.betsyandfrancis.com/ Thank you so much, James & Nicole
  25. Site URL: https://frog-purple-6hlt.squarespace.com/ Hello I'm using the new Template auto block in Fluid Engine, but I can't seem to figure out or find what the correct selector code is to change the typeface in the quotes. This is the current code I'm using: .sqs-catalog-item-list { font-family: 'untitled-sans-regulr-test' } My website is https://frog-purple-6hlt.squarespace.com/ password: Lewisfinaincial Many thanks
  • Create New...