Jump to content


Circle Community Leaders
  • Posts

  • Joined

  • Last visited

  • Days Won


inside_the_square last won the day on April 20 2019

inside_the_square had the most liked content!

About inside_the_square

Personal Information

Recent Profile Visitors

7,549 profile views
  1. Thanks for jumping in to answer this one for me @creedon I tested the code you shared and it did work, so this should do the trick for you too @Sjeanjaquet
  2. Hi @jenartsquare - I know it has been a little over 24 hours since your question, but I also received your message with a help for request, so I wanted to share the response here for others who might need the same support. These screenshots are from the blog settings in version 7.1. Here is a support article with more information: https://support.squarespace.com/hc/en-us/articles/10340364951181-Styling-blog-pages-on-version-7-1
  3. You'll need some javascript to change the date type; not my specialty but hopefully another Squarespacer can help! For the order, you can use the settings built into Squarespace to set your primary metadata as the date, followed by the category as your secondary metadata. After that, this code will organize them into a column and hide the delimiter: .blog-meta-section{ flex-direction:column } .blog-meta-delimiter{ display:none!important }
  4. Hey Luke! I'd love to help. Here is a quick code fix for ya: .blog-more-link { border:1px solid #323843!important; padding:5px!important; padding-right:1.5rem!important; border-radius:4px; transition: all .3s!important; } .blog-more-link:after{ background:transparent!important; content:"→"!important; transform:translate(3rem, -1rem) } .blog-more-link:hover{ background:#323843; color:#FFF!important; transition: all .3s!important; }
  5. Thanks for sharing the link @mikelakeland - that's super helpful for code questions like this! The social icons in a mobile menu have an extra special selector class added .mobile I updated your existing code to have the two custom icons work on your mobile menu using that extra label. You'll want to add this to the end of your custom CSS, leaving the old code as-is so it keeps working on larger screens 👍👍 .header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(5) .icon--fill{ background-image:url(https://static1.squarespace.com/static/65df4f2399036b6578e26fb5/t/66170b248b1a5224371bd320/1712786212638/VK.png); background-size: 100%; background-repeat: no-repeat } .header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(7) .icon--fill{ background-image:url(https://static1.squarespace.com/static/65df4f2399036b6578e26fb5/t/6643869445e11541f9f9e9c3/1715701396661/Little-Red-Book.png)!important; background-size: 100%; background-repeat: no-repeat } .header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(7) svg, .header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(5) svg { display: none }
  6. hey @birdmade this is a great question! At this time, we can use the text style variables from the source code, but color theme specifics won't cross over (it's an HSL/A code issue I have been troubleshooting for a while now 😅) but there is good news! Color themes are set on a container level, so we can target them individually with CSS. If you know the color codes, you can program it to reverse, and if you are using black and white, you can use an invert filter hover effect. Here is an example for light 1 and bright 2 using both the color properties and the filter property: [data-section-theme="light"] .sqs-block-button-element{ background-color:red; color:blue; border-color:blue } [data-section-theme="light"] .sqs-block-button-element:hover{ background-color:blue; color:red; border-color:red } [data-section-theme="bright"] .sqs-block-button-element{ background-color:#fff; color:#000; border-color:#fff } [data-section-theme="bright"] .sqs-block-button-element:hover{ filter:invert(1) } One word of caution here - there are more than 15 types of buttons in Squarespace. Primary, secondary, tertiary, fit vs fill, list item, list section, product, digital product, newsletter form, header button, etc etc. so when working on a code that can create this hover effect for a "global button" you've got a lot of code to write. I hope this answer helps and best of luck with your project!
  7. @SaraVada you are right; we are limited to GIFs and images inside a blog thumbnail. We can only assume why but I bet the main reasoning is the load time, and the autoplay/audio accessibility dilemma. Whatever the reason is, I don't have a quick code fix that can replace one or two of those images with a video. 💔 The best solution might be to manually create a blog post list on your home page. You could manually add the image or video, and place a text block underneath with the title, expert, and a link. If you blog a few times a week like I do it would be an absolute nightmare, but it's the only option available at this time. I will add that from an SEO & UX standpoint, keeping the file size small with optimized GIFs can improve performance... so until we have the feature, skipping the custom code might be a better bet for your site traffic. 😬 Sorry I don't have a better answer, but I hope this explanation helps & wish you the best of luck with your project! P.S. If anyone reading this has a fancy javascript plugin that can target specific blog posts on the collection list page by some magical entry item id, PLEASE share it because that would be SO cool!!
  8. hey @Amikhail - this is a great question! The container images are placed in within a product page can be pretty limiting, especially when you have images with a different aspect ratio. There isn't a way to force the container to respond to the size of the image, but we can take this the other way and force the image to fit inside the container! 😬 This is a code that will work specifically for the simple layout; other designs use different selector classes. .ProductItem-gallery-slides-item-image{ object-fit:contain!important } @WHEBRU - this is the same code, updated for the storefront page that shows all the products in a grid: .products .grid-item img{ object-fit:contain!important } I hope that info helps with your project!
  9. Hey @Julieta_T - this is a great question! You can use a media query to make any custom code work on a specific screen size. A lot of us Squarespacers consider mobile to be anything smaller than 640px wide, but some consider it to be 950px or smaller because that's when the mobile menu kicks in; that value is up to you! Whatever size you want to isolate, add your grayscale code inside a query like this: @media only screen and (min-width: 641px) { img:hover { filter:grayscale(1) } } This code says "any screen that is at least 641px wide, use this code!" I have a tutorial video & article with more info here: https://insidethesquare.co/mobile I hope that info helps! And in regards to the hover issue in edit mode; I have heard of some hover effects being buggy in the config (when you're actively using the editor) Make sure you test it outside the program, like an incognito browser, and double-check that your hover effect is applied to the top layer of content. Best of luck with your project! 🙂
  10. Hey @Scotty_90 - you can totally do this with a little CSS! We can write a code that says "inside this specific content block, make the H1 text this font family, font weight, and font size" so it will look like your P1 but it will actually be an H1. You can use a block id & selector class to isolate it. Here is an example code you can start with: #block-123 h1{ font-family: Name!important; font-size: 15px!important; font-weight: normal!important; } To grab the ID, you can dig around the source code or use this extension: https://insidethesquare.co/chromeext Here is a little video with more info; hope it helps and best of luck with your project! 🙂
  11. That blank space is lame - let's add a forced width to fix it; play around with the % here until you like the size. You can sneak some padding in here too. You can add these new property and value combos to your original code so it looks like this: .pdp-layout-full-width-carousel .pdp-gallery-images { max-height: 50vh; width: 40%; padding-top:10px } P.S. Those foxes are so dang cute!!!! 😍
  12. Gotcha - now that, we can totally fix with code 😎 This code here will reduce the height of it to 30% of the page height, change up taht 30 to any value you want. The second line will make sure the image isn't cropped. If they are different sizes, there will have to be some space between the image and the container edge because we can't make the container fit the image; we have to code it the other way around. 🙃 Anyhoo - I hope this helps you with your project! And thanks for the video tutorial idea; I'll totally have to add this to my youtube channel 🙌 .pdp-layout-full-width-carousel .pdp-gallery-images{ max-height: 30vh; } .pdp-gallery-slides-image{ object-fit:contain!important }
  13. Hey @TorvaTerra! have you looked at the full product page layout? It will place your product images at the top without any extra code required 🙂
  14. Yay - glad that did the trick! And absolutely - how can I help? 🙂
  15. Hey @laurafiks - this is a great question! This code will add a red text shadow to a banner slideshow title and a blue shadow to the description. Adjust the shadow values as needed: .user-items-list-banner-slideshow .list-item-content__title{ text-shadow: 5px 5px red } .user-items-list-banner-slideshow .list-item-content__description{ text-shadow: 5px 5px blue }
  • 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.