Jump to content

inside_the_square

Circle Member
  • Posts

    183
  • Joined

  • Last visited

  • Days Won

    2

inside_the_square last won the day on April 20 2019

inside_the_square had the most liked content!

Personal Information

Recent Profile Visitors

5,082 profile views
  1. I also forgot about your second question - borders! Those can be tricky for images. If you have one set to "fill" instead of fit, or a shape, you can use a basic border code. All content blocks get a unique block id that you can find with a free Chrome extension that a lot of us use ( https://insidethesquare.co/chromeext ) Here is a tutorial about creating code for specific blocks: https://insidethesquare.co/squarespace-tutorials/css-targeting-tricks and here is an article about borders: https://insidethesquare.co/borders
  2. Hey @Bexxx - welcome to Squarespace! πŸ‘‹ A lot of the coding you used in Showit will work for common HTML things, like the a that you'll use to target an active link. But you've already discovered that Squarespace has its own unique selectors for some important things. πŸ˜‰ The active link in your website header has a background image you can hide with a version @tuanphan 's code. This code below will hide the underline from pages you are actively on, and leave a border hover effect that will be the same color as your nav color, even if you change it in the site style menu: .header-nav-item--active a{background:transparent!important} .header-nav-item a:hover{border-bottom:1px solid var(--solidHeaderNavigationColor)!important} If there are other things you want to change, you'll find a ton of free codes on my tutorial blog at insidethesquare.co/squarespace-tutorials I hope all that info helps, and best of luck with your Squarespace project!
  3. Gotcha - thank you for sharing that screenshot!! That's a carousel list section auto layout, and you can have those images display as a circle without any code. In edit mode, select edit content, and under your design tab you'll see the image crop option. You can pick circle from that list and Squarespace will crop it for you. πŸ‘πŸ‘
  4. Hey @GabriellaW123 - I would love to help but I am a little confused by your terminology. 😬 If you have a summary block that shows content from a collection on the home page, set the image aspect ratio and use this code to make the images a circle: .sqs-gallery-design-carousel img{border-radius: 50%!important} To get super nerdy here, I wanna explain why I was a little hesitant to answer. A portfolio is a specific collection type in Squarespace, but we can't feature project info in any carousel layout. A summary block is a content block that can pull data from a blog, event, or store (not a portfolio of projects) If you want to share a link I can make sure we are talking about the same thing! You can set an unpublished site to password protected so people can look before you launch. You'll find that under settings -> site availability -> password Anyhoo, hope that initial code does the trick! Add that to your site wide CSS and any summary block set to carousel will have images with curved corners.
  5. Hey @uhohitsheidiho - this is a great question! The block id is for the whole form, so you'll need to add the selector for the button inside that block. This code will change that font for ya: .form-wrapper .sqs-button-element--primary { font-family: Cunia!important } Hope that helps and best of luck with your project! ☺️ P.S. If you have more than one form on your site, you don't need to use the block id! If you use the code name ".form-wrapper .sqs-button-element--primary" all of your contact forms will get the same font family change.
  6. That's a great question! If you set the button design to "fill" instead of "fit" you can change the flex alignment with a code like this: .sqs-button-element--tertiary { justify-content:flex-start!important } I hope that info helps and best of luck with your project! ☺️
  7. Hey @Miicherey! It looks like that testimonial title is just a standard text block in a normal fluid engine page section. We can't change font sizes for a specific selector of text using the editor, so if none of your assigned font sizes for h1, h2, h3 and so on will work, you can change this individual thing with CSS. Here is a video with info on how to do that. Also - this video is a little old but the concept still works! To add CSS, go to website then website tools, then custom CSS. They rearranged the design menu back in August. πŸ˜…
  8. Hey Jake! I am a huge fan of customizing Squarespace with CSS. I have a little over 300 blog posts that specify the classes you're talking about: https://insidethesquare.co/squarespace-tutorials/ I also use this free chrome extension to grab block ids (not affiliated just a fan!): https://insidethesquare.co/chromeext And if you want some tips on when to use a selector/class vs a block id (and when to usee both!) check out this video overview specifically for Squarespace: And if you wanna grab my collection of classes for Squarespace, I have them all organized in a Notion doc you can get here: https://insidethesquare.co/css I hope all that info helps! Feel free to DM me if you have any questions about a specific project; I'm always looking for more tutorial ideas for my blog πŸ˜‰
  9. Today is a HUGE day for little ol' me - I just passed the 20,000 subscriber mark on my YouTube channel!!! πŸŽ‰ πŸ₯° πŸ™Œ

    I know a big chunk of those 20,000 are a part of our Squarespace community right here on the forum so I had to cross post my thanks ❀️

    If you are one of my subscribers, thank you for your support! It's an honor to be your teacher and to share a new Squarespace tutorial with you week after week πŸ₯°

    And if you aren't a subscriber yet, then you are in for a treat! πŸ˜‰ I've got over 400 published tutorials for creating and customizing Squarespace ready for you to explore:

    https://youtube.com/insidethesquare

  10. Thanks for sharing @Michelle_Barra_ πŸ™Œβ€οΈ If you need any help with this code @Alma_ugc26 feel free to DM me.
  11. Hey @AJZ I just took a look at your source code and there is some typo/character issue that is blocking your code from rendering after line 35721. Your code is just fine for 7.1, so something must have carried over from wherever you store your codes. 😬 https://vimeo.com/865155812/e356e70256?share=copy If you remove your code & notes, and replace it with this you should be good to go. P.S. be sure to add !important for your burger display value change to make sure it's not ignored by the browser. Hope this helps! /* burger on desktop */ .header .header-burger{display:flex!important} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;}
  12. I posted a new tutorial today - how to change the style of hyperlinks in text blocks on a page! We're removing the underline, changing the color, and creating a hover effect.

    This is the main selector from the video; it limits the changes to any links inside an html based block on the page, which means the site title (if it's text) and footer links aren't effected:

    #page .sqs-block-html a

    To see the code in action, including the hover effect, you can check out the free tutorial on my blog atΒ https://insidethesquare.co/squarespace-tutorials/hyperlink-style
    (ALL)BlogPostTitleTemplate.thumb.png.cd2ad151e88bdbfd8645bb9095c2a18d.png

    Β 

  13. Gallery sections are a great way to display images, but the caption style options are a little.. uh... lacking 😬 I used some custom code on a client site to create a two-line image caption/description with a little custom style and published it on my blog today! Here is a link to the tutorial with the code I created and a video on how to set it up πŸ™Œ

    https://insidethesquare.co/squarespace-tutorials/two-line-captionΒ 

  14. Hey @ArtLover777! Sorry I didnt get to your youtube comment yet - I've got a lot to catch up on from taking Sunday off πŸ˜… Anyhoo, to add code to a single page you'll need to use page header code injection for the storefront. Click on the gear icon to access the store settings, then select advanced, then page header code injection. Paste my code there between two style brackets so the browser knows it's CSS, like this: <style> @media only screen and (max-width:767px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } } </style>
Γ—
Γ—
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.