Jump to content

inside_the_square

Circle Member
 View Profile  See their activity

  • Posts

    203

  • Joined

  • Last visited

  • Days Won

    2

 Content Type 

Everything posted by inside_the_square

  1. inside_the_square
    Thanks for sharing the screenshot! It looks like you want your dropdown menu background to be transparent and that's totally possible with a little CSS! Here is the code you'll need to add to your site: .header .header-nav-folder-content{background-color:transparent!important} And here is the tricky part as of right now: how to access your custom CSS. 😅 If you are using the Website menu, navigate to website, select website tools, and select custom CSS. Here you can paste the code. If you see the word "pages" followed by "design" click on design, and then select Custom CSS. That opens the same panel, and you can paste the code there. A little confusing for now, but I hope that info helps, and best of luck with your project!
  2. inside_the_square
    Hey @leilollipop I don't have a quick fix for an SVG but I do have an older tutorial that can show you how to use a unique logo on an individual page; hope it helps!
  3. inside_the_square
    Hey Yohan! This is a site animation that is created for border buttons. If you turn off your animations (design > site styles > animation) it will go back to the normal hover effect where it's slightly lighter/transparent on a hover. Hope the info helps and best of luck with your project!
  4. inside_the_square
    I am in LOVE with the new variant button option we have in Squarespace!! 🙌 I decided to tinker a bit with the design of it, changing up colors, borders, shape, and adding a hover effect, all using CSS based on the full selector for these buttons: .variant-option .sqs-button-element--secondary Here is a tutorial video I made about it, and the codes I used in case anyone else wants to get creative here, too! 🎉 /* change the variant button style */ .variant-option .sqs-button-element--secondary { background:#F6EDCE!important; /* change the button background color */ border: 2px solid #EDD17D!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: 1rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ } /* change the button on a hover */ .variant-option .sqs-button-element--secondary:hover { background:#EDD17D!important; /* change the button background color */ color: brown!important; /* change the font color */ box-shadow: 5px 5px 15px rgba(0,0,0,0.2) /* give the button a shadow */ } /* change the selected button style */ .ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:cheacked+label { background: #e5f5f6 !important;/* change the button background color */ color: #50bdb8 !important;/* change the button font color */ border: 1px solid #50bdb8 !important; /* change the button border */ border-radius: 3rem !important; /* change the button shape */ } Why is the word !important used a gazillion times in this code?! That little extra CSS is helping us overwrite the style already being applied to the button based on your secondary button style. Everyone has different design settings selected for this button, so you might not need to add !important to every value in your code, but I added it to this code to make sure it will work! It won’t add a significant amount of load time to your site, and it won’t affect anything else that is loading - just the variant buttons we are restyling. Anyhoo - hope you found this info helpful, and have fun with your Squarespace website! 🥰
  5. inside_the_square
    Totally! All you need to do is remove the parent selector of ".sqs-product-quick-view-content" from both lines of code and it will work on an individual product page.
  6. inside_the_square
    Hey @moretrobin love this idea - and totally possible with CSS! To change any accordion background to red on a hover, use this code: .accordion-item__click-target:hover{ background:red } Hope that helps and best of luck with your project!
  7. inside_the_square
    Hey @christiancor - you can actually change this in your font menu under the assign styles option at the bottom. Here is a quick screen share on how to do that. Hope it helps, and best of luck with your project!
  8. inside_the_square
    Hey @2cubed this is a great question - and one of my favorite things to code for Squarespace! 🙌 The tricky part in Squarespace CSS is that there are over 10 unique button selectors. Primary and secondary selectors are good catch-all codes that can work for some button types, but something specific like the newsletter block uses a more unique selector. Update the word red in this code to the color name/color code you want to use: .newsletter-form-button:hover{ background:red!important } Side note - a standard opacity change happens to some buttons on a hover, so add opacity:1!important to your code if it's not the full color you want. Hope that helps and best of luck with your project!
  9. inside_the_square
    Hey @Analissa - no need to share a link if you're using version 7.1! The code for customizing quantity color in a lightbox is: .sqs-product-quick-view-content .product-quantity-input input{color: #FFF!important;} And the code for an add to cart button hover color in a quick view lightbox is: .sqs-product-quick-view-content .sqs-add-to-cart-button:hover{background: blue!important; opacity:1!important} Change up the word blue to any color code or websafe color name that you want to use! Code source - my blog: https://insidethesquare.co/squarespace-tutorials/
  10. inside_the_square

    Today was a pretty epic day here InsideTheSquare - I launched the digital version of my infamous Squarespace CSS cheat sheet!! 🎉 👩‍💻 🚀

    Yup, this magic is now live on Notion, and it's better than ever. 😎  Hereis a sneak peek of all the awesomeness inside: spacer.png
    You'll have access to over 200+ premade style snippets, 500+ selectors for creating your own code, plus pro tips, resource articles, & my code troubleshooting guide at your fingertips. 🤩

    I'm offering lifetime access for only $34.99... until May 1st when the price goes up to $97 😮

    Snag this deal while you can at insidethesquare.co/css

    PS - If you already ordered one, the update should be in your inbox because you have lifetime access! If you don't see that email, send me a DM here on the forum and I'll get you a link ASAP ❤️

  11. inside_the_square
    Hey Jay, All you need to do is hop back into the advanced page settings and remove your code. CSS can only change the style of a Squarespace site (cascading style sheet) and not the way it works, so if you don't like what a code is doing, all you have to do is remove it! When you're ready to learn more, I have a free class on CSS basics for Squarespace that you can check out here: https://insidethesquare.co/learn
  12. inside_the_square

    Now that page section dividers are public, I can share my overview tutorial about them! 🎉
    Get the low down on this new design feature here: 

     

  13. inside_the_square
    Hey @angelashelton - no need for code here! You can just toggle that metadata off so it won't display and on the individual post, toggle off "show date" I attached two screenshots to help. I also want to mention that we can't switch templates in 7.1 because you don't need to! Unlike the theme families we used to work with in version 7 (Brine, Bedford, Pacific, York, Etc) All of the 7.1 sites have the exact same features and functionality. Now there definitely is a bit of learning curve BUT the good news is that if you want to recreate something you see in a different 7.1 template, you can, without having to switch over anything! The page types, premade sections, and the Fluid engine & auto layouts are all the same.
  14. inside_the_square
    @AppealedApple totally! I hopped into your CSS and updated some of the code you had in there to make this magic happen. Feel free to adjust the top:-2rem to the size that suits you best! How this works: we had to move the announcement bar down to z-index:0, then apply a position absolute to the image so we could give it a z-index and move it up the x-axis with a negative top value. Hope this info helps and best of luck with your project! header#header { box-shadow: 3px 4px 8px rgba(54,49,94,.5) } footer#footer { box-shadow: 3px 4px 8px rgba(54,49,94,.5) } #announcement-bar-text-inner-id p { font-size: 16px !important; text-align: right !important } .sqs-announcement-bar-close { display: none !important } .sqs-announcement-bar-dropzone{ z-index:0!important } .header-title-logo,.header-title-logo a { overflow: visible !important; margin-bottom: -50px; } .header-title-logo img { max-height: 90px !important; position:absolute; top:-2rem; z-index:999!important } .header-title-logo img,.header-title-logo a { max-height: 150px !important }
  15. inside_the_square
    @JMelo I've got the perfect tutorial for you! This will walk you tuanphan's suggestion step-by-step:
  16. inside_the_square
    Thanks for the shout-out @QueenOfTeacups 🥰 @GMS2 It looks like you found a solution for this mobile layout (yay!) but if you need any future code help, feel free to search my tutorial library ( insidethesquare.co ) or reach out to me directly anytime: support@insidthesquare.co
  17. inside_the_square
    Site URL: https://insidethesquare.co/fluid Fluid Engine was officially announced today and I am over the moon excited about it! It has been SO HARD to not talk about this - so happy it's the 21st!! 😅 For anyone not familiar with FE yet, I made a quick overview video about what's new & different, what is still the same, and even recorded a quick screenshare to show off some exciting editing basics. It's all live on my YouTube channel ( https://youtube.com/insidethesquare ) and my site ( https://insidethesquare.co/fluid ) I am totally going to redesign my site with FE next month! Anyone else jumping on the band wagon with me??
  18. inside_the_square
    Hey @Laurelb01 ! Unfortunately, page sections won't respond to a selector like that, but you can totally add an anchor link using some HTML in a code block instead. This will pull that anchor to the top of your browser, so add it to the bottom of the page section just above the services section. Here is a step-by-step tutorial on how to create it:
  19. inside_the_square
    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:
  20. inside_the_square
    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! ❤️
  21. inside_the_square

    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! 

  22. inside_the_square
    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. 😊
  23. inside_the_square

    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

  24. inside_the_square

    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

  25. inside_the_square

    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

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources