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


Circle Member
  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by inside_the_square

  1. Site URL: https://youtu.be/cKxhyVtgBTc Hey there Squarespacers! Becca here with a free training on the brand new type of page section available in Squarespace - List Sections. 😍 List sections are kinda like collection pages; they contain multiple items in one place. You can have a title and button for each section, and then an image, title, description, and unique button for every item in the list. There are three kinds of layouts and all kinds of cool settings available for each! In this video you’ll learn how to add a list section to a page, change the content, and some of the settings that you’ll need to know when creating your own. I wanted to post it here for anyone curious about giving this new kind of page section a try! Here is a link to the video on YouTube; enjoy:
  2. Thanks for tagging me @paul2009 🙂 @brightbarboston there are some troubleshooting tips in the PDF (page 58 I think?) about copy and pasting out that PDF but you can always email me too! Send a link to support@insidethesquare.co so we can see what is going on. You might be targeting a different button type or have an extra formatting character in there. Please email me so I can help! ❤️
  3. That was so much fun!! 🥳I just had an absolute BLAST hanging out with @Sarah_SQSPsharing creative member area strategies with other Circle members in our webinar! So much fun 🙂 I'll be updating the recording to be released later... any last minute questions I should add to the Q&A section? Feel free to DM me or post here! 

  4. I totally agree with @Tiny_Coast - focusing on your target market's language style is important. For my audience, I try to remember that most of them are new to terminology that I use, so I keep an eye on forums, Facebook groups, and the comment section on my YouTube videos to see what language styles I should focus my strategy on. Instead of optimizing a blog post for "single page header code injection installation" I would use more casual language like "add code to one page" I also want to add Pinterest suggested search to the list! They have a lot of data that prompts those suggestions, and while it might not be as fancy as SEMRush or Raven Tools it's great for brainstorming. 😊
  5. Hey there circlers! My Beginners Guide to CSS for Squarespace just got a major makeover and wanted to share it here for you all to enjoy ♥ Here is a link to the PDF - let me know what you think! And if I spelled something wrong, DM pleeeeeease 😝

    Beginners Guide to CSS for Squarespace

  6. Hey there Circle friends - happy #TutorialTuesday🥳

    I have another text tutorial to share, this one with a typing animation. Just like last week's scrolling text, there are two steps to this one. First, you add the code block with the text you want to have "typed" onto the page, and then you add some custom CSS to animate & style it. 

    I made a quick tutorial video to show you exactly how to create it, and how to modify my code to change it up a bit. Check out the free tutorial video along with the codes on my blog at https://insidethesquare.co/squarespace-tutorials/typing-text

    Please feel free to share with anyone and everyone who wants to learn how to create this fancy text animation! I'll be back here on my Circle profile next Tuesday with another CSS tutorial for ya 😄

    💕 All my best - Becca 
    How to create a typing text animation in Squarespace with some custom code from InsideTheSquare

  7. Hey @SolveigTraeet 😀 If you are using the built in newsletter bock for squarespace, this code will change the color of the "input text" .sqs-block-newsletter input {color:red!important} And this code will change that placeholder text that says "email address" .newsletter-form-field-element::placeholder {color:red!important} Just change red in the example above to the color name or color code you want to see. Hope that helps; let me know how it goes!
  8. Hey there Circle friends - happy 2021 🥳

    I am keeping up my #TutorialTuesday tradition and wanted to start this year off with a special one; scrolling text. That's right - scrolling text animation is super easy to create on any Squarespace site, and this weeks free tutorial covers exactly that! 

    There are two steps - add the text via code block & then add the CSS to animate it. I outlined it all, along with the codes on my blog at https://insidethesquare.co/scroll

    Please feel free to share with anyone and everyone who wants to learn how to create this effect!
    I'll be back here on my Circle profile next week with another one 😄

    💕 All my best - Becca 

    Scrolling text tutorial from InsideTheSquare - grab the free codes at insidethesquare.co/scroll

  9. have no idea who it was on the Squarespace team that created the selector names for 7.1, but I want to be their best friend. Specifically, the person who decided to name the three lines of the mobile menu hamburger icon .top-bun, .patty, and .bottom-bun 

    ⁠Just stumbled upon that gem updating my list of codes and had to share 😂

    If you wanna make each line to a different color, you can update the colors in this lil' snippet here:
    .top-bun {background-color: pink!important}⁠
    .patty {background-color: teal!important}⁠
    .bottom-bun {background-color: yellow!important}⁠

  10. 📢 New Tutorial Alert - this one works for both 7 and 7.1!

    I wanted to show a fun way of create a pricing table in Squarespace with a little custom code. You can get all the details on my blog here: https://insidethesquare.co/pricing-table

    I'm curious: What do you think of this layout kinda tutorial instead of a one-off code fix?

    Feel free to comment right here on my Circle profile - do you prefer quick copy+paste code fixes or more creative concepts like this one? 🤔 I have a pretty lengthy list of things I want to teach, but it's so much more fun to make free tutorials people actually like... 😉 


    How to create a simple pricing table with some clever code - Squarespace tutorial.jpg

  11. Hey folks! New tutorial posted today on my YouTube channel today - how to use an image for a button! This one works for 7 or 7.1 and you can check it out here; enjoy! 😁


  12. Hey there Squarespacers! I just clicked the "publish" button on my new "Intro to CSS" tutorial on YouTube channel. If you are brand new to all things CSS, this is a great place to start! Hope ya love it ♥ 



  13. Hey @rkho - i have the codes your looking for! 😄 In 7.1 sites, large paragraph goes by the code name ".sqsrte-large", Medium paragraph text is the normal "p" and small paragraph text goes by ".sqsrte-small" Why? I have no idea, but that's what works for my 7.1 sites! Haha I also have a list of all the other text types like quotes, forms, button types, images, etc on pages 16 - 26 in my CSS cheat sheet if you have a copy of that. Plenty of other text code names to work with 👍👍
  14. Hey @TWozTallman If you go to squarespace.com you should already be logged in! Be sure to reach out to their support team if you can't get into the site editor. I usually go right to live chat on the bottom right of this page. Once you are all set and logged in, I have a free step-by-step tutorial on exactly how to step up a blog in Squarespace that you can check out on my YouTube channel; link below. Hope all that helps! Best of luck ♥
  15. Hey @oxmoserecords - I can help ya 🙂 That low highlight effect can be done with a little clever background gradient code. I have a tutorial about it on my youtube channel here. Long story short, this code will add that effect for active links: .Header-nav-item--active{ background: linear-gradient(to bottom, #FFF 50%, #0015ff 50%)!important; color: #000!important} And this one will do it for you on a hover. .Header-nav-item:hover{background: linear-gradient(to bottom, #FFF 50%, #0015ff 50%)!important; color: #000!important} You can play around with those percentages to make it perfect for your own site aesthetic 🙂 Hope this helps - let me know how it goes!
  16. Hey @DanielLucasDesigns! I just took a look and the menu is full color for me over here 😕 maybe something just got stuck in the code and you just need to "turn it off and back on again" aka reload the site builder page? If the problem still persists, you can add this code to force the open menu to be full color: .header--menu-open .header-menu.black-bold .header-menu-bg {background-color: #266880!important; opacity:1!important;}
  17. Yay!! So glad that did the trick 🥳 And thanks for subscribing! I am actually working on my tutorials for April right now, they are all focused on images because there are PLENTY of more random nuances like that to share 👍👍
  18. Oooooh I gotcha!! That link clears all this up - your not using a block gallery slideshow, your using a stacked slideshow! This is the code you're looking for: .sqs-system-gallery .slide-meta .title {font-family:Europa!important; font-size: 99px!important; color: #000000!important; } Give that one a try 👍👍
  19. Hey @hunterleath - I have a code that should do the trick! Use this to scoot that container down to the bottom of the image, and adjust these percentages to get it aligned the way you want it to be. .slide-meta-content{top:90%!important; left:20%!important} And if you want to align that text to the left instead of centered, we gotta update that percentage to something closer to this: .slide-meta-content{top:90%!important; left:50%!important; text-align:left} Anywho, give those a try and let me know how it goes! 👍👍
  20. Hey @dfinc - that is super strange! So Europa is assigned to a different text type in your site styles menu but still not showing up for your meta? So strange! Can you send me a link to your site, and let me know what text type it is assigned to? I'll hop into your source code to see what name the system gave it so we can use it in that code. Feel free to DM me if you don't want to post the link publicly.
  21. Hey @dfinc! Sometimes you need to make sure a browser prioritizes your code over the main site styles file by telling it that your line is important... by literally adding the word !important 🙂 Try this version and let me know how it goes. Also, even though Georgia is a font available in Squarespace, that doesn't mean it's installed on your site! Make sure that font is actively installed from a selection in your site styles menu, or manually install it from Google; I have a tutorial on that here. .sqs-gallery-block-slideshow .meta .meta-title { font-family: georgia!important; font-size: 99px!important; color: #000000!important; } Hope all that helps!
  22. Hey @klingercreative - first off, love your color scheme and your ADORABLE logo ♥ Anywho, this code should do the trick for ya; let me know how it goes! #categoryNav nav li {float:none!important}
  23. Hey Folks! In 7.1 galleries are set up differently than they used to be in 7. Long story short, it is no longer a width % or px issue, it's actually a setting that says how many are being displayed in a row. The snippet below will specify the # of columns displayed - 2 in this example. And to apply this only to a gallery in one specific page section, you can use that section id first. So... this code to target all grids galleries: @media only screen and (max-width: 640px) { .gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}] Or this version for just the one section: @media only screen and (max-width: 640px) { [data-section-id="123456789"] .gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}} One SUPER important thing I want to mention - i am sure you all noticed that we get a mobile preview and a desktop preview... and thats it! It turns out that 7.1 was designed with one main break point at 991; so double check when your galleries are moving down to one and adjust that 640 accordingly ♥ #protip Anywho, hope that helps! Let me know how it goes 🙂
  24. Hey @dbtherd! This is a great question, and it all comes down to the element name. In pretty much all sites, all paragraph text is p and all links are a as in active link. Blog post titles are different for some theme families, and 7.1 is a whole different ball game. On the off chance you are using a Brine theme, the blog post itself are .BlogItem-title and in an on page summary. it's called .BlogList-item-title In Bedford & Pacific , it's .entry-title and for Five, its .entry-title a because why make things easy?? Haha! 😝 Anywho, I hope this info helps you get going in the right direction. Feel free to reply if you are using a different theme family and need some helping tracking those code names down. Always up for solving a good mystery 🙂 All my best - Becca
  25. Hey @deirdrep - sorry this answer is a bit late but I am just now hopping back into the forums! Anywho, if you still need the code, this button will keep it active on all breakpoints and hide that hamburger for ya. Hope it helps! And let me know how those margins/paddings look after you try it; depending upon the size of the text in your button we might need to finesse this fit a little... keep me posted! 🙂 .header-burger {display: none!important} .header-actions .btn, .header-actions .header-actions-action--cta {display:flex!important; visibility:visible; margin:auto!important; order: 2!important;}
  • Create New...